Provider works in the same way as the service or factory works. It has an additional functionality that could be configured during the module configuration phase.
We can configure a provider according to our requirement. We applied this configuration when we want that our configuration must be set, before the application start.
The provider usually defined with the implementation of $get method and this $get is a factory function. In fact, when you create a factory function, an empty provider with $get function is set to your factory function automatically.
Watch the live demo or download code from the link given below.
Use Provider:
A provider can be used in the application as follows:
(i) First, we define a provider.
(ii) Then, we configure it.
Syntax for defining provider
angular.module('module_name').provider('date', function () {
return{
$get: function () {
return {
function_name: function ()
{
}
}
}
}
});Syntax to configure application with provider
app.config(function (<providername>provider) {
// Code to configure application which will get run before the provider object instantiated.
});Create an application
Now, we are going to configure provider in an application which will show a message like Good morning, Good afternoon, Good evening or Good night according to current time.
First, we have to create a module
var app = angular.module('mainApp', []);Defining a provider:
app.provider('date', function () {
return{
// This setgreet function can not be called by injector
setgreet: function (value) {
greet = value;
},
// Only value written within the $get function returned by injector
$get: function () {
return {
showDate: function ()
{
var format = 'M/d/yy h:mm:ss a';
var date = new Date();
return greet + '!! The Current Time is ' + date.getHours() + ':' + date.getMinutes() + 'hrs';
},
setDate: function ()
{
var date = new Date();
return date.getHours();
}
}
}
}
});Note: In above-mentioned code, we have defined a function name setgreet that will not be called by injector. This function can be called from the config function by passing it’s provider name.
Configuring a provider:
Here, we are configuring our application by using provider that we have defined above:
app.config(function (dateProvider) {
// Setting the value of setgreet function of dateprovider
var t = dateProvider.$get().setDate();
if (t > 0 && t < 12) {
dateProvider.setgreet("Good morning");
}
else if (t > 11 && t < 17) {
dateProvider.setgreet("Good afternoon");
}
else if (t > 16 && t < 20) {
dateProvider.setgreet("Good evening");
}
else {
dateProvider.setgreet("Good night");
}
});Note: The config function configure provider’s setgreet function by passing the value to the setgreet function to initialize it. dateProvider has passed as an argument to config function for the date provider.
Controllers:
app controller:
We also need a controller by which we will call the function of date provider:
app.controller('app', function ($scope, date) {
$scope.success = true;
$scope.call = function () {
// Calling show date function of date provider
$scope.greetmessage = date.showDate();
$scope.success = false;
}
});Note: When the call function called on a button click, it will call the showDate function of date provider.
tm controller:
This controller will generate a dynamic clock in the main page.
app.controller('tm', function ($scope, $timeout) {
$scope.clock = "loading clock..."; // initialise the time variable
$scope.Interval = 100 //ms
Interval1 = 1 //ms
var tick = function () {
$scope.clock = Date.now() // get the current time
$timeout(tick, $scope.Interval); // reset the timer
}
// from here we are calling tick function after 100ms
$timeout(tick, $scope.Interval1);
});HTML page:index.html
<html>
<head>
<title>AngularJS Provider</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="mainApp">
<h2 class="text-center page-header" style="border:none;">AngularJS Provider Demo</h2>
<div ng-controller="app">
<div ng-controller="tm">
<h1 class="text-center">{{ clock | date:'medium'}}</h1>
</div>
<button class="btn btn-large btn-block btn btn-warning" ng-click="call()">Click Here To Check Status And Message Of Current Time</button>
<div class="alert alert-success" ng-hide="success" style="margin-top:10px;"><b>{{greetmessage}}</b></div>
<div class="alert alert-warning" style="margin-top:10px;">
<b class="text-danger">Note:-</b>
<ul>
<li>
<p>If the time lies between <b>0</b> to <b>12 hours</b>, the message will be <b>Good morning.</b></p>
</li>
<li>
<p>If the time lies between <b>13</b> to <b>17 hours</b>, the message will be <b>Good afternoon.</b></p>
</li>
<li>
<p>If the time lies between <b>18</b> to <b>20 hours</b>, the message will be <b>Good evening.</b></p>
</li>
<li>
<p>If the time lies between <b>20</b> to <b>24 hours</b>, the message will be <b>Good night.</b></p>
</li>
</div>
</div>
</body>
</html>Note: Here in above code app.js is a file which contains all javascript code of controller, provider and module.
Tips: This blog contains the zip file of complete code. Just download it and use it, it will makes you more clear about the working of providers in AngularJS.
Conclusion
I hope that at this point you must be feeling yourself comfortable with provider in AngularJS. Please comment for any query. Keep visiting our website for more intersting stuff 🙂
Read more related updates here –
