Wednesday, April 01, 2015

A Handy Guide on Creating a Service Using AngularJS service() and factory() method



AngularJS (also referred to as Angular) comes with several built-in services that helps to organize and share the code across your web application. Essentially, a service in AngularJS is a singletons object that consists of a set of functions containing logic that is required by the service for performing its work. More importantly, an AngularJS service avoids polluting the object space unnecessarily. For example, Angular '$http' service helps interact with remote HTTP servers through the browser’s XMLHttpRequest object. This means, you just need to communicate with the $http API to connect to the server, and doesn't need to make frequent calls to the XMLHttpRequest object.


Apart from using Angular built-in services, you can even choose to create your own services to meet the needs of any complex application using web development services. With AngularJS, you can easily create custom services by simply registering them. When a service gets registered, it can be referenced by the Angular complier and is loaded at runtime in the form of a dependency.

There are five methods using which an Angular service can be created or registered such as:



  • the value() method

  • the service
() method
  • the factory
() method
  • the provider
() method
  • the constant
() method


In this post, we'll discuss about the two most important methods used for creating a service: the service() method and the factory() method. We will be using some examples to simplify the process of creating and using a service using these methods. But before proceeding further, let's first understand the difference between the service() method and the factory() method.

Note: Once your service is created, you will need to use it inside the controller so that it can be used to perform the operations.

Let us understand how creating a service using the service() method is different from the factory() method.


Getting to Know the Difference Between: the service() and factory() method

The service() method make use of function constructor. And then, this method returns an instance of the function or an object that the service needs to work with.
In contrast, the factory() method uses the value that is returned by the function. This method returns the function value that is returned post the execution of the service function.

We will have to use the service() method, in case we need to register a service with help of the function constructor. Conversely, registering the service using the factory() method will return the value, once the service function has been executed. The value may be returned in the form of a function, a primitive value, or object.

Simply put, while the service() method returns output in the form of function object, the factory() method, on the other hand, returns output in any kind of value.


Creating a Service Using the service() Method

Let's begin with, creating a simple service using the service() method that will help us find the square of a number. When creating a service, it would be better to place all the services in an individual JavaScript file. For our example, let's create a service.js file and then within the file create the service using the service method as follows:

var CalculatorService = angular.module('CalculatorService', [])

.service('Calculator', function () {

this.square = function (a) { return a*a};


});

As we had discussed above, we'll need to use our service in the controller. To do so, we'll have to pass “CalculatorService” service module in the app module as a dependency. And then, we just need to pass the name of our newly created service “Calculator” in the controller as shown below:


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

myApp.controller('CalculatorController', function ($scope, Calculator) {


$scope.findSquare = function () {

$scope.answer = Calculator.square($scope.number);

}

});


Creating a Service Using the factory() Method

Let us now take an example to see how we can create a service using the factory() method. For example, let us create a service for reversing the string.



CalculatorService.factory('StringManipulation', function () {


var r= function reverse(s) {

var o = '';

for (var i = s.length - 1; i >= 0; i--)

o += s[i];

return o;

}


return{

reverseString: function reverseString(name)

{

return r(name);

}

}


});

Next, pass the new service “StringManipulationService” in the controller using the following code:


myApp.controller('CalculatorController', function ($scope, Calculator) {


$scope.findSquare = function () {

$scope.answer = Calculator.square($scope.number);

}

});



Wrapping Up!



AngularJS services provides are objects or functions that contains some business logic, using which we can perform some specific tasks. While there are many built-in Angular services available for you, you may need to create your own services to meet your complex web app requirements. In order to create a service or register it, AngularJS provides 5 different ways (or methods) to choose from. Reading this post will help you learn about using the two most important AngularJS methods and how they can be used for creating a service.

No comments: