Hello everyone, today I am going to share the very
interesting when we play with services, factory and provider in angular.
I notice an interesting point when I playing
with providers.
Here highlight the visibility of injectable. The
services, factory and provider are injectable but the injectable is different for provider than
from services and factory.
I am going to a scenario, if you declare a
constant(i.e. like angular.constant('baseUrl', 'http://localhost:9669/')), here you can inject into services,
factories and providers.
But when you declare a value (i.e. like angular.value('user', {id: 'uid9669'})),
here you can inject into services and factories but not provider. The provider
creating a $get function and then you can inject it.
live demo click on link http://embed.plnkr.co/0EANoZ/preview
live demo click on link http://embed.plnkr.co/0EANoZ/preview
For example over the injecting as given
below.
AngularJs code sample
var app =
angular.module('userApp',
[]);
app.constant('baseUrl', 'http://localhost:9669/');
app.value('user', {
Id: 'uid9669',
fname: 'anil',
lname: 'singh'
});
//This is services.
app.service('userService', function (baseUrl) {
this.url = 'Hi, this is base
url of you app, '
+ ' '
+ baseUrl;
});
//This is provider.
app.provider('userProvider', function (id, fname, lname)
{
this.Id = id;
this.$get = function (b) {
this.name = this.fname + ' ' + this.lname;
return this;
};
});
//This is contorller and call
to services and provider both.
app.controller("userCtrl", function ($scope,
userService, userProvider) {
$scope.MyBaseURL = userService.url;
$scope.userName =
userProvider.name;
});
Full Angular +HTML code as given below
<html>
<head>
<title>Services vs. Factory
vs. Provider</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app =
angular.module('userApp',
[]);
app.constant('baseUrl', 'http://localhost:9669/');
app.value('user', {
Id: 'uid9669',
fname: 'anil',
lname: 'singh'
});
//This is services.
app.service('userService', function (baseUrl) {
this.url = 'Hi, this is base
url of you app, '
+ ' '
+ baseUrl;
});
//This is provider.
app.provider('userProvider', function (id, fname, lname)
{
this.Id = id;
this.$get = function (b) {
this.name = this.fname + ' ' + this.lname;
return this;
};
});
//This is contorller and call
to services and provider both.
app.controller("userCtrl", function ($scope,
userService, userProvider) {
$scope.MyBaseURL = userService.url;
$scope.userName =
userProvider.name;
});
</script>
</head>
<body ng-app="userApp">
<div ng-controller="userCtrl">
<p>My App BaseURL is : {{MyBaseURL}}</p>
<p>My Provider is: {{userName}}</p>
</div>
</body>
</html>
The output go to link http://embed.plnkr.co/0EANoZ/preview
Thank you!