Let's Angle To Angular JS: Provider in angular JS

Provider in angular JS is a function whose instance can provide service that which can be able to even configure.The services of the provider can be accessed throughout the application.The provider function can return object or primitives or can be as function.The providers in angular JS are nothing but a constructor function.By using the provider we can access the data in any controller whereever we required by just injecting the provider in controller function.A provider function must have a $get function,which makes statement as like provider is an object with a $get function.provider is the core layer for all the other singleton objects like services, factory, value and constant.

Configuration phase in angular JS page life cycle :
whenever we run our application, the angular component is going to be get bootstrapped into our application.At that stage it configures the providers initially and then look over the services and others.In simple The configureation of providers is nothing but the configuration phase in angular JS.At this phase we cant even access the services.

Look of custom service creation :
var app = angular.module('apptest', [])
app.provider('providername', function () {
this.$get = function() {
// return "My Value"; can be string, object or function
};
}
});

In the above syntax if we see this.$get is the method that which returns the data which can be in the form of string or like primitives or object or a function.
We can perform the configuration to a provider in config function if needed any manipulations.

Look over Example on provider with config function :
var myapp = angular.module('myapp', []);
var _globalKey;
myapp.provider('actions', function () {
this.$get = function () {
return {
getId: function () {
// we can set or edit the value of _globalKey but as provider this will be final place to set.
return _globalKey;
}
}
}
});

In the above code, the name of the provider is "actions" and to the second parameter was with the function that returns the $get value.The value of the provider can be set in within the provider constructor function or can be set in config function.

Look over config() which sets the provider value(here _globalKey):
myapp.config(function (actionsProvider) {
_globalKey='Id:12345 This was set in config()';
actionsProvider.getId = _globalKey;
console.log(actionsProvider.$get());
});

Appending Provider(actions as actionsProvider ) :
From the above code,the config function was having the parameterwith named "actionsProvider". I didnt mention anywhere that variable till now. But if you observe my name of provider in above snippet code it was like "actions" only.Here we need to append the "Provider" here "P" in upperword, to the name of our registered provider.
So, getting into the code, I assigned the data to the "_globalKey" following, I assigned actionsProvider.getId = _globalKey; and this value we can access or remodify if required in our provider function.

Controller Code Look :
myapp.controller('myctrl', function ($scope, actions) {
$scope.GetResult = function () {
$scope.loginId = 'User login ID is : ' + actions.getId();
}
});

Now, in the above code I just created the controller named "myctrl" and injected the provider named "actions" and created the function "GetResult()", within the function to the "loginId" scope I assigned the provider value.
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="button" value="Get Result" ng-click="GetResult()" /> <br />
<span ng-bind="loginId"></span><br />
</div>
</body>

In the above HTML code I just called the "GetResult()" on the button click, it invokes the function and then calls the provider value, where we used to retrive and displays in the span element.
OutPut Image :