AngularJS provides a simple and concise way to associate routes with controllers and templates using a $routeProvider object. While recently updating an application to the latest release (1.2 RC1 at the current time) I realized that $routeProvider isn’t available in the standard angular.js script any longer.
After reading through the change log I realized that routing is now a separate module (a great move I think) as well as animation and a few others. As a result, standard module definitions and config code like the following won’t work any longer if you’re moving to the 1.2 (or future) release:
var app = angular.module('customersApp', []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'customersController',
templateUrl: '/app/views/customers.html'
});
});
How do you fix it?
Simply add angular-route.js in addition to angular.js to your page (grab a version of angular-route.js here – keep in mind it’s currently a release candidate version which will be updated) and change the module definition to look like the following:
var app = angular.module('customersApp', ['ngRoute']);
If you’re using animations you’ll need angular-animation.js and also need to reference the appropriate module:
var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);
Your Code can be as follows:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/controllerone', {
controller: 'friendDetails',
templateUrl: 'controller3.html'
}, {
controller: 'friendsName',
templateUrl: 'controller3.html'
}
)
.when('/controllerTwo', {
controller: 'simpleControoller',
templateUrl: 'views.html'
})
.when('/controllerThree', {
controller: 'simpleControoller',
templateUrl: 'view2.html'
})
.otherwise({
redirectTo: '/'
});
});