Error: [$injector:modulerr] Failed to instantiate module phonecatApp #216

I try running the index.html at step number 7. It is just showing blank html page. And when i go to the debugger it says the above error

Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
[$injector:modulerr] Failed to instantiate module ngRoute due to:
[$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

This sounds like you do not have ngRoute loaded.
Have you:

added it to bower.json// 原因之一，就是你没有add一个bower.json把angular.js文件版本加载进去
run npm install (to trigger bower install)//安装npm
added as a script tag it to the index.html//原因之二，增加一个script标签在index.html页面中。

I am using Apache tomcat server to run this tutorial. I loaded the ngRoute from the CDN //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js Its still showing the same error. Is there any other way of loading ngRoute in Apache tomcat

You can totally load it from the CDN. I guess you are not using the actual URL you gave... but replacing the X.Y.Z with the real version number?
Can you check that the file is downloading correctly?

i am loading the file from the local disk and now it says
TypeError: angular is undefined

Perhaps you could share your code?

…

index.html:

//<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">//<html ng-app="phonecatApp">//<head>    //<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">    //<title>Phone Gallery</title>    //<script src="js/angular-route.js"></script>    //<script src="js/angular.js"></script>    //<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">    //<script src="js/app.js"></script>    //<script src="js/controllers.js"></script>    //<script src="css/app.css"></script>//</head>//<body>    //<div ng-view>    //</div>//</body>//</html> */

controllers.js:

'use strict';/* Controllers */var phonecatControllers = angular.module('phonecatControllers', []);phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',         function($scope, $http) {            $http.get('phones/phones.json').success(function(data) {            $scope.phones = data;         });         $scope.orderProp = 'age';    }]);phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',         function($scope, $routeParams) {            $scope.phoneId = $routeParams.phoneId;        }]);

app.js:

'use strict';/* App Module */var phonecatApp = angular.module('phonecatApp', [    'phonecatControllers',    'ngRoute']);phonecatApp.config(['$routeProvider',    function($routeProvider) {            $routeProvider.                when('/phones', {                    templateUrl: 'phone-list.html',                    controller: 'PhoneListCtrl'                }).                when('/phones/:phoneId', {                    templateUrl: 'phone-detail.html',                    controller: 'PhoneDetailCtrl'                }).                    otherwise({                    redirectTo: 'phones'                });    }]);

phone-detail.html:

TBD: detail view for <span>{{phoneId}}</span>

phone-list.html:

<div class="container-fluid">    <div class="row">        <div class="col-md-2">        <!--Sidebar content-->            Search: <input ng-model="query">            Sort by:            <select ng-model="orderProp">            <option value="name">Alphabetical</option>            <option value="age">Newest</option>            </select>        </div>    <div class="col-md-10">    <!--Body content-->            <ul class="phones">                <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">                    <!-- <a href="/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>                    <a href="/phones/{{phone.id}}">{{phone.name}}</a> -->                    <p>{{phone.snippet}}</p>                </li>            </ul>        </div>    </div></div>

The rest of the files(angular.js,angular-route.js,phones.json) are same as in angular-phonecat and are at the locations as mentioned in the code.
Thanks a lot for your time. Have a happy weekend.

OK, so you need to load angular-route.js after angular.js//这句话是重点，就是说，你应该加载angular-route.js放在angular.js之后，当angular.js加载之后才能使用其他，因为angular.js是核心。

Thank You,Its working now :)

…

I had the same problem as mr-sachinkalekar, struggled with it for days, and confounded my code school instructor and teacher assistant with it. Mr petebacondarwin's advice fixed the problem, which was so simple to resolve with proper module installation and configuration.

petebacondarwin closed this on 29 Jun 2015