index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
list.html
<ul class="artistlist">
<li class="artist cf" ng-repeat="item in artists | filter:artistFilter | orderBy:artistOrder:direction">
<img ng-src="images/{{item.shortname}}_tn.jpg" alt="{{item.name}}">
<div class="info">
<h2>{{item.name|uppercase}}</h2>
<h3>{{item.reknown}}</h3>
</div>
</li>
</ul>
app.js
var myApp = angular.module('myApp',['ngRoute','artistControllers']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).otherwise({
redirectTo: '/list'
});
}]);
controllers.js
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name'
});
}]);
full error
Error: [$injector:unpr] http://errors.angularjs.org/1.2.9/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
at Error (native)
at http://localhost/angular/lib/angular.min.js:6:449
at http://localhost/angular/lib/angular.min.js:32:125
at Object.c [as get] (http://localhost/angular/lib/angular.min.js:30:200)
at http://localhost/angular/lib/angular.min.js:32:193
at c (http://localhost/angular/lib/angular.min.js:30:200)
at Object.d [as invoke] (http://localhost/angular/lib/angular.min.js:30:417)
at http://localhost/angular/lib/angular.min.js:32:211
at c (http://localhost/angular/lib/angular.min.js:30:200)
at Object.d [as invoke] (http://localhost/angular/lib/angular.min.js:30:417)