A service is a reusable singleton object which is used to organize and share code across your app. A service can be injected into controllers, filters, directives. AngularJS offers several built-in services (like $http, $provide, $resource, $window, $parse) which always start with $ sign.
Methods to create a Service
Service
Factory
Provider
Value
Constant
Factory
A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.
Syntax
app.factory('serviceName',function(){ return serviceObj;})
Creating service using factory method
<script>
//creating module
var app = angular.module('app', []);
//define a factory using factory() function
app.factory('MyFactory', function () {
var serviceObj = {};
serviceObj.function1 = function () {
//TO DO:
};
serviceObj.function2 = function () {
//TO DO:
};
return serviceObj;
});
</script>
When to use
It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.
Service
A service is a constructor function which creates the object using new keyword. You can add properties and functions to a service object by using this keyword. Unlike factory, it doesn’t return anything.
Syntax
app.service('serviceName',function(){})
Creating service using service method
<script>
//creating module
var app = angular.module('app', []);
//define a service using service() function
app.service('MyService', function () {
this.function1 = function () {
//TO DO:
};
this.function2 = function () {
//TO DO:
};
});
</script>
When to use
It is a singleton object. Use it when you need to share a single object across the application. For example, authenticated user details.
Provider
A provider is used to create a configurable service object. It returns value by using $get() function.
Syntax
//creating a service
app.provider('serviceName',function(){});
//configuring the service
app.config(function(serviceNameProvider){});
Creating service using provider method
<script>
//define a provider using provider() function
app.provider('configurableService', function () {
var name = '';
this.setName = function (newName) {
name = newName;
};
this.$get = function () {
return name;
};
});
//configuring provider using config() function
app.config(function (configurableService) {
configurableService.setName('www.dotnet-tricks.com');
});
</script>
When to use
When you need to provide module-wise configuration for your service object before making it available.
Value
A value can be a number, string, date-time, array or object. You can also register a function as a value. Values are typically used as configuration which is injected into factories, services or controllers.
<script>
//define module
var app = angular.module('app', []);
//define value
app.value("numberValue", 100);
app.value("stringValue", "dotnet-tricks.com");
app.value("objectValue", { name: "dotnet-tricks.com", totalUsers: 120000 });
</script>
Constant
A constant is like as value. The difference between a value and a constant service is that constant service can be injected into a module configuration function i.e. config() but value service cannot be.
<script>
//define module
var app = angular.module('app', []);
//define constant
app.constant("mynumberValue", 200);
app.constant("mystringValue", "webgeekschool.com");
//module configuration function
app.config(function (mynumberValue) { //here value objects can't be injected
console.log("Before:" + mynumberValue);
mynumberValue = "New Angular Constant Service";
console.log("After:" + mynumberValue);
});
</script>
No comments:
Post a Comment