In our previous article we have discussed about Angular service. We have created service using .service() method. In this article we will discuss about angular service factory.
So, first things first, we need to know what is factory in Angular. We can create our own services by registering the service factory function. The service factory function generates the single object or function which represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service. Each component dependent on a service gets a reference to the single instance generated by the service factory ,what we know as singletons. But when we declare a service using service() method, Angular only instantiates a service when a component depends on it – known as lazily instanitiated.
Now, let us see how we can create a factory.
var app=angular.module('myApp',['ngRoute']);
app.factory('ageService', function ($rootScope) {
var ageObj = {
age:0,
saveAge: function (age) {
this.age=age;
$rootScope.$broadcast('ageAdded');
},
getAge: function(){
return this.age;
}
};
return ageObj;
});
Here we have created a factory called ‘ageService’. In this factory an object i.e. value is returned whenever we invoke it. This object contents properties(age) and functions(saveAge(), getAge()) together. This is the main diffrence with service created with service method. When we were using service() method a function was being instantiated. But here a value is returned by invoking the function reference passed to module.factory. And then we can use the functions with it’s reference.
Another thing we are using here is $rootscope. Every application has a single root scope and all other scopes are descendant scopes of the root scope. $rootScope basically functions as an event listener and dispatcher. $rootScope.$broadcast is a convenient way to raise a “global” event which all child scopes can listen for. We only need to use $rootScope to broadcast the message, since all the descendant scopes can listen for it. Let’s make it more clear by using the factory in our controller.
//Controllers
app.controller('saveController',function($scope,ageService){
$scope.setAge=function(){
ageService.saveAge($scope.inputage);
};
$scope.$on('ageAdded', function () {
$scope.status="Age Saved";
});
});
app.controller('displayController',function($scope,ageService){
$scope.myage=ageService.getAge();
});
In the above code we have used our ‘ageService’ in both the controllers, one for saving person’s age and another for getting age. Both of them have used the factory’s method in order perform their task. When $scope listen for the event ‘ageAdded’ it sets the status that age has been saved. We are routing our application in the following way.
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'saveage.html',
controller:'saveController'
})
.when('/displayage',{
templateUrl: 'displayage.html',
controller:'displayController'
});
});
Now let’s see the templates to get full transparency about the code we have used still now.
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Single Page Application using Angularjs</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script> <script src="js/script.js"></script> </head> <body ng-app="myApp"> <div ng-controller="saveController"> <div ng-view> <!--This DIV loads templates depending upon route.--> </div> </div> </body> </html>
savepage.html
<ul>
<li><a href="#/">Save Age</a></li>
<li><a href="#displayage">Display Age</a></li>
</ul>
<div>
<input type="text" ng-model="inputage">
<button ng-click="setAge()">Save</button>
<div>{{status}}</div>
</div>
displayage.html
<ul>
<li><a href="#/">Save Age</a></li>
<li><a href="#displayage">Display Age</a></li>
</ul>
<div>
My Age={{myage}}
</div>
So, by now it’s clear how we used our factory in this application. Look, we are getting the age exactly we saved though going to another page without using any localstorage or database. This is because we are saving it in the age property of our ageService factory.
Reader can download the full source code from Github.
If you find this article helpful, you can connect us in Google+ and Twitter.
http://www.phloxblog.in/feed/
