Question

即使在dependencyInjection中包含ngRoute文件和ngRoute，也会出现以下错误。

未捕获错误：

[$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=demoModule&p1=Error….org%2F1.2.7%2F%24injector%2Funpr%3Fp0%3D%2524routeprovider%0A%20%20%20%20...<omitted>...2)

来源：

<head>
    <title>Intro to Angular js </title>
</head>

<body>
    <div>
        <div data-ng-view=""></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
    <script>
        var demoApp = angular.module ( 'demoModule' , ["ngRoute"]);

        demoApp.controller ( 'SimpleController', function ( $scope ) {
            $scope.persons = [ {name: "xxx", city: "St.Louis"}, {name: "yyyy", city: "NY"}, {name: "zzzz", city: "Seattle"} ];
            $scope.addCustomer = function ( ) {
                    $scope.persons.push ( {name: $scope.customerName, city: $scope.customerCity})
            }
        } );

        demoApp.config (function ($routeprovider) {
            $routeprovider
                .when ('/',
                       {
                           controller: 'SimpleController',
                           templateUrl: 'View1.html'
                       })
                .when ('/view2', 
                       {
                           controller: 'SimpleController',
                           templateUrl: 'View2.html'                               
                       })
                .otherwise ({ redirectTo:'/'});
        });

    </script>
</body>

Answer 1

正如Anthony Chu所说，你的命名错误，需要从$routeprovider更改为$routeProvider

示例：

demoApp.config (function ($routeProvider) { $routeProvider .when ('/', { controller: 'SimpleController', templateUrl: 'View1.html' }) .when ('/view2', { controller: 'SimpleController', templateUrl: 'View2.html' }) .otherwise ({ redirectTo:'/'}); });

实例：http://jsfiddle.net/choroshin/6dsr6/

Answer 2

我已经调查并发现了一些可能导致此问题的事情。这些是：

确保＆＃39; $ routeprovider＆＃39;应更改为正确的名称＆＃39; $ routeProvider＆＃39;。
确保＆＃39; demoModule＆＃39;模块已添加到您的应用程序中。

让一切更清楚，我已经创建了一个与您的应用程序完全相同的示例。有关详细信息，请参阅here。

HTML

<body ng-app="demoModule">
    <div>
        <div data-ng-view=""></div>
    </div>
</body>

JS

var demoApp = angular.module ( 'demoModule' , ["ngRoute"]);

demoApp.factory('personLoader', function (){
    return {
        persons: [ {name: "xxx", city: "St.Louis"}, {name: "yyyy", city: "NY"}, {name: "zzzz", city: "Seattle"} ]
    };
});

demoApp.service('personService', function (personLoader){
    this.addCustomer = function (person) {
        personLoader.persons.push(person);
    };
});

demoApp.controller ('ListController', function ($scope, personLoader) {
    $scope.persons = personLoader.persons;
});

demoApp.controller('AddController', function ($scope, personService) {
    $scope.addCustomer = function (person) { 
        try{
            personService.addCustomer(person);      
            $scope.Success = true;
        }
        catch(e) {
            $scope.Success = false;    
        }
    };
});

 demoApp.config(function ($routeProvider) {
            $routeProvider
                .when ('/',
                       {
                           controller: 'ListController',
                           template: '<ul><li ng-repeat="person in persons">{{ person.name }} {{ person.city }}</li></ul><a href="#/view2">Add customer</a>'
                       })
                .when ('/view2', 
                       {
                           controller: 'AddController',
                           template: '<form><div ng-show="Success">The new customer has been added successfully</div><p><label>Name:</label><input type="text" ng-model="person.name"/></p><p><label>City:</label><input type="text" ng-model="person.city"/></p><button  ng-click="addCustomer(person)">save</button></form><a href="#/"> Back to list</a>'                               
                       })
                .otherwise ({ redirectTo:'/'});
        });

希望这会对你有所帮助!!如果有任何问题，请告诉我

Angular 1.2.9 - 未捕获错误：[$ injector：modulerr] - 即使包含ngRoute也是如此

2 个答案: