Built-In And Custom AngularJS Services With Examples

This article will demonstrate built-in AngularJS Services as well as how you can create your own custom service in an AngularJS. This article begins with a brief introduction to AngularJS Services. Afterwards, it demonstrates built-in AngularJS Service with syntax and links to an example on Plunker Editor. Finally, the article discusses custom AngularJS Services.

AngularJS Services

AngularJS Services are re-usable components or the objects, which have the methods and the properties to perform some business logic and can be used throughout your Application. To use an AngularJS Service in controller, filter, Service and Directive; just add it as a dependency. Angular comes with some built-in Services but you can create your own custom Service as well.

Built-in AngularJS Service

AngularJS built-in services always start with a $ sign. Some of the commonly used built-in Services are shown below.

$http
$resource
$q
$anchorSrcoll
$cacheFactory
$locale
$timeout
$cookies
$routeProvider
$routeParams
$log

$http

This Service is used to communicate with the Servers over the network; i.e., you can send raw requests like getting and posting the data etc., and to recieve the resposne from the remote Server through this Service.

Syntax

var app=angular.module('app',[]);
app.controller('mycontroller',['$http',function($http){
//$http get method
$http({
method: 'GET',
url: '/someUrl'
//other properties
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
//$http get shortcut method
$http.get('/someUrl').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}]);

Plunker - AngularJS $http GET,POST,PUT,DELETE functions

$resource

$resource is used for the same purpose as $http Service but the key difference between them is that $resource is based on a RESTful architecture and is used to access Restful Web Services. For using $resource Service, you just need to add Angular-resource script file after AngularJS and dependency of ngResource into Angular module, as shown in the syntax given below.

Syntax

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>//angulrJS file
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-resource.js"></script>//ngresource file
<script src="your script file"></script>
var app=angular.module('app',['ngResource']);
app.controller('mycontroller',['$resource',function($resource){
//resource get method
$resource('/someURL').get().$promise.then(function(data){
//do some stuff
},function(response){
//do some stuff
});
}]);

Plunker: AngularJS $resource GET,POST,PUT,DELETE functions

$q

$q service is used to handle the promises and the deferred objects. Promises are the pending results of the asynchronous calls and deferred objects returns promises and the results of asychronous operation after its completion to the calling code.

How $q works

Step 1

The client sends asynchronous call to the Service.

Step 2

The Service receives the call and create a deferred object by using $q Service.

Step 3

The deferred object returns the promise to the client.

Step 4

The client uses this promise to write callback functions.

Step 5

The Service performs the work and return the status of the function, which is either successfully completed or rejected through deffered object to the client.

Step 6

The client executes success or an error callback function, which is based on the result return from the Service.

Syntax

var myApp = angular.module('myApp', []);
//service create deffered object and return promise
myApp.service('myService',['$q',function($q) {
//create a deffered object
var defferedObject = $q.defer();
//this method calls when work is being performed
defferedObject.notify('notification messages');
//this method calls when something goes wrong
//and errors send back to the client
defferedObject.reject('Error Message');
//this mehod calls when the require
//work has completed successfuly
//and results are returned to client
defferedObject.resolve(data);
//return promise to caller
return defferedObject.promise;
}]);
myApp.controller('myController',['myService',function(myService){
//code receive the promise
//and write callback functions
//these callback functions receive the result from the service
myFunction().then(successCallBack, errorCallBack, notificationCallBack);
function successCallBack(data) {
//do some stuff with data
}
function errorCallBack(error) {
//do some stuff
}
function notificationCallBack(notification) {
//do some stuff
}
}]);

Plunker- $q Service Example

$anchorScroll

$anchorScroll service is used to navigate or scroll within the page.

Syntax

var myApp=angular.module('myApp', [])
myApp.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);

Plunker-$anchorScroll Example

$cacheFactory

$cacheFactory Service is used to cache the data. This Service provides functions through which you can define the capacity of the data objects or the items to be cached, get cache information, put and get the data from cache.

Syntax

var myApp=angular.module('myApp', []);
myApp.controller('CacheController', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
//Create Cache of capacity(optional) 3
$scope.cache = $cacheFactory('cacheId',{capacity:3});
//put data into cache
$scope.cache.put(key,value);
//get data from cache
$scope.cache.get(key);
//get cache info
$scope.cache.info();
}]);

Plunker-$cacheFactory Example

$locale

$locale Service is used for localization, which is based on the date and numeric formatting. Go to the URL https://code.angularjs.org/1.5.6/i18n/, choose the localization file and add it to your project.

Syntax

var myApp = angular.module('myApp', []);
myApp.controller('localeController', ['$scope','$locale', function($scope,$locale) {
//full date format
$scope.myFormat=$locale.DATETIME_FORMATS.fullDate;
//short date format
$scope.myFormat=$locale.DATETIME_FORMATS.fullDate;
}]);

Plunker- $locale Example

$timeout

$timeout Service evaluates some expression or calls a function after some delay. It takes two parameters, where one is the function which is to be called and second is the amount of delay in miliseconds before executing the function.

Syntax

var myApp = angular.module('myApp', []);
myApp.controller('timeoutController', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
//do some stuff
}, 5000);
}]);

Plunker-$timeout Example

$cookies

$cookies Service provides an access to the Browser cookies. You can keep the data and get the data fom the Browser cookies. For using $cookies Service, you just need to add Angular-cookies script file after AngularJS and dependency of ngCookies into Angular module, as shown below.

Syntax

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-cookies.js"></script>
<script src="your script file"></script>
var myApp=angular.module('myApp', ['ngCookies'])
.controller('cookiesController', ['$cookies', function($cookies) {
// Retrieving a cookie
var myCookie = $cookies.get('myCookieName');
// Setting a cookie
$cookies.put('myCookieName', 'cookie Value');
//Removing a cookie
$cookies.remove('myCookieName');
}]);

Plunker-$cookies Example

$routeProvider

$routeProvider Service is used to configure the routes or the URLs for your Application. In order to configure routes, $routeProvide is injected in config function of an Angular module. You also need to add Angular-route script file after AngularJS and dependency of ngRoute into an Angular module, as shown below.

Syntax

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>//angularJS file
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>//angular-route file
<script src="your script file"></script>
angular.module('myApp', ['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/someUrl', {
templateUrl: 'templateURL(/abc.html)',
controller: 'ControllerName'
//other properties
})
.otherwise('/someURL');//tells angular to redirect user to specific URL in case if it does not understand route or url
});

Plunker-$routeProvider Exampe

$routeParams

$routeParams Service is used to retrieve the values of the parameters, which are passed in URL's. While configuring a route, you can specify the parameters in the URL segment by using colon followed by a parameter name.

Synatx

angular.module('myApp', ['ngRoute']).config(function($routeProvider) {
$routeProvider
//configure route wit parameter
.when('/someUrl/:parameterName', {
templateUrl: 'templateURL(/abc.html)',
controller: 'ControllerName'
//other properties
})
.otherwise('/someURL');//tells angular to redirect user to specific URL in case if it does not understand route or url
})
.controller('myController', function($scope,$routeParams) {
//getting value of parameter
$scopr.value=$routeParams.parameterName;
});

Plunker-$routeParams Example

$log

$log service is used for debugging and troubleshooting purpose.

Synatx

angular.module('myApp', [])
.controller('myController', ['$scope', '$log', function($scope, $log) {
$log.log("log")
$log.warn("log warn")
$log.info("log info")
$log.error("log error")
$log.debug("log debug")
}]);

Plunker-$log Example

Custom AngularJS Services

There are five different ways through which you can create custom Services in AngularJS.

provider()
factory()
service()
value()
constant()

provider()

This type of Service is created at the configuration phase.The provider function takes two parameters, the name of Service and the function. The function must contain $get property and the value of this proerty is a function, which is used to create a Service.

Syantax

var myApp=angular.module('myApp',[]);
myApp.config(function($provide){
$provide.provider('serviceName',function(){
this.$get=function(){
return{
//do some stuff
}
};
});
});

$provide Service is used to create injectable Services.

Plunker- Custom angularJS service through Provider()

facory()

The factory function takes two parameters, the name of the Service and the function, which creates and returns Service.

Synatx

var myApp=angular.module('myCustomServiceModule', []);
myApp.factory('myService', [function() {
return {
//do some stuff here
};
}]);

Plunker- Custom Service Through factory() Example

service()

The method to create Service through Service() function is same as factory() function but the main difference between them is that Angular treats the function, which is passed to the Service() as a constructor and executes it with the new operator.

Syntax

var myApp=angular.module('myCustomServiceModule', []);
myApp.service('myService', [function() {
return {
//do some stuff here
};
}]);

Plunker-Custom Service Through service() Example

value()

This fucntion is the short version of factory(). The value function can be used in place of factory, if you dont want to inject anything in your Service.

Syntax

var myApp=angular.module('myApp',[]);
myApp.value('myCustomService',{
//do some stuff
});

Plunker- Custom Service Through value() Example

constant()

The constant funcion is used to define constant values for your Application. This function takes two parameters, the name of the Service and an object literal, which represents the Service.

Syntax

var myApp=angular.module('myApp',[]);
myApp.constant('appSettings',{
APP_NAME:"Constant Demo App"
//do other stuff
});

Plunker-Custom Service Through constant() Example

Summary

In this article, I discussed some of the commonly used built-in AngularJS Services and the methods through which you can create Custom Services in AngularJS.

2 Comments

Join the conversation! Your thoughts help the community grow.

Former member9y ago
Nice article and i have one request that people write article on angular but no one write very h article on angular directive. the angular directive is big area. so would please write few articles on directives part by part.
- Rehman Shahid9y ago
  Thank you tri_inn....your feedback and suggestion is highly appreciated..i will try to share such type of stuff in near future..