CODEWITHSUNDEEP
angularjs
Moove
Moove

Reputation: 9

Angular 1.2.9 - Uncaught Error: [$injector:modulerr] - even after including ngRoute

Getting below error even after including the ngRoute file and ngRoute in dependencyInjection.

Uncaught Error: 

[$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)

Source: 

<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>

Upvotes: 0

Views: 2367

Answers (2)

Scott Phat
Scott Phat

Reputation: 71

I've investigated and found some things that can cause this issue. These are:

  1. Make sure that '$routeprovider' should be changed to the right name '$routeProvider'.
  2. Make sure that the 'demoModule' module is added to your application.

Let everything more clearly, I've already created a sample quite same as your application. Please refer here for details.

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

Hope this will help you!! and please let me know if any problem

Upvotes: 1

Alex Choroshin
Alex Choroshin

Reputation: 6187

as Anthony Chu said, your have naming error, need to change from $routeprovider to $routeProvider

Example:

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

Live example: http://jsfiddle.net/choroshin/6dsr6/

Upvotes: 1

Related Questions