Angular 1.5.x 路由不工作

Question

我在这里查看了很多关于 Angular 路由的问题，但一直无法解决这个问题。如果我忽略了什么，我深表歉意。我一直在尝试使用 Angularjs 官方教程和种子存储库来制作一个简单的应用程序。此代码托管在 Web 服务器上，但出于此目的，我将我的代码复制到 Plunker here。代码也在下方 - 感谢您提供的任何见解。

Index.html

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.js"></script>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
  </head>

  <body>
    <header ng-include="'header.html'"></header>
    <div ng-view></div>
  </body>

</html>

home.html

<div ng-controller='homeCtrl'>
    <h2>{{ location }}</h2>
    <p>This is the home page content.</p>
    <a href='#faq'>FAQ</a>
</div>

faq.html

<div ng-controller='faqCtrl'>
    <h2>This is the FAQ.</h2>
    <p>{{ question }}</p>
</div>

脚本 1

angular.module('testApp', [
    'ngRoute',
    'home',
    'faq'
])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.otherwise('/');
}]);

脚本2

angular.module('home', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl : 'home.html',
        controller : 'homeCtrl'
    });
}])

.controller('homeCtrl', [function ($scope) {
    $scope.location = 'USA';
}]);

脚本 3

angular.module('faq', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/faq', {
        templateUrl : 'faq.html',
        controller : 'faqCtrl'
    });
}])

.controller('faqCtrl', [function ($scope) {
    $scope.question = 'Who am I?';
}]);

Answer 1

您的应用中有一些 typos/omissions：

在 index.html 中，您缺少 ng-app 中的应用程序名称：

<html ng-app="testApp">

在您的 "home" 和 "faq" 控制器中，您需要使用 correct syntax 进行注入：

使用：

.controller('homeCtrl', ['$scope', function ($scope) {

而不是：

.controller('homeCtrl', [function ($scope) {

最后，在home.html和faq.html中，根本不要使用ng-controller。在您的路由定义中，您指定了用于每条路由的控制器。在模板中再次指定它会导致实例化第二个控制器。

Plnkr

Angular 1.5.x 路由不工作

Angular 1.5.x Routing Not Working

javascript

angularjs

angular-routing