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;
}

ChapterCtrl：

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，导致此错误：

由于以下原因导致无法实例化模块ngViewExample： ReferenceError：未定义BookCntl 在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）在http://code.angularjs.org/1.2.3/angular.min.js:29:58 at Array.forEach（native）在q（http://code.angularjs.org/1.2.3/angular.min.js:7:255）在e（http://code.angularjs.org/1.2.3/angular.min.js:28:374）在Yb（http://code.angularjs.org/1.2.3/angular.min.js:32:427）在Xb.c（http://code.angularjs.org/1.2.3/angular.min.js:17:315）在Xb（http://code.angularjs.org/1.2.3/angular.min.js:18:30）在Rc（http://code.angularjs.org/1.2.3/angular.min.js:17:99

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

Answer 1

如果你这样声明它们，你必须在$ routeProvider定义中的控制器名称上使用引号。

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;
});

这应该有用。

它是一个角度ngRouter错误还是我做错了什么

让我们专注于出现错误的元素：

BookCtrl：

ChapterCtrl：

路由器功能

1 个答案: