What is factory in AngularJs?
The
factories will always return a new instance for each object but not for
services.
The
factories methodology are used to communicate with servers using HTTP and
persist the state and change to the across controllers and also use to create
the reusable code for feature uses.
One
of the major difference between factory and service that is, we can run custom
code in the factory. But in the services, we can use only for objects creation.
i.e.
qpp.factory('myFactory',
function () {
//Write custom code here
return {
myMSG: function () {
return "Hi, this is the
custom msg.";
}
};
});
If
you use a factory than you will get the value that is returned by invoking the
function reference.
If
you use a service than you will get the instance of a function using
"this" keyword.
There
are some points keep in mind for all providers as given below
1. All providers like value, constant, services, factories are
singletons.
2. The services are holds a
reference to any objects.
3. The factories are function
which returns any objects.
4. The provider is a function
which returns any function.
How to create and Inject
factory in AngularJs?
The
example in detail as given below and go for live demo http://embed.plnkr.co/f2F82P/preview
The AngularJs code sample
var
qpp = angular.module('myApp',
[]);
qpp.factory('myFactory',
function () {
var
displayFact;
var
addMSG = function (msg) {
displayFact = ' Hi Anil, This is ' + msg;
}
return {
setMSG: function (msg) {
addMSG(msg);
},
getMSG: function () {
return displayFact;
}
};
});
qpp.service('myService',
function () {
var
displayServ;
var
addMSG = function (msg) {
displayServ = 'Hi Anil, This is ' + msg;
}
this.setMSG
= function (msg) {
addMSG(msg);
}
this.getMSG
= function () {
return displayServ;
}
});
qpp.controller("MyCtrl",
function ($scope, myService,
myFactory) {
//Inject to factory and controller both.
myFactory.setMSG("SetFactory");
myService.setMSG("SetService");
//Pfrepare a collection
$scope.myCollections = [
myFactory.getMSG(),
myService.getMSG()
];
});
The HTML code sample
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="coll in
myCollections">
{{coll}}
</div>
</div>
</div>
The Full Live Angular +HTML
code sample
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
var qpp = angular.module('myApp', []);
qpp.factory('myFactory',
function () {
var
displayFact;
var
addMSG = function (msg) {
displayFact = ' Hi Anil, This is ' + msg;
}
return {
setMSG: function (msg) {
addMSG(msg);
},
getMSG: function () {
return displayFact;
}
};
});
qpp.service('myService',
function () {
var
displayServ;
var
addMSG = function (msg) {
displayServ = 'Hi Anil, This is ' + msg;
}
this.setMSG
= function (msg) {
addMSG(msg);
}
this.getMSG
= function () {
return displayServ;
}
});
qpp.controller("MyCtrl",
function ($scope, myService,
myFactory) {
//Inject to factory and controller both.
myFactory.setMSG("SetFactory");
myService.setMSG("SetService");
//Pfrepare a collection
$scope.myCollections = [
myFactory.getMSG(),
myService.getMSG()
];
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="coll in myCollections">
{{coll}}
</div>
</div>
</body>
</html>
The output: go to plunker
link http://embed.plnkr.co/f2F82P/preview
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
Blogger Comment
Facebook Comment