Multiple configuration providers with 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('))');
}
);

Be precise. "That doesn't seem to work" doesn't help us identifying what the problem is. What happens precisely? Do you have any error? What do you expect to happen and what happens instead? — JB Nizet
– JB Nizet, Commented Jul 9, 2014 at 15:29

Paul Sweatte · Accepted Answer · 2015-08-27 21:11:41Z

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

edited Aug 27, 2015 at 21:11

answered Dec 24, 2014 at 8:49

Paul Sweatte

24.7k7 gold badges131 silver badges270 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corie Slate Over a year ago

To inject it should be foo.$inject = ['$routeProvider', '$interpolateProvider'];

Collectives™ on Stack Overflow

Multiple configuration providers with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related