AngularJS Factory Method hace que el proceso de desarrollo de la aplicación AngularJS sea más robusto. Una fábrica es una función simple que nos permite agregar algo de lógica a un objeto creado y devolver el objeto creado. La fábrica también se usa para crear/devolver una función en forma de código reutilizable que se puede usar en cualquier lugar dentro de la aplicación. Cada vez que creamos un objeto usando la fábrica, siempre devuelve una nueva instancia para ese objeto. El objeto devuelto por la fábrica puede ser integrado (inyectable) con diferentes componentes del framework Angularjs como controlador, servicio, filtro o directiva.
Uso:
En la práctica, Scenario Factory generalmente actúa como contenedor o clase para una colección de funciones que cumple con diferentes características de la aplicación. Cuando se usa con una función constructora, se puede iniciar dentro de diferentes controladores.
Sintaxis:
module.factory( 'factoryName', function(){ Custom code....});
Ejemplo:
El siguiente ejemplo ilustra el uso del código de fábrica instanciado dentro de un controlador para generar un número aleatorio
<!DOCTYPE html>
<html>
<head>
<title>Factory Example 1</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Producción:
Al hacer clic en el botón generar un número aleatorio, obtenemos un número diferente cada vez. En este ejemplo, usamos el método de fábrica para definir una función que lleva una variable y usando Math.random almacenamos un valor aleatorio en esa variable cada vez que se llama a esta función. Luego se llama a esta función en el controlador cuya variable $scope lleva el valor aleatorio de la función llamada. Luego llamamos a este controlador a nuestro código HTML para mostrar el resultado.
Ejemplo: este ejemplo hace uso de la fábrica para crear una función para encontrar la suma o resta de dos números. esta función luego se carga en la variable del controlador $scope que los pasa al código html para mostrar los resultados.
<!DOCTYPE html>
<html>
<head>
<title>Factory Example 2</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Salida:
Antes:
Después de ingresar la entrada, al hacer clic en el botón Agregar/Restar, se muestra el resultado:
Publicación traducida automáticamente
Artículo escrito por RohaanKhan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA