AngularJS Factory Method makes the development process of AngularJS applications more robust. A factory is a simple function that allows us to add some logic to a created object and return the created object. The factory is also used to create/return a function in the form of reusable code which can be used anywhere within the application. Whenever we create an object using a factory it always returns a new instance for that object. The object returned by the factory can be integrated(injectible) with different components of the Angularjs framework such as controller, service, filter, or directive.
Use: A practical Scenario Factory generally acts as a container or class for a collection of functions that fulfills different features of the application. When used with a constructor function it can be initiated within different Controllers.
Syntax:
module.factory( 'factoryName', function(){ Custom code....});
Example 1: The following example illustrates the use of factory code instantiated inside a controller to generate a random number.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Factory Example 1</ title >
< script src =
</ script >
< script >
var application = angular.module('myApp', []);
application.factory('random', function () {
var randomObject = {};
var number = Math.floor(Math.random() * 100);
randomObject.generate = function () {
return number;
};
return randomObject;
});
application.controller('thisapp', function ($scope, random) {
$scope.generateRandom = function () {
$scope.randomNumber = random.generate();
};
});
</ script >
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >Factory Examples</ h2 >
< div ng-app = "myApp" ng-controller = "thisapp" >
< button ng-click = "generateRandom()" >
Generate Random Number
</ button >
< br >{{randomNumber}}
</ div >
</ body >
</ html >
|
Output:
On Clicking the generate random number button we get a different number every time. In this example, we use the factory method to define a function that carries a variable and using the Math.random we store a random value to that variable every time this function is called. This function is then called in the controller whose $scope variable carries the random value from the called function we then call this controller to our HTML code to display the result.
Example 2: This example makes use of a factory to create a function to find the addition or subtraction of two numbers. this function is then loaded in the controller $scope variable which passes them to the HTML code for displaying the results.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Factory Example 2</ title >
< script src =
</ script >
< script >
var application = angular.module('myApp', []);
application.factory('MyFactoryService', function () {
var factory = {};
factory.Subtract = function (a, b) {
return a - b;
};
factory.Add = function (a, b) {
return a + b;
};
return factory;
});
application.controller('thisapp', function (
$scope, MyFactoryService) {
$scope.result = function () {
$scope.results =
MyFactoryService.Subtract($scope.num1, $scope.num2)
};
$scope.result2 = function () {
$scope.results =
MyFactoryService.Add($scope.num1, $scope.num2)
};
});
</ script >
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >Factory Example 2</ h2 >
< div ng-app = "myApp" ng-controller = "thisapp" >
< p >
Enter A Number:
< input type = "number" ng-model = "num1" />
< br /> Enter A Number:
< input type = "number" ng-model = "num2" />
< br />
</ p >
< button ng-click = "result()" >Subtract</ button >
< button ng-click = "result2()" >Add</ button >
< p >Results: {{results}}
</ div >
</ body >
</ html >
|
Output:
Last Updated :
19 Oct, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...