Please enable Javascript to correctly display the contents on Dot Net Tricks!

Services

Posted On : 10 Feb 2015
Updated On : 02 May 2015
Total Views : 2735

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

  1. Service

  2. Factory

  3. Provider

  4. Value

  5. 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>
What do you think?

I hope you will enjoy the AngularJS services while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.