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.
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.
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.";
}
};
});
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.
Following is the example of creating and using factory and service in angularjs applications.
<!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.
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.