javascript - $routeProvider 将无法正常工作

Question

我有一个问题和疑问

我的客户端使用:

<div ng-view></div>

以及以下脚本:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>

我的 routProvider 是:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

效果很好。

我不明白为什么这个实现不起作用，我之前看到它使用过很多次:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
  $routeProvider.
      when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
      }).
      when('/view2', {
        controller: 'MyCtrl2',
        templateUrl: 'partials/partial2.html'
      }).
      otherwise( {redirecTo: '/view1'});
});

另一个问题是:为什么在第一个示例中，函数之前有“$routeProvider”注入(inject)？据我了解，函数($routProvider)应该完成这项工作。

谢谢。

Answer 1

您的代码工作得很好 ( plnkr )，但您拼写错误了 redirectTo，因此到 /view1 的初始重定向不起作用。

关于显式注入(inject) $routeProvider:当您缩小 JS 代码以供生产使用时，使用显式注入(inject)版本可以防止变量重命名问题。例如，在不明确的情况下，您的代码可能会缩小为如下所示:

a.config(function(b) { b.when('/view1', ...) });

由于 Angular 依赖于参数名称来注入(inject)正确的提供程序，因此您可以将其显式命名为字符串(不会被缩小):

a.config([ '$routeProvider', function(b) { ... } ]);

这样，Angular 就知道第一个参数应该是 $routeProvider。