Error when inject ngRoute

Question

I use angular 1.5.3 but when I inject "ngRoute" I got error like this:

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=scotchApp&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.3%2Fangular.min.js%3A20%3A463)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4547q @ angular.js:321g @ angular.js:4508eb @ angular.js:4430c @ angular.js:1710yc @ angular.js:1731de @ angular.js:1616(anonymous function) @ angular.js:30709b @ angular.js:3127Pf @ angular.js:3417Of.d @ angular.js:3405

Here is code

    var scotchApp = angular.module('scotchApp', ['ngRoute']);
    scotchApp.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'home.html',
                controller  : 'mainController'
            })
            .when('/about', {
                templateUrl : 'about.html',
                controller  : 'aboutController'
            })
            .when('/contact', {
                templateUrl : 'contact.html',
                controller  : 'contactController'
            });
    });
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
    });
    scotchApp.controller('aboutController', function($scope) {
        $scope.message = 'Look! I am an about page.';
    });
    scotchApp.controller('contactController', function($scope) {
        $scope.message = 'Contact us! JK. This is just a demo.';
    });
</script>
</head>
<body ng-controller="mainController">
    <div id="main">
        <div ng-view></div>
    </div>
</body>
</html>

Please help me solve it

Thanks

Have you added angular-route.js to your index.html file and also in the correct order ? — M22an
also using an unminified version of angular.js helps in debugging — jithin

Seth Flowers Seth Flowers · Accepted Answer · 2016-04-07T15:31:04

Module ngRoute is not in the main angular script. It is in angular-route.js. Make sure you include this script in your page.

<script src="angular.js">
<script src="angular-route.js">

According to the docs for 1.5.3:

You can download this file from the following places:

Google CDN e.g.
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

Bower e.g. bower install [email protected]

code.angularjs.org e.g. "//code.angularjs.org/X.Y.Z/angular-route.js"

where X.Y.Z is the AngularJS version you are running.

See the docs for ngRoute for details.

Error when inject ngRoute

1 Answers