Question

我有一个非常简单的AngularJS模板，我正在努力让路由工作，但是当我加载页面时，我只是看到index.html的H1标签。

我的应用位于子目录/angular-route/中，我知道部分存在，我可以访问/angular-route/partials/interest.html并且页面渲染正常。

我错过了一些非常基本的东西吗？

<html>
<head ng-app="myApp">
    <title>AngularJS Routing</title>
    <base href="/angular-route/" />
</head>
<body>

<h1>AngularJS Routing</h1>

<div ng-view></div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<script>
    'use strict';

    var myApp = angular.module('myApp', []).
      config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/interest', {
                templateUrl: 'partials/interest.html',   
                controller: 'InterestCtrl'
            }).
            when('/catalogue', {
                templateUrl: 'partials/catalogue.html', 
                controller: 'CatalogueCtrl'
            }).
            otherwise({redirectTo: '/interest'});
    }]);

    myApp.controller('InterestCtrl', function($scope, $routeParams) {
        console.log('InterestCtrl');
    });
    myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
        console.log('CatalogueCtrl');
    });
</script>

Answer 1

除了需要的基本标记旁边，您还将ng-app指令放在了错误的元素（head）上。在您的代码中，Application仅在标头内初始化。 Angular忽略了其余的HTML。

WORKING PLUNKER

<html ng-app="myApp">
<head>
  <title>AngularJS Routing</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script type="text/ng-template" id="partials/interest.html">
    <h2>Inereset</h2> 
  </script>
  <script type="text/ng-template" id="partials/catalogue.html">
    <h2>Catalogue</h2> 
  </script>
</head>
<body>

  <h1>AngularJS Routing</h1>

  <ul>
    <li><a href="#/interest">Interest</a></li>
    <li><a href="#/catalogue">Catalogue</a></li>
  </ul>

  <div ng-view></div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

  <script>
      'use strict';

      var myApp = angular.module('myApp', []).
        config(['$routeProvider', function($routeProvider) {
          $routeProvider.
            when('/interest', {
              templateUrl: 'partials/interest.html',   
              controller: 'InterestCtrl'
            }).
            when('/catalogue', {
              templateUrl: 'partials/catalogue.html', 
              controller: 'CatalogueCtrl'
            }).
            otherwise({redirectTo: '/interest'});
      }]);

      myApp.controller('InterestCtrl', function($scope, $routeParams) {
        console.log('InterestCtrl');
      });
      myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
        console.log('CatalogueCtrl');
      });
  </script>
</body>
</html

Answer 2

以下配置为我工作！

我们想要使用http://localhost:8000/app/

访问我们的应用

然后让你的基本标签突出显示

AngularJS子目录路由不起作用，应用了<base />标记

2 个答案: