What is the difference between provider and instances in Angular?

Question

I am new to Angular. I am studying config block and run block of modules.

Please have a look at below code:

angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
});

As you can see in the config block it is written: "You can only inject Providers (not instances)".

What does this mean? Could anyone please explain what is the the difference between provider and instances?

score 4 · Accepted Answer · answered Aug 10 '16 at 04:28

Actually your question is good. To make it very simple, we define services in Angular JS to achieve our features. Provider is one of the way to configure how that services should work. There are some more concepts namely Values, Constants, Factory, Service and Decorator in Angular JS, which can help us intercept the services in different manners. Please check the below link.

https://docs.angularjs.org/guide/providers

Coming back to the Providers, they are used to define application wide configurations that needs to be done even before application starts. Since config blocks are executed before the Angular JS modules are loaded we configure providers under them. Since the modules would not have been loaded by that time you can't access services inside a config block.

Run blocks are executed once all the modules are loaded by the $injector. Once you enter a run block, you are not allowed to configure your provider any more since your services will be loaded anyway. That's the reason you can't access providers inside a run block.

Let's see an example. I have designed my application to support both user and admin screens. But the features related to them are defined in their respective services. I want to load only the appropriate services when a user logs in. We achieve that using a provider as below.

Defining rolesProvider

myApp.provider("roles", function rolesProvider(){
var role;
this.setRole = function(value) {
role = value;
}

this.$get = function rolesFactory() {
if(role === "user") {
return new userRole();
} else {
return new adminRole();
}
}
});

Configuring rolesProvider as a user

myApp.config(["rolesProvider"], function(rulesProvider){
rulesProvider.setRole("user"); 
});

My application will be configured to run as a user rather than as an admin when the application kicks off.

Let me know if you need more explanations.

Thanks...It helped me to understand. – RajSharma Aug 14 '16 at 11:39 — RajSharma, Aug 14 '16 at 11:39

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Stolen from this post: AngularJS: Service vs provider vs factory - definitely worth the read for a better understanding the role of the different types of providers available in angular.

But what if we wanted to configure the Greeter class before the injection? Then we could write

For example:

provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
  salutation = s;
}

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) { //When injected into a controller or service, this is what will get called.
    return new Greeter(a);
  };
});

Then you can configure the above like so:

angular.module('abc', []).config(function(greeter2Provider) { //Provider injected
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) { //Accessing the actual service exposed by the provider.$get
  expect(greeter2.greet()).toEqual('Halo 123');
}

score 0 · Answer 3 · answered Feb 08 '17 at 20:35

Quick answer: Providers will create an instance. Until they do you can use them in the config() block. Very useful say for a data provider that you want to change the url endpoints to during startup.

But you can run some config code on the "Provider provider" section, before new Something() is run.

Service Service, Service Factory, and Service Value all are shortcuts of the Provider definition, but the hide the configuration part away from you and just straight to the instantiation of the object (using new Something()).

What is the difference between provider and instances in Angular?

3 Answers3