Multiple configuration providers with AngularJS - angularjs

Question

How can I specify multiple providers to AngularJS?
Right now I'm doing it in 2 places, but this doesn't seem to work:
var myApp = angular.module("myApp", ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('((').endSymbol('))');
}
);

Answer 1

Use a single function reference:
myApp.config(foo)
which injects each provider:
function foo($routeProvider, $interpolateProvider)
{
/* interpolateProvider configuration */
$interpolateProvider.startSymbol('((').endSymbol('))');
/* routeProvider configuration */
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
}
/* module creation */
var myApp = angular.module("myApp",[]);
/* provider binding */
myApp.config(foo);
/* Manual bootstrapping */
angular.bootstrap(document, ['myApp']);
/* $inject Property Annotation */
foo.$inject['$routeProvider', '$interpolateProvider'];
Providers are essentially objects that are used to create and configure instances of AngularJS artefacts. Hence, in order to register a lazy controller, you would use the $controllerProvider. Similarly, To register a directive, you would use the $compileProvider, to register filters you would use the $filterProvider, and to register other services, you would use the $provide service.
References
AngularJS: Configuration Blocks
AngularJS: Inject Property Annotation