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' 注入？据我了解功能（$ routProvider）应该做这项工作。

谢谢。

Answer 1

您的代码工作正常（plnkr），但您拼写错误redirectTo，因此初始重定向/view1不起作用。

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

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

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

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

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

Answer 2

这应该工作！

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

Answer 3

你超级亲密。您确实需要包含 $routeprovider。这应该适合你。

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