Hello Friends
In this article, we will learn How to create AngularJS provider. How to use AngularJS provider ? How to inject AngularJS Services into Provider.
Every Web application builds with combination of ojects, which links and works together to achieve application goal. In AngularJS apps most of these objects are instantiated and wired together automatically by the injector service. It creates two types of objects.
1) Services are objects whose API is defined by the developer by creating the service.
2) Specialized Objects plays a role for a specific AngularJS framework API. These objects are one of controllers, directives, filters or animations.
The injector needs to know how to create these objects. You tell it by registering a "recipe" for creating your object with the injector.
There are of five recipe types.
1) Value
2) Factory
3) Service
4) Constant.
5) Provider
The most verbose, but also the most comprehensive one is a Provider.
AngularJS provider is a low level core recipe. all the other four recipe types are just syntactic sugar on top of it.
The $get() method of the provider is registered as a factory. Providers are available to config blocks and other providers. Once application configuration phase is completed, access to providers is prevented. After the configuration phase, the $get() method of the providers are executed and they are available as factories.
Services, Factories and values are wrapped inside provider with $get() method returning the actual logic implemented inside the provider.
We can use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts.
To understand and use of provider recipe, we will create one service naming $service1 provider naming $service2 and inject $service1 in $service2 provider.
Initialize provider in config function of AngularJS API.
Use both services in controller recipe as follows.
Step 1 : Lets create $service1
var myApp = angular.module('myApp', []);
myApp.service('$service1', function () {
this.Service1Method1 = function () {
console.log('Service1 Method Invoked');
};
this.Service1Method2 = function (value) {
console.log('Service1 Method Invoked by '+value);
};
});
Step 2 : Create Provider $service2 and inject service1 init
myApp.provider('$service2', function () {
var service = 'service2';
this.registerService = function (value) {
service = value;
};
this.$get = ['$service1', function ($service1) {
var that = {};
that.Service2Method = function () {
console.log(service);
};
that.Service1MethodByService2 = function () {
$service1.Service1Method2('service2');
};
return that;
}];
});
Step 3 : Initialise provider in AngularJs config function.
myApp.config(['$service2Provider', function ($service2Provider) {
$service2Provider.registerService('changed service2');
}]);
Step 4 : Consuming service in controller.
myApp.controller('MyController', ['$service1', '$service2',
function ($service1, $service2) {
$service1.Service1Method1();
$service2.Service2Method();
$service2.Service1MethodByService2();
}]);
OUTPUT: Service1 Method Invoked changed service2 Service1 Method Invoked by service2
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.