Factory in angular JS is a kind of service provided to the called one(can be controller).factories can creates objects and returns them (objects).Factories in angular JS can also return the primitives(like string, number or boolean).The factory can also have the dependencies in it's function.Factory in angular JS is considered to ba as a singleton object so it can be instantaited once per the module.
The factory in angular is just like creating the object and attaching the properties to the object and then accessing them in the called one which can be as controller.
syntactical look of factory :
var app = angular.module('apptest', [])
app.factory('factoryname', function () {
//return some object through function.
}
})
In the above example we can observe the service with it’s name ‘factoryname’ in the first parameter and to the next parameter as an anonymous constructor function which can contain the function that returns the object or primitive types to the called one.
Example on factory with explanation :
var myapp = angular.module('myapp', []);
myapp.factory('actions', function () {
var sampleObject = {};
sampleObject.add = function (val1) {
return parseInt(val1) + parseInt(val1);
}
sampleObject.sub = function (val1) {
return parseInt(val1) - parseInt(val1);;
}
return sampleObject;
});
In the above code I had just created the module named as "myapp" and then created a service to that app by using the service(), the "sampleObject" is an object that which our factory will be going to return to the called one(controller).To that object I had added two functions named as "add" by "sampleObject.add" and "sub" by "sampleObject.sub" and then finally the functional code in factory returns the object "sampleObject".
myapp.controller('myctrl', function ($scope, actions) {
$scope.GetResult = function () {
$scope.addres = 'Addition to itself is : ' + actions.add($scope.val1);
$scope.subres = 'Substraction to itself is : ' + actions.sub($scope.val1);
}
});
In the above piece of code we had created a controller named 'myctrl' where we injected the factory named "actions".Within the function we can find the "GetResult" function.
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" id="txtval" ng-model="val1" />
<input type="button" value="Get Result" ng-click="GetResult()" /> <br />
<span ng-bind="addres"></span><br />
<span ng-bind="subres"></span>
</div>
</body>
In the above HTML code ng-model value(val1) of textbox will be passed to the controllers "GetResult()" function when the user hits the button. Then actions.add is going to perform and display in one span and actions.sub is going to perform and displays the result in its concern span.
Here, $scope.val1 is the vaalue that which comes from the input textbox where we used the ng-model.
Note : The factory is not going to be called every time when we call. It will instatiate only once.But the functions inside the factory will be called whenever we want as it executes that factory object.
The factory in angular is just like creating the object and attaching the properties to the object and then accessing them in the called one which can be as controller.
syntactical look of factory :
var app = angular.module('apptest', [])
app.factory('factoryname', function () {
//return some object through function.
}
})
In the above example we can observe the service with it’s name ‘factoryname’ in the first parameter and to the next parameter as an anonymous constructor function which can contain the function that returns the object or primitive types to the called one.
Example on factory with explanation :
var myapp = angular.module('myapp', []);
myapp.factory('actions', function () {
var sampleObject = {};
sampleObject.add = function (val1) {
return parseInt(val1) + parseInt(val1);
}
sampleObject.sub = function (val1) {
return parseInt(val1) - parseInt(val1);;
}
return sampleObject;
});
In the above code I had just created the module named as "myapp" and then created a service to that app by using the service(), the "sampleObject" is an object that which our factory will be going to return to the called one(controller).To that object I had added two functions named as "add" by "sampleObject.add" and "sub" by "sampleObject.sub" and then finally the functional code in factory returns the object "sampleObject".
myapp.controller('myctrl', function ($scope, actions) {
$scope.GetResult = function () {
$scope.addres = 'Addition to itself is : ' + actions.add($scope.val1);
$scope.subres = 'Substraction to itself is : ' + actions.sub($scope.val1);
}
});
In the above piece of code we had created a controller named 'myctrl' where we injected the factory named "actions".Within the function we can find the "GetResult" function.
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" id="txtval" ng-model="val1" />
<input type="button" value="Get Result" ng-click="GetResult()" /> <br />
<span ng-bind="addres"></span><br />
<span ng-bind="subres"></span>
</div>
</body>
In the above HTML code ng-model value(val1) of textbox will be passed to the controllers "GetResult()" function when the user hits the button. Then actions.add is going to perform and display in one span and actions.sub is going to perform and displays the result in its concern span.
Here, $scope.val1 is the vaalue that which comes from the input textbox where we used the ng-model.
Note : The factory is not going to be called every time when we call. It will instatiate only once.But the functions inside the factory will be called whenever we want as it executes that factory object.
Image reference of code :
Result :
Hello Srikanth, very good article.
ReplyDelete