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!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|