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']);

Check out the change log for additional details on changes to animations. Touch is also a separate module now.

I like the move to a more modular architecture since not all apps may need routing, animations, and some of the other stand-alone modules. It allows the framework to grow over time without the core script getting too big.

If you’re interested in keeping up-to-speed with all things related to AngularJS, subscribe to the AngularJS Magazine (a FlipBoard magazine that can be viewed through a browser or through the application).