AngularJS Services ( built-in and custom )

As we learned in angular introduction, services are stateless and singleton objects that provide functionality for a web application. For example, $http is a core service for making HTTP calls to web servers. In simple terms, you can assume angular services as a chunk of reusable code that performs one or more related tasks (e.g. Utility classes with static methods in Java). In AngularJS, there are several built-in services – and you can create your own custom services as well.

Table of Contents

Built-in Services
Creating Custom Services
How to use Services

Built-in Angular Services

As mentioned earlier, angular provides several built-in services which can be used on the fly. In runtime, these services are automatically registered with the dependency injector, so you can easily incorporate them into your angular applications by using dependency injection. e.g. to use $http service in a controller, inject the service as below:

module.controller('DemoController', function( $http ){
    //...
});

Let’s list down angular built-in services.

Reference: https://docs.angularjs.org/api/ng/service

Creating Custom Angular Services

Placing application’s business logic and common operations in a single place, is always a good design. This improves code re-usability and avoid code duplication. You should put all such logic in custom angular services. This makes code modular and more maintainable.

Further, your code becomes more testable. Remember, angular provides first class support for unit testing. Thus we can quickly write tests for these services and avoid many possible defects.

There are mainly two ways to declare angularjs services. Let’s understand both ways:

Using – module.service( ‘serviceName’, function(){} )

When you create a service using module.service(), an instance of the function() passed as second parameter becomes the service object that AngularJS registers and injects later to other services / controllers when asked for.

The syntax for declaring methods in custom service object using module.service() is :

module.service('DemoService', function() {
	//"this" will be used as service instance
    this.firstMethod = function() {
        //..
    }
 
    this.someOtherMethod = function() {
        //..
    }
});

Using – module.factory( ‘factoryName’, function(){} )

When you create a service using module.factory(), return value of function() passed as second parameter becomes the service object that AngularJS registers and injects later to other services / controllers when asked for.

The syntax for declaring methods in custom service object using module.factory() is :

module.factory('DemoService', function() {
	//"factory" will be used as service instance
	var factory = {}; 

    factory.firstMethod = function() {
        //..
    }
 
    factory.someOtherMethod = function() {
        //..
    }

    return factory;
});

How to use AngularJS Services

This example demonstrate the use of a custom service which has logic for displaying current time in different timezones. Let’s first create the custom service.

var app = angular.module('myApp', []);

//Create a function
function TimeObj() {
    var cities = {
        'Los Angeles': -8,
        'New York': -5,
        'London': 0
    };
    this.getTZDate = function(city) {
        var localDate = new Date();
        var utcTime = localDate.getTime() + localDate.getTimezoneOffset() * 60 * 1000;
        return new Date(utcTime + (60 * 60 * 1000 * cities[city]));
    };
    this.getCities = function() {
        var cList = [];
        for (var key in cities) {
            cList.push(key);
        }
        return cList;
    };
}

//Register as service 'TimeService'
app.service('TimeService', [TimeObj]);

Now to use this service, use controllers like below:

app.controller('LAController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("Los Angeles").toLocaleTimeString();
    }
]);

app.controller('NYController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("New York").toLocaleTimeString();
    }
]);

app.controller('LondonController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("London").toLocaleTimeString();
    }
]);

Now you can use controllers in your webpage to dispaly different times.

<html ng-app="myApp">
	<head>
		<title>AngularJS Custom Time Service</title>
		<style>
			span {
				color: lightgreen; background-color: black;
				border: 3px ridge; padding: 2px;
				font: 14px/18px arial, serif; 
			}
		</style>
	</head>
	<body>
		<h2>Custom Time Service:</h2><hr>

		<div ng-controller="LAController">
		Los Angeles Time:
		<span>{{myTime}}</span>
		</div><hr>

		<div ng-controller="NYController">
		New York Time:
		<span>{{myTime}}</span>
		</div><hr>

		<div ng-controller="LondonController">
		London Time:
		<span>{{myTime}}</span>
		</div>

	</body>
</html>

The output will look like this:

See the Pen Angular Service Demo – Timezone Example by Lokesh (@howtodoinjava) on CodePen.

That’s all for this introductory AngularJS Services tutorial. Drop me your questions in comments section.

Happy Learning !!

Further Reading:

AngularJS Tutorial – HelloWorld Example AngularJS – jQuery Lite (jqLite) Tutorial AngularJS spring mvc rest example