javascript - 这是一个 ngRouter Angular 错误还是我做错了什么

Question

此代码来自 AngularJs docs for ngRouter

angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
  function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl,
      controllerAs: 'book'
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl,
      controllerAs: 'chapter'
    });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
});

function MainCntl($route, $routeParams, $location) {
  this.$route = $route;
  this.$location = $location;
  this.$routeParams = $routeParams;
}

function BookCntl($routeParams) {
  this.name = "BookCntl";
  this.params = $routeParams;
}

function ChapterCntl($routeParams) {
  this.name = "ChapterCntl";
  this.params = $routeParams;
}

让我们关注出现错误的元素:

BookCtrl:

function BookCntl($routeParams) {
  this.name = "BookCntl";
  this.params = $routeParams;
}

章节Ctrl:

function ChapterCntl($routeParams) {
  this.name = "ChapterCntl";
  this.params = $routeParams;
}

路由器功能

  function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl,
      controllerAs: 'book'
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl,
      controllerAs: 'chapter'
    });
    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
});

现在，如果您在 plunker 上进行编辑，它将可以正常工作。
但是如果我们像这样不同地声明 BookCtrl 和 ChapterCtrl:

angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
  function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl,
      controllerAs: 'book'
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl,
      controllerAs: 'chapter'
    });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
}).controller('MainCntl', function($route, $routeParams, $location) {
  this.$route = $route;
  this.$location = $location;
  this.$routeParams = $routeParams;
}).controller('BookCntl', function($routeParams) {
  this.name = "BookCntl";
  this.params = $routeParams;
}).controller('ChapterCntl', function($routeParams) {
  this.name = "ChapterCntl";
  this.params = $routeParams;
});

主 ngViewExample 模块不再定义，因为它找不到 BookCtrl，导致此错误:

Failed to instantiate module ngViewExample due to: ReferenceError: BookCntl is not defined at http://run.plnkr.co/WS5cdGZ2VT2oHDLR/script.js:5:19 at Object.d [as invoke] (http://code.angularjs.org/1.2.3/angular.min.js:30:232) at http://code.angularjs.org/1.2.3/angular.min.js:29:58 at Array.forEach (native) at q (http://code.angularjs.org/1.2.3/angular.min.js:7:255) at e (http://code.angularjs.org/1.2.3/angular.min.js:28:374) at Yb (http://code.angularjs.org/1.2.3/angular.min.js:32:427) at Xb.c (http://code.angularjs.org/1.2.3/angular.min.js:17:315) at Xb (http://code.angularjs.org/1.2.3/angular.min.js:18:30) at Rc (http://code.angularjs.org/1.2.3/angular.min.js:17:99

所以基本上 ngViewExample 没有实例化，因为 BookCntl 没有定义。
如何告诉路由器功能在模块的 Controller 中查找 BookCntl？
或者我应该将其报告为 Angular 站点中的错误。

Answer 1

如果您这样声明它们，则必须在 $routeProvider 定义中的 Controller 名称上使用引号。

angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
  function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: 'BookCntl',
      controllerAs: 'book'
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: 'ChapterCntl',
      controllerAs: 'chapter'
    });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
}).controller('MainCntl', function($route, $routeParams, $location) {
  this.$route = $route;
  this.$location = $location;
  this.$routeParams = $routeParams;
}).controller('BookCntl', function($routeParams) {
  this.name = "BookCntl";
  this.params = $routeParams;
}).controller('ChapterCntl', function($routeParams) {
  this.name = "ChapterCntl";
  this.params = $routeParams;
});

这应该有效。