Atlante Avila Atlante Avila - 4 months ago 25
AngularJS Question

Uncaught Error: Angular even after loading ng-route

I'm getting this dreadful error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module usersApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$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.


Not sure what I'm doing wrong: app.js:

(function () {

var app = angular.module('usersApp',
['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {

var viewBase = '/';

$routeProvider
.when('/users', {
controller: 'MainController',
templateUrl: viewBase + 'users/users.html',
controllerAs: 'vm'
})
.when('/add', {
controller: 'OrdersController',
templateUrl: viewBase + 'add/orders.html'
})
.otherwise({ redirectTo: '/users' });

}]);


}());


index.html:

<html>
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<script src="app.js"></script>
</head>
<body ng-app="usersApp" ng-controller="MainCtrl">
<h1>uSers</h1>
<div ng-repeat="user in users" ng-click="getUsers()" style="background: black; padding: 5px; min-width: 25px; color: white;">
{{user}}
</div>
</body>
</html>


Thanks for any help you can provide!

Answer

You forgot to include angular-route. in addition, no need to load 2 different versions of angular. change your main html to this:

<html>
  <head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>

    <script src="app.js"></script>
  </head>
  <body ng-app="usersApp" ng-controller="MainCtrl">
  <h1>uSers</h1>
    <div ng-repeat="user in users" ng-click="getUsers()" style="background: black; padding: 5px; min-width: 25px; color: white;">
    {{user}}
    </div>
  </body>
</html>