Question

I am using angularjs routing, but getting below error...

    <title>Angular js</title>

</head>
<body><div data-ng-controller="SimpleController">
    <div data-ng-view=""></div>
    NAme:<input type="text" data-ng-model="name" />{{name}}
    <br />
    <ul>
        <li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
    </ul>
        <script>
                var demoapp = angular.module('demoapp', ['ngRoute']);
                demoapp.config(function($routeprovider){
                    $routeprovider
                    .when('/',{
                    controller:'SimpleController',
                    templateUrl:'view1.html'
                })
                  .when('/partial2',{
                controller:'SimpleController',
                templateUrl:'view2.html'
                })
                  .otherwise({redirectTo:'/'});
                });
            demoapp.controller('SimpleController',
            function ($scope) {
                $scope.customers = [{ name: 'aman', city: 'boom' },
                                     { name: 'ajay', city: 'reem dee' },
                                     { name: 'hood', city: 'meen' }];
            });
        </script>
    </div>
</body>
</html>

error on console

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.12/$injector/modulerr?p0=demoapp&p1=Error%3…0Yb%20(http%3A%2F%2Flocalhost%3A4257%2Fscripts%2Fangular.min.js%3A32%3A232)
Was it helpful?

Solution

  1. Make sure to include your angular-route.js after angular.js

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
    
  2. Replace $routeprovider to $routeProvider. By using service as dependency, it can't inject with wrong parameter name.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top