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

你非常接近。您需要包含$ 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'
            });
    }]);

Answer 3

这应该有效！

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

$ routeProvider将无法正常工作

3 个答案: