AngularJS Factory Service with Example

Here we will learn factory service in angularjs, use of factory service in angularjs and how to use factory service in angularjs applications with example.

What is Factory Service in AngularJS?

The factory services are used to communicate with servers using HTTP and also used to create reusable code for application. The factories in angularjs will always return a new instance for each object but it will not happen in services in angularjs.

Difference between Factory and Service in AngularJS

One of the major difference between factory and service is, we can run custom code in the factory. But the services, we can use only for objects creation. i.e.

 

app.factory('myFactory', function () {

//Write custom code here

return {

myMSG: function () {

return"Hi, this is the custom msg.";

}

};

});

Syntax of Creating Factory in AngularJS

Following is the syntax of creating and injecting factory service in angularjs applications.

 

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

app.factory('myFactory', function () {

var displayFact;

var addMSG = function (msg) {

displayFact = ' Hi Guest, Welcome to ' + msg;

}

return {

setMSG: function (msg) {

addMSG(msg);

},

getMSG: function () {

return displayFact;

}

};

});

 

app.controller("factoryCtrl", function ($scope, myFactory) {

//Inject to factory and controller both.

myFactory.setMSG("Tutlane.com");

//Prepare a collection

$scope.myCollections = [

myFactory.getMSG(),

];

});

If you observe above syntax we created factory 'myFactory' and send that factory as argument to the controller. To access factory in controller we need to pass factory as parameter. We will see how to use factory and service with example.

Example of AngularJS Factory and Service

Following is the example of creating and using factory and service in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Factory Service Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

// Creating Factory

app.factory('myFactory', function () {

var displayFact;

var addMSG = function (msg) {

displayFact = ' Hi Guest, Welcome to ' + msg;

}

return {

setMSG: function (msg) {

addMSG(msg);

},

getMSG: function () {

return displayFact;

}

};

});

 

// Creating Service

app.service('myService', function () {

var displayServ;

var addMSG = function (msg) {

displayServ = 'Hi Guest, Welcome to ' + msg;

}

this.setMSG = function (msg) {

addMSG(msg);

}

this.getMSG = function () {

return displayServ;

}

});

 

app.controller("myCtrl", function ($scope, myService, myFactory) {

//Inject factory and service both to controller.

myFactory.setMSG("Tutlane (with Factory)");

myService.setMSG("Tutlane (with Service)");

 

//Prepare a collection

$scope.myCollections = [

myFactory.getMSG(),

myService.getMSG()

];

});

</script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="coll in myCollections">

{{coll}}

</div>

</div>

</body>

</html>

If you observe above code we created both service and factory in angularjs application and using both properties in controller to get data in angularjs application. Now we will run and see the output that would be like as shown below.

Output of AngularJS Factory and Service Example

Following is the result of using factory and service example in angularjs

 

Hi Guest, Welcome to Tutlane (with Factory)

 

Hi Guest, Welcome to Tutlane (with Service)

This is how we can create and use factory and services in angularjs application.