javascript tutorial - [Solved-5 Solutions] Service VS provide VS factory - javascript - java script - javascript array
Problem:
What is the differences between a Service, Provider and Factory in AngularJS ?
Solution 1:
" Hello world " example with factory / service / provider:
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>
click below button to copy the code. By JavaScript tutorial team
Solution 2:
- This is very confusing part for newbie and WE have tried to clarify it in easy words
- AngularJS Service: is used for sharing utility functions with the service reference in the controller. Service is singleton in nature so for one service only one instance is created in the browser and the same reference is used throughout the page.
- In the service, we create function names as property with this object.
- AngularJS Factory: the purpose of Factory is also same as Service however in this case we create a new object and add functions as properties of this object and at the end we return this object.
- AngularJS Provider: the purpose of this is again same however Provider gives the output of it's $get function.
- Defining and using Service, Factory and Provider are explained at
Solution 3:
Visibility of injectables is different for providers than it is for services and factories. If us declare an AngularJS "constant" (for example, myApp.constant('a', 'Robert');), uscan inject it into services, factories, and providers.
But if usdeclare an AngularJS "value" (for example., myApp.value('b', {name: 'Jones'});), uscan inject it into services and factories, but NOT into the provider-creating function. Us can, however, inject it into the $get function that us define for your provider. This is mentioned in the AngularJS documentation, but it's easy to miss. Us can find it on the %provide page in the sections on the value and constant methods.
<div ng-app="MyAppName">
<div ng-controller="MyCtrl">
<p>from Service: {{servGreet}}</p>
<p>from Provider: {{provGreet}}</p>
</div>
</div>
<script>
var myApp = angular.module('MyAppName', []);
myApp.constant('a', 'Robert');
myApp.value('b', {name: 'Jones'});
myApp.service('greetService', function(a,b) {
this.greeter = 'Hwethere, ' + a + ' ' + b.name;
});
myApp.provider('greetProvider', function(a) {
this.firstName = a;
this.$get = function(b) {
this.lastName = b.name;
this.fullName = this.firstName + ' ' + this.lastName;
return this;
};
});
function MyCtrl($scope, greetService, greetProvider) {
$scope.servGreet = greetService.greeter;
$scope.provGreet = greetProvider.fullName;
}
</script>click below button to copy the code. By JavaScript tutorial team
Solution 4:
App.service('service', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
});
Usage:
app.controller('ctrl', function($scope, service) {
$scope.name = service.getName();
});click below button to copy the code. By JavaScript tutorial team
Solution 5:
app.provider('provider', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
return {
name: name
}
}
})
Usage (as an injectable in a controller)
app.controller('ctrl', function($scope, provider) {
$scope.name = provider.name;
});
Usage (configuring the provider before $get is called to create the injectable)
app.config(function(providerProvider) {
providerProvider.setName('John');
});