Today marks the beginning of my journey with AngularJS, and I'm facing a roadblock in the "routing" aspect. I've successfully created a controller and a view (refer below), but upon attempting to run it on my local server, an error pops up:
Uncaught Error: [$injector:modulerr] Failed to instantiate module AMail due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
If the ngRoute service is inherently part of Angular, why does the error indicate that it's unknown?
controller.js
var aMailServices = angular.module('AMail', []);
// Our URL, template, and controller mappings configuration
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl: 'list.html'
}).
when('/view/:id', {
controller: DetailController,
templateUrl: 'detail.html'
}).
otherwise({
redirectTo: '/'
});
}
// Setting up our route for the AMail service to recognize it
aMailServices.config(emailRouteConfig);
messages = [{
id: 0,
sender: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa5aaaea18fbca0a2aaaca0a2bfaea1b6e1aca0a2">[email protected]</a>',
subject: 'Hi there, old friend',
date: 'Dec 7, 2013 12:32:00',
recipients: ['<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f283d2a280f3c20222a2c20223f2e2136612c2022">[email protected]</a>'],
message: 'Hey'
}];
// Exposing our messages for the list template
function ListController($scope) {
$scope.messages = messages;
}
// Extracting the message id from the route (parsed from the URL) and using it to
// locate the appropriate message object.
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
}
index.html
<html ng-app="AMail">
<head>
</head>
<body>
<h1>A-Mail</h1>
<div ng-view></div>
<script src="angular.js"></script>
<script src="controller.js"></script>
</body>
</html>