AngularJS, dependency injection failure,
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<div ng-app="app"> <a href="#/page1">Page1</a>
<a href="#/page2">Page2</a>
<a href="#/page3">Page3</a>
<a href="#/page4">Page4</a>
<div ng-view></div>
<script type="text/ng-template" id="page1.html">
<div>Typo error</div>
</script>
<script type="text/ng-template" id="page2.html">
<div> Parameter reversed </div>
</script>
<script type="text/ng-template" id="page3.html">
<div> Incorrect no of parameters. </div>
</script>
<script type="text/ng-template" id="page4.html">
<div ng-controller='Page4Controller'> Route Resolve Error </div>
</script>
</div>
JavaScript
var app = angular.module("app", ['ngRoute', 'controllers'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Controller'
});
$routeProvider.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Controller'
});
$routeProvider.when('/page3', {
templateUrl: 'page3.html',
controller: 'Page3Controller'
});
$routeProvider.when('/page4', {
templateUrl: 'page4.html',
resolve: {
data: function () {
return "Some data"
}
}
});
}]);
angular.module('controllers', [])
.controller('Page1Controller', ['$scope', function ($scope) {
console.log($scope);
}])
.controller('Page2Controller', ['$scope', '$route', function ($route, $scope) {
console.log($scope);
console.log($route);
}])
.controller('Page3Controller', ['$scope', '$route', function ($scope, $route, $routeParams) {
console.log($scope);
console.log($route);
console.log($routeParams);
}])
.controller('Page4Controller', ['$scope', 'data', function ($scope, data) {
console.log(data)
}]);