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:
Post a Comment