Angular JS - Uncaught Error: [$injector:modulerr].
Question
Can you help me get rid of error "Uncaught Error: [$injector:modulerr]." I'm sick and tired of debugging Angularjs applications, it's very difficult to catch errors, i'm used to Java, and there is a simple to catch errors because i have a debugger. But in case AngularJS, it's impossible. Thanks a lot!
index.html
<!doctype html>
<html ng-app="customersApp">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="app/controllers/app.js"></script>
<script src="app/controllers/customersController.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
customers.html
<div class="row">
<h2>Customers</h2>
Filter: <input type="text" ng-model="customerFilter.name">
<br><br>
<table class="table table-bordered">
<tr class="active">
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
<td>{{cust.name}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date: 'yyyy-MM-dd'}}</td>
</tr>
</table>
</div>
app.js
(function(){
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwice({redirectTo: '/'});
});
})();
customersController.js
(function(){
var CustomersController = function($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{joined: '2012-12-02', name: 'John', city: 'Luhansh', orderTotal: 9.99},
{joined: '2012-09-14', name: 'Sergey', city: 'Kyiv', orderTotal: 5.799},
{joined: '2015-11-03', name: 'Denis', city: 'Warsaw', orderTotal: 1.35}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
}
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
})();
1 answers
solution1
2 ACCPTED 2015-05-02 21:35:31
Your problem is you had typo in your app.js
.otherwice({redirectTo: '/'}); should be .otherwise({redirectTo: '/'});
(function(){
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwise({redirectTo: '/'});
});
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.