AngularJs routeProvider错误

Question

我遇到了 routeProvider 的问题，不知道为什么它不起作用。问题出在配置函数上。这是代码

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

mainApp.config(['$routeProvider' ,function($routeProvider) {
   $routeProvider.
    when('/', {
        templateUrl: 'index.html',
        controller: 'indexController'
    }).
    when('/first', {
        templateUrl: 'first.html',
        controller: 'firstCtrl'
    }).
    when('/second', {
        templateUrl: 'second.html',
        controller: 'secondCtrl'
    }).
    otherwise({
        redirectTo: 'index.html'
    });
}])

mainApp.controller('indexController', [function() {
    this.outputString = "String from the index controller";
}]);

mainApp.controller('firstCtrl', ['$scope', function($scope) {
    $scope.outputString = "String from the first controller";
}]);

mainApp.controller('secondCtrl',['$scope', function($scope) {
    $scope.outputString = "String from first controller";
}]);

Answer 1

您的应用程序缺少 Angular 路由模块。

确保你添加它:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>

或者，如果您使用的是 Bower，请将 "angular-route": "^1.4.0" 添加到 bower.json 并运行 bower install.

最后，确保将 ngRoute 注入(inject)到您的应用程序中

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

这是一个有效的 jsFiddle .