Providers en AngularJS
- Proveedores en AngularJS
-
Diferencia entre
ProvideryFactoryen AngularJS - Diferencia entre proveedor y servicio en AngularJS
Presentaremos proveedores en AngularJS y las diferencias entre provider, factory y service en AngularJS.
Proveedores en AngularJS
Los proveedores son un tipo de servicio. La función provider() nos permite crear un servicio configurable que contiene el método $get.
Imaginemos crear una aplicación web que use API; si necesitamos configurar una clave API para acceder a los datos de la API en nuestra aplicación, podemos configurarla en la configuración del módulo y pasar la entrada al proveedor utilizando el servicio $provide.
Vamos a crear un módulo con un proveedor que devolverá un valor cuando un controlador llame al proveedor. Primero, agregaremos la biblioteca AngularJS y el archivo app.js usando las etiquetas script.
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
Definiremos la aplicación AngularJS usando ng-app y el controlador usando ng-controller.
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
En app.js, crearemos nuestro módulo.
# AngularJS
var module = angular.module("myApp", []);
Usaremos un provider; los proveedores hacen lo que su nombre indica, es decir, proporcionan valores, por lo que en este caso proporcionaremos un valor de cadena. El proveedor tiene un método definido: $get.
El proveedor puede tener varios métodos, pero las llamadas de Angular son $get. Entonces, asignaremos una función al método $get que devolverá un valor de cadena.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
Inyectaremos el proveedor en nuestro controlador y console.log() el valor del proveedor.
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
Producción:
Como se muestra en el ejemplo anterior, obtuvimos el valor exacto del proveedor en nuestra consola. Eso funcionó, y podemos usar un proveedor para devolver un valor e inyectarlo en nuestro método.
Es importante tener en cuenta que esto es cierto que todos los proveedores son todos iguales y el servicio y la fábrica también son los mismos. Pero no importa cuántas veces inyectemos el proveedor, el valor se ejecutará solo una vez.
Podemos probarlo creando otro controlador, como se muestra a continuación.
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
Usaremos console.log() dentro del método $get de nuestro proveedor para registrar un valor dentro del proveedor. Entonces, cada vez que se ejecute este proveedor, registrará el mismo valor.
De esta forma, podemos comprobar si nuestro proveedor se ejecuta una o dos veces.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
Agreguemos div para nuestro segundo controlador en index.html.
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
Producción:
El ejemplo anterior muestra que el proveedor se ejecuta solo una vez, pero el valor del proveedor se inyecta en ambos controladores. Tenemos dos mensajes de salida de nuestros controladores.
Es importante notar que Angular lo ejecuta cuando se inyecta un proveedor, llama a $get y store y recuerda ese valor. Cada vez que se inyecta el proveedor, devuelve el valor que extrajo la primera vez.
Diferencia entre Provider y Factory en AngularJS
Vamos a crear una factory con la misma funcionalidad que el proveedor que creamos. Ahora copiaremos nuestro proveedor y lo cambiaremos a una factory.
La fábrica no tiene un método $get, por lo que llamaremos directamente a la función en nuestra fábrica y devolveremos un valor. Esa es la única parte que es diferente del proveedor.
Inyectaremos nuestra fábrica en ambos controladores. Nuestro código en app.js se verá como a continuación.
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
Producción:
Como se muestra en el ejemplo anterior, obtenemos los mismos resultados. Tanto los proveedores como la fábrica hacen lo mismo, pero una fábrica puede hacerlo con un poco menos de código.
Diferencia entre proveedor y servicio en AngularJS
Vamos a crear un servicio con la misma funcionalidad que el proveedor que creamos. Ahora copiaremos nuestro proveedor y lo cambiaremos a un servicio.
El servicio no tiene un método $get, por lo que llamaremos directamente a la función en nuestro servicio al igual que la fábrica y devolveremos un valor. Esa es la única parte que es diferente del proveedor.
Inyectaremos nuestro servicio en ambos controladores. Nuestro código en app.js se verá como a continuación.
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
Producción:
Como se muestra en el ejemplo anterior, obtenemos los mismos resultados. Tanto los proveedores como el servicio hacen lo mismo, pero el servicio devuelve un objeto en lugar de una cadena.
El punto principal es cuándo usar un provider, factory y service. Si queremos devolver un valor en lugar de un objeto, no podemos usar un servicio.
Tenemos que usar una fábrica en lugar de un servicio, pero usaremos una fábrica para devolver un objeto en lugar de un valor. El proveedor nos da acceso haciendo tiempo de configuración.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn