Understanding Providers in AngularJS

In our previous Article, we discussed about service and Factory. Here is the complete details about Providers.

Provider allows us to create and inject a service into configuration phase of our application. For example, If we want to set API key to access the application, we can set the API key via provider and pass the provider to the application while its in config phase.

 

Creating Provider service using $provider service in module.config

Module.config(function ($provide) {

$provide.provider(‘globalSetting, function() {

this.$get = function {

var appname = “My 1^st Application”;

return {

appName: appname

};

}

})

});

 

Explanation:

1. Inject $provide built-in service in config method.
2. Create a provider service by using $provide.
3. The Provider service function has 2 parameters
   1. The provider service Name.
   2. Function
4. The provider must have this.$get function
5. Return the object literal from this function

 

Now the “globalSetting” provider is available for all other components. Because it has some properties and methods in a object.

 

How to use Provider in Controller ?

app.controller(“myCtrl”, function ($scope, globalsetting) {

$scope.name = globalsetting.appName;

});

 

Now we can use the “appName” in our View,

<div ng-controller=”myCtrl”>

{{name}} // it will bind  My 1^st Application

</div>

 

Create a Provider service by using module.

Module.provider(‘globalsetting’, function () {

var appname = “LAWYER APP”;

this.setAppName = function (value) {

appname = value;

}

this.$get = function () {

return {

appName: appname

};

}

});

 

Explanation:

1.Creating provider function through our app Module.

2. It has 2 parameter

i. Provider Name

ii. Function

3. By default we set appname = “LAWYER APP”

4. Here we set a function for change the app via function parameter.

If someone calls this function then the app name will be replace.

5. Return the object literal from this.$get function.

So we set a provider function here.

 

How to Inject Custom Provider into .config method and controller ?

 

Inject provider into .config Method

When we going to inject our custom provider into .config method, we must add “Provider” in suffix of our Custom Provider Name.

Our custom provider name is ‘globalsetting’ so we should inject as ‘globalsettingProvider’

 

Example:

Module.config(function (globalsettingProvider) {

globalsettingProvider.setAppName(“Great App”);

});

Now the appname Replaced to “Great App” . We can retrieve the appname into any component.

 

Inject provider into Controller

Module.controller(‘myCtrl’, function($scope, globalsetting) {

$scope.name = globalsetting.appName;

});

To Know more about the complete collection of AngularJS Topic, Please visit Complete Updated Angularjs Topics