angularjs - ng-href angular 5
Confundido acerca de Servicio vs Fábrica (22)
ejemplo vivo
ejemplo "hola mundo"
con factory / service / provider :
var myApp = angular.module(''myApp'', []);
//service style, probably the simplest one
myApp.service(''helloWorldFromService'', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
//factory style, more involved but more sophisticated
myApp.factory(''helloWorldFromFactory'', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
//provider style, full blown, configurable version
myApp.provider(''helloWorld'', function() {
// In the provider function, you cannot inject any
// service or factory. This can only be done at the
// "$get" method.
this.name = ''Default'';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName(''World'');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
Como lo entiendo, cuando estoy en una fábrica, devuelvo un objeto que se inyecta en un controlador. Cuando estoy dentro de un servicio, trato con el objeto usando this y no devuelvo nada.
Supuse que un servicio siempre era un singleton , y que un nuevo objeto de fábrica se inyecta en cada controlador. Sin embargo, como resultado, un objeto de fábrica también es un singleton?
Código de ejemplo para demostrar:
var factories = angular.module(''app.factories'', []);
var app = angular.module(''app'', [''ngResource'', ''app.factories'']);
factories.factory(''User'', function () {
return {
first: ''John'',
last: ''Doe''
};
});
app.controller(''ACtrl'', function($scope, User) {
$scope.user = User;
});
app.controller(''BCtrl'', function($scope, User) {
$scope.user = User;
});
Cuando se cambia user.first en ACtrl , resulta que user.first en BCtrl también se cambia, por ejemplo, ¿ User es un singleton?
Supongo que se inyectó una nueva instancia en un controlador con una fábrica?
Servicio AngularJS vs Fábrica
module.service( ''serviceName'', function );
module.factory( ''factoryName'', function );
Al declarar serviceName como un argumento injectable se le proporcionará una instancia de la función. En otras palabras, nuevo FunctionYouPassedToService() . Esta instancia de objeto se convierte en el objeto de servicio que AngularJS registra e inyecta posteriormente a otros services / controllers si es necesario.
Al declarar factoryName como un argumento injectable se le proporcionará el valor que se devuelve al invocar la referencia de función pasada a module.factory .
En el siguiente ejemplo, definimos MyService de dos maneras diferentes. Observe cómo en .service creamos métodos de servicio usando this.methodname . En .factory creamos un objeto de fábrica y le asignamos los métodos.
AngularJS .servicio
module.service(''MyService'', function() {
this.method1 = function() {
//..
}
this.method2 = function() {
//..
}
});
AngularJS .factory
module.factory(''MyService'', function() {
var factory = {};
factory.method1 = function() {
//..
}
factory.method2 = function() {
//..
}
return factory;
});
"Fábrica" y "Servicio" son diferentes formas de hacer DI (inyección de dependencia) en angular.
Entonces, cuando definimos DI usando "servicio" como se muestra en el siguiente código. Esto crea una nueva instancia GLOBAL del objeto "Logger" y lo inyecta en la función.
app.service("Logger", Logger); // Injects a global object
Cuando se define DI utilizando una "fábrica", no se crea una instancia. Simplemente pasa el método y luego el consumidor internamente tiene que hacer llamadas a la fábrica para las instancias de objetos.
app.factory("Customerfactory", CreateCustomer);
A continuación se muestra una imagen simple que muestra visualmente cómo el proceso DI para "Servicio" es diferente a "Fábrica".
Se debe utilizar la fábrica Cuando queremos crear diferentes tipos de objetos en función de los escenarios. Por ejemplo, según el escenario, queremos crear un objeto simple de "Cliente", o "Cliente" con objeto de "Dirección" o "Cliente" con objeto de "Teléfono". Aquí hay una explicación detallada de este párrafo.
Se debe usar el servicio cuando tenemos una utilidad o funciones compartidas para inyectar, como la utilidad, el registrador, el controlador de errores, etc.
Agregando a la primera respuesta, creo que .service () es para personas que han escrito su código en un estilo más orientado a objetos (C # / Java) (usando esta palabra clave y el objeto de creación de instancias a través de la función Constructor / prototipo).
Factory es para desarrolladores que escriben código que es más natural para javascript / estilo funcional de codificación.
Eche un vistazo al código fuente de .service y .factory method en angular.js: internamente, todos llaman al método de proveedor:
function provider(name, provider_) {
if (isFunction(provider_)) {
provider_ = providerInjector.instantiate(provider_);
}
if (!provider_.$get) {
throw Error(''Provider '' + name + '' must define $get factory method.'');
}
return providerCache[name + providerSuffix] = provider_;
}
function factory(name, factoryFn) { /
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, [''$injector'', function($injector) {
return $injector.instantiate(constructor);
}]);
}
Aquí están las principales diferencias:
Servicios
Sintaxis: module.service( ''serviceName'', function );
Resultado: Al declarar serviceName como un argumento inyectable, se le proporcionará la instancia de una función pasada a module.service .
Uso: podría ser útil para compartir funciones de utilidad que son útiles para invocar simplemente añadiendo () a la referencia de función inyectada. También podría ejecutarse con injectedArg.call( this ) o similar.
Suerte
Sintaxis: module.factory( ''factoryName'', function );
Resultado: Al declarar factoryName como un argumento inyectable, se le proporcionará el valor que se devuelve al invocar la referencia de función pasada a module.factory .
Uso: podría ser útil para devolver una función de ''clase'' que luego puede ser nueva para crear instancias.
También verifique la documentación de AngularJS y preguntas similares sobre el flujo de apilamiento confundido sobre el servicio vs fábrica .
Aquí está el ejemplo que usa los servicios y la fábrica . Lea más sobre el servicio AngularJS vs fábrica .
Aquí hay algunos ejemplos más de servicios vs fábricas que pueden ser útiles para ver la diferencia entre ellos. Básicamente, un servicio tiene "nuevo ..." llamado, ya está instanciado. Una fábrica no es instanciada automáticamente.
Ejemplos básicos
Devuelve un objeto de clase que tiene un solo método.
Aquí hay un servicio que tiene un solo método:
angular.service(''Hello'', function () {
this.sayHello = function () { /* ... */ };
});
Aquí hay una fábrica que devuelve un objeto con un método:
angular.factory(''ClassFactory'', function () {
return {
sayHello: function () { /* ... */ }
};
});
Devolver un valor
Una fábrica que devuelve una lista de números:
angular.factory(''NumberListFactory'', function () {
return [1, 2, 3, 4, 5];
});
console.log(NumberListFactory);
Un servicio que devuelve una lista de números:
angular.service(''NumberLister'', function () {
this.numbers = [1, 2, 3, 4, 5];
});
console.log(NumberLister.numbers);
La salida en ambos casos es la misma, la lista de números.
Ejemplos avanzados
Variables de "clase" utilizando fábricas.
En este ejemplo, definimos un CounterFactory, incrementa o disminuye un contador y puede obtener el recuento actual u obtener cuántos objetos de CounterFactory se han creado:
angular.factory(''CounterFactory'', function () {
var number_of_counter_factories = 0; // class variable
return function () {
var count = 0; // instance variable
number_of_counter_factories += 1; // increment the class variable
// this method accesses the class variable
this.getNumberOfCounterFactories = function () {
return number_of_counter_factories;
};
this.inc = function () {
count += 1;
};
this.dec = function () {
count -= 1;
};
this.getCount = function () {
return count;
};
}
})
Usamos el CounterFactory para crear múltiples contadores. Podemos acceder a la variable de clase para ver cuántos contadores se crearon:
var people_counter;
var places_counter;
people_counter = new CounterFactory();
console.log(''people'', people_counter.getCount());
people_counter.inc();
console.log(''people'', people_counter.getCount());
console.log(''counters'', people_counter.getNumberOfCounterFactories());
places_counter = new CounterFactory();
console.log(''places'', places_counter.getCount());
console.log(''counters'', people_counter.getNumberOfCounterFactories());
console.log(''counters'', places_counter.getNumberOfCounterFactories());
La salida de este código es:
people 0
people 1
counters 1
places 0
counters 2
counters 2
Así es como entendí la diferencia entre ellos en términos de patrones de diseño:
Servicio : Devuelva un tipo, que se actualizará para crear un objeto de ese tipo. Si se usa la analogía de Java, el Servicio devuelve una definición de Clase Java .
Fábrica : Devuelve un objeto concreto que puede ser usado inmediatamente. En Java Analogy a Factory devuelve un objeto Java .
La parte que a menudo confunde a las personas (incluido yo mismo) es que cuando se inyecta un Servicio o una Fábrica en su código, se pueden utilizar de la misma manera, lo que obtiene en su código en ambos casos es un objeto concreto que puede invocar de inmediato. Lo que significa que, en caso del Servicio, las llamadas angulares son "nuevas" en la declaración de servicio en su nombre. Creo que este es un concepto complicado.
Esta sería la mejor y breve respuesta para comprender el servicio Vs Factory Vs Provider
Fuente : https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/HuZsOsMvKv4J
Aquí lo que dice Ben con una demostración jsbin
"Hay comentarios en el código que ilustran las diferencias primarias, pero los ampliaré un poco aquí. Como nota, solo estoy pensando en esto así que si digo algo que está mal, hágamelo saber.
Servicios
Sintaxis : module.service (''serviceName'', function);
Resultado : Al declarar serviceName como un argumento inyectable, se le proporcionará la referencia de la función real pasada a module.service.
Uso : podría ser útil para compartir funciones de utilidad que son útiles para invocar simplemente añadiendo () a la referencia de función inyectada. También podría ejecutarse con injectedArg.call (this) o similar.
Suerte
Sintaxis : module.factory (''factoryName'', function);
Resultado : Al declarar factoryName como un argumento inyectable, se le proporcionará el valor que se devuelve al invocar la referencia de función pasada a module.factory.
Uso : podría ser útil para devolver una función de ''clase'' que luego puede ser nueva para crear instancias.
Proveedores
Sintaxis : module.provider (''providerName'', function);
Resultado : Al declarar providerName como un argumento inyectable, se le proporcionará el valor que se devuelve al invocar el método $ get de la referencia de función pasada a module.provider.
Uso : podría ser útil para devolver una función de ''clase'' que luego puede ser nueva para crear instancias pero que requiere algún tipo de configuración antes de ser inyectada. ¿Quizás útil para las clases que son reutilizables en todos los proyectos? Todavía un poco confuso en este caso ". Ben
Estilo de servicio : ( probablemente el más simple ) devuelve la función real: útil para compartir funciones de utilidad que son útiles para invocar simplemente añadiendo () a la referencia de función inyectada.
Un servicio en AngularJS es un objeto JavaScript singleton que contiene un conjunto de funciones
var myModule = angular.module("myModule", []);
myModule.value ("myValue" , "12345");
function MyService(myValue) {
this.doIt = function() {
console.log("done: " + myValue;
}
}
myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {
myService.doIt();
});
Estilo de fábrica : ( más complicado pero más sofisticado ) devuelve el valor de retorno de la función: crear una instancia de un objeto como nuevo Objeto () en java.
La fábrica es una función que crea valores. Cuando un servicio, controlador, etc. necesita un valor inyectado desde una fábrica, la fábrica crea el valor a pedido. Una vez creado, el valor se reutiliza para todos los servicios, controladores, etc. que necesitan ser inyectados.
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 999);
myModule.factory("myFactory", function(numberValue) {
return "a value: " + numberValue;
})
myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});
Estilo del proveedor : ( versión completa, configurable ) devuelve la salida de la función $ get function: Configurable.
Los proveedores en AngularJS son la forma más flexible de fábrica que puede crear. Registra un proveedor con un módulo tal como lo hace con un servicio o fábrica, excepto que en su lugar utiliza la función provider ().
var myModule = angular.module("myModule", []);
myModule.provider("mySecondService", function() {
var provider = {};
var config = { configParam : "default" };
provider.doConfig = function(configParam) {
config.configParam = configParam;
}
provider.$get = function() {
var service = {};
service.doService = function() {
console.log("mySecondService: " + config.configParam);
}
return service;
}
return provider;
});
myModule.config( function( mySecondServiceProvider ) {
mySecondServiceProvider.doConfig("new config param");
});
myModule.controller("MyController", function($scope, mySecondService) {
$scope.whenButtonClicked = function() {
mySecondService.doIt();
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
{{serviceOutput}}
<br/><br/>
{{factoryOutput}}
<br/><br/>
{{providerOutput}}
<script>
var app = angular.module( ''app'', [] );
var MyFunc = function() {
this.name = "default name";
this.$get = function() {
this.name = "new name"
return "Hello from MyFunc.$get(). this.name = " + this.name;
};
return "Hello from MyFunc(). this.name = " + this.name;
};
// returns the actual function
app.service( ''myService'', MyFunc );
// returns the function''s return value
app.factory( ''myFactory'', MyFunc );
// returns the output of the function''s $get function
app.provider( ''myProv'', MyFunc );
function MyCtrl( $scope, myService, myFactory, myProv ) {
$scope.serviceOutput = "myService = " + myService;
$scope.factoryOutput = "myFactory = " + myFactory;
$scope.providerOutput = "myProvider = " + myProv;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div ng-controller="MyCtrl">
{{hellos}}
</div>
<script>
var myApp = angular.module(''myApp'', []);
//service style, probably the simplest one
myApp.service(''helloWorldFromService'', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
//factory style, more involved but more sophisticated
myApp.factory(''helloWorldFromFactory'', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
//provider style, full blown, configurable version
myApp.provider(''helloWorld'', function() {
this.name = ''Default'';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName(''World'');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
</script>
</body>
</html>
Esto es lo que me ayudó a entender la diferencia, gracias a una publicación del blog de Pascal Precht.
Un servicio es un método en un módulo que toma un nombre y una función que define el servicio. Puede inyectar y usar ese servicio en particular en otros componentes, como controladores, directivas y filtros. Una fábrica es un método en un módulo y también toma un nombre y una función, que define la fábrica. También podemos inyectarlo y usarlo de la misma manera que lo hicimos con el servicio.
Los objetos creados con nuevo utilizan el valor de la propiedad prototipo de su función constructora como su prototipo, así que encontré el código Angular que llama a Object.create (), que creo que es la función constructor de servicios cuando se crea una instancia. Sin embargo, una función de fábrica es realmente solo una función a la que se llama, por lo que tenemos que devolver un objeto literal para la fábrica.
Aquí está el código angular 1.5 que encontré para la fábrica:
var needsRecurse = false;
var destination = copyType(source);
if (destination === undefined) {
destination = isArray(source) ? [] : Object.create(getPrototypeOf(source));
needsRecurse = true;
}
Fragmento de código fuente angular para la función factory ():
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
}
Toma el nombre y la función de fábrica que se pasa y devuelve un proveedor con el mismo nombre, que tiene un método $ get, que es nuestra función de fábrica. Cuando le pide al inyector una dependencia específica, básicamente le pide al proveedor correspondiente una instancia de ese servicio, llamando al método $ get (). Es por eso que se requiere $ get () al crear proveedores.
Aquí está el código angular 1.5 para el servicio.
function service(name, constructor) {
return factory(name, [''$injector'', function($injector) {
return $injector.instantiate(constructor);
}]);
}
Resulta que cuando llamamos a service (), ¡en realidad llamamos a factory ()! Sin embargo, no solo pasa nuestra función de constructor de servicios a la fábrica como está. También pasa una función que le pide al inyector que cree un objeto por el constructor dado.
En otras palabras, si inyectamos MyService en algún lugar, lo que sucede en el código es:
MyServiceProvider.$get(); // return the instance of the service
Para volver a expresarlo, un servicio llama a una fábrica, que es un método $ get () en el proveedor correspondiente. Además, $ injector.instantiate () es el método que finalmente llama a Object.create () con la función de constructor. Por eso usamos "esto" en los servicios.
Para ES5 no importa cuál usamos: service () o factory (), siempre se llama una fábrica que crea un proveedor para nuestro servicio.
Sin embargo, puede hacer exactamente lo mismo con los servicios. Sin embargo, un servicio es una función constructora que no nos impide devolver literales de objetos. Así que podemos tomar nuestro código de servicio y escribirlo de manera que básicamente haga exactamente lo mismo que nuestra fábrica o, en otras palabras, puede escribir un servicio como fábrica para devolver un objeto.
¿Por qué la mayoría de la gente recomienda usar fábricas en lugar de servicios? Esta es la mejor respuesta que he visto, que proviene del libro de Pawel Kozlowski: Dominar el desarrollo de aplicaciones web con AngularJS.
El método de fábrica es la forma más común de obtener objetos en el sistema de inyección de dependencia AngularJS. Es muy flexible y puede contener sofisticada lógica de creación. Dado que las fábricas son funciones regulares, también podemos aprovechar un nuevo ámbito léxico para simular variables "privadas". Esto es muy útil ya que podemos ocultar los detalles de implementación de un servicio dado ".
La diferencia básica es que el proveedor permite establecer valores primitivos (no objetos), matriz o función de devolución de llamada en la variable declarada de fábrica, y por lo tanto, si se devuelve un objeto, se debe declarar y devolver explícitamente.
Por otro lado, un servicio solo se puede utilizar para establecer la variable declarada de servicio en un objeto, por lo que podemos evitar la creación y devolución explícita de los objetos, mientras que por otro lado, permite el uso de esta palabra clave.
O, en pocas palabras, " proveedor es una forma más genérica, mientras que el servicio está limitado a objetos solamente".
Muy simple:
.service: la función registrada se invocará como un constructor (también conocido como ''newed'')
.factory - la función registrada se invocará como una función simple
Ambos se invocan una vez, lo que da como resultado un objeto singleton que se inyecta en otros componentes de su aplicación.
Para mí, la revelación se produjo cuando me di cuenta de que todos funcionan de la misma manera: ejecutando algo una vez , almacenando el valor que obtienen, y luego expulsan ese mismo valor almacenado cuando se hace referencia a través de la inyección de dependencia.
Digamos que tenemos:
app.factory(''a'', fn);
app.service(''b'', fn);
app.provider(''c'', fn);
La diferencia entre los tres es que:
- El valor almacenado de a proviene de ejecutar
fn, en otras palabras:fn() - El valor almacenado de
bproviene denewingfn, en otras palabras:new fn() - El valor almacenado de
cproviene de la primera vez que se obtiene una instancia con elnewingfn, y luego se ejecuta un método$getde la instancia
lo que significa que hay algo así como un objeto de caché dentro de angular, cuyo valor de cada inyección solo se asigna una vez, cuando se han inyectado la primera vez, y donde:
cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
Esta es la razón por la que usamos this en los servicios y definimos this.$get en los proveedores.
Espero que esto ayude.
Podemos definir un servicio como este:
app.service(''MyService'', function () {
this.sayHello = function () {
console.log(''hello'');
};
});
.service() es un método en nuestro módulo que toma un nombre y una función que define el servicio. Muy claro. Una vez definido, podemos inyectar y usar ese servicio en particular en otros componentes, como controladores, directivas y filtros, como este:
Ahora lo mismo que una fábrica:
app.factory(''MyService'', function () {
return {
sayHello: function () {
console.log(''hello'');
}
}
});
Nuevamente, .factory() es un método en nuestro módulo y también toma un nombre y una función, que define la fábrica. Podemos inyectar y usar esa cosa exactamente de la misma manera que lo hicimos con el servicio. Ahora, ¿cuál es la diferencia aquí?
Bueno, puede que vea que en lugar de trabajar con esto en la fábrica, estamos devolviendo un objeto literal. ¿Porqué es eso? Resulta que un servicio es una función constructora, mientras que una fábrica no lo es. En algún lugar profundo de este mundo angular, hay un código que llama a Object.create () con la función de constructor de servicios, cuando se crea una instancia. Sin embargo, una función de fábrica es en realidad una función a la que se llama, por lo que tenemos que devolver un objeto explícitamente.
También hay una forma de devolver una función de constructor para que pueda devolver las clases que se pueden agregar en las fábricas, como esto:
function MyObjectWithParam($rootScope, name) {
this.$rootScope = $rootScope;
this.name = name;
}
MyObjectWithParam.prototype.getText = function () {
return this.name;
};
App.factory(''MyObjectWithParam'', function ($injector) {
return function(name) {
return $injector.instantiate(MyObjectWithParam,{ name: name });
};
});
Así que puedes hacer esto en un controlador, que usa MyObjectWithParam:
var obj = new MyObjectWithParam("hello"),
Vea aquí el ejemplo completo:
http://plnkr.co/edit/GKnhIN?p=preview
Y aquí las páginas del grupo de google, donde se discutió:
https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/b8hdPskxZXsJ
Todos los proveedores trabajan de la misma manera. Los diferentes métodos de service , factory , provider simplemente le permiten lograr lo mismo en menos código.
PD También hay value y constant .
Cada caso especial en la cadena que comienza con el provider y termina con el value tiene una limitación adicional. Así que para decidir entre ellos debe preguntarse qué le permite lograr lo que quiere con menos código.
Aquí hay una foto que te muestra lo que quiero decir:
Puede obtener una guía de desglose y referencia en la publicación del blog de la que obtuve esta imagen:
Tuve esta confusión por un tiempo y estoy tratando de dar una explicación simple aquí. Espero que esto ayude!
angular .factory y angular .service se utilizan para inicializar un servicio y funcionan de la misma manera.
La única diferencia es, cómo desea inicializar su servicio.
Ambos son singletons
var app = angular.module(''app'', []);
Fábrica
app.factory ( <service name> , <function with a return value> )
Si desea inicializar su servicio desde una función que tiene con un valor de retorno , debe utilizar este método de factory .
p.ej
function myService() {
//return what you want
var service = {
myfunc: function (param) { /* do stuff */ }
}
return service;
}
app.factory(''myService'', myService);
Al inyectar este servicio (por ejemplo, a su controlador):
- Angular llamará a su función dada (como
myService()) para devolver el objeto - Singleton : se llama solo una vez, se almacena y se pasa el mismo objeto.
Servicio
app.service ( <service name> , <constructor function> )
Si desea inicializar su servicio desde una función de constructor (usando this palabra clave), tiene que usar este método de service .
p.ej
function myService() {
this.myfunc: function (param) { /* do stuff */ }
}
app.service(''myService'', myService);
Al inyectar este servicio (por ejemplo, a su controlador):
- La voluntad angular será la
newfunción dada (comonew myService()) para devolver el objeto. - Singleton : se llama solo una vez, se almacena y se pasa el mismo objeto.
factory con <constructor function> o service con <function with a return value> , no funcionará. Ejemplos - DEMOs
Todos los servicios angulares son singletons :
Docs (ver Servicios como singletons ): https://docs.angularjs.org/guide/services
Por último, es importante darse cuenta de que todos los servicios de Angular son aplicaciones únicas. Esto significa que solo hay una instancia de un servicio dado por inyector.
Básicamente la diferencia entre el servicio y la fábrica es la siguiente:
app.service(''myService'', function() {
// service is just a constructor function
// that will be called with ''new''
this.sayHello = function(name) {
return "Hi " + name + "!";
};
});
app.factory(''myFactory'', function() {
// factory returns an object
// you can run some code before
return {
sayHello : function(name) {
return "Hi " + name + "!";
}
}
});
Echa un vistazo a esta presentación sobre $ proporcionar: http://slides.wesalvaro.com/20121113/#/
Esas diapositivas se usaron en una de las reuniones de AngularJs: http://blog.angularjs.org/2012/11/more-angularjs-meetup-videos.html
Hay tres formas de manejar la lógica de negocios en AngularJS: ( Inspirado por el curso Coursera AngularJS de Yaakov ) que son:
- Servicio
- Fábrica
- Proveedor
Aquí solo vamos a hablar de Servicio vs Fábrica.
SERVICIO :
Sintaxis:
app.js
var app = angular.module(''ServiceExample'',[]);
var serviceExampleController =
app.controller(''ServiceExampleController'', ServiceExampleController);
var serviceExample = app.service(''NameOfTheService'', NameOfTheService);
ServiceExampleController.$inject = [''NameOfTheService''] //very important as this protects from minification of js files
function ServiceExampleController(NameOfTheService){
serviceExampleController = this;
serviceExampleController.data = NameOfTheService.getSomeData();
}
function NameOfTheService(){
nameOfTheService = this;
nameOfTheService.data = "Some Data";
nameOfTheService.getSomeData = function(){
return nameOfTheService.data;
}
}
index.html
<div ng-controller = "ServiceExampleController as serviceExample">
{{serviceExample.data}}
</div>
Las principales características del servicio:
Instancia perezosa : si el servicio no se inyecta, no se creará una instancia nunca. Así que para usarlo deberás inyectarlo en un módulo.
Singleton : si se inyecta en varios módulos, todos tendrán acceso a una sola instancia en particular. Por eso, es muy conveniente compartir datos entre diferentes controladores.
FÁBRICA
Ahora hablemos de la Fábrica en AngularJS.
Primero echemos un vistazo a la sintaxis :
app.js :
var app = angular.module(''FactoryExample'',[]);
var factoryController = app.controller(''FactoryController'', FactoryController);
var factoryExampleOne = app.factory(''NameOfTheFactoryOne'', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory(''NameOfTheFactoryTwo'', NameOfTheFactoryTwo);
//first implementation where it returns a function
function NameOfTheFactoryOne(){
var factory = function(){
return new SomeService();
}
return factory;
}
//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
var factory = {
getSomeService : function(){
return new SomeService();
}
};
return factory;
}
Ahora usando los dos anteriores en el controlador:
var factoryOne = NameOfTheFactoryOne() //since it returns a function
factoryOne.someMethod();
var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
factoryTwo.someMethod();
Características de la fábrica:
Este tipo de servicios sigue el patrón de diseño de fábrica . La fábrica puede considerarse como un lugar central que crea nuevos objetos o métodos.
Esto no solo produce servicios singleton, sino también personalizables.
El
.service()método es una fábrica que siempre produce el mismo tipo de servicio, que es un singleton. No hay una manera fácil de configurar su comportamiento. Ese.service()método generalmente se usa como acceso directo para algo que no requiere ninguna configuración en absoluto.
Puede entender la diferencia con esta analogía: considere la diferencia entre una función normal que devolverá algún valor y una función constructora que se instanciará con una nueva palabra clave. un objeto) mientras que crear un servicio es como crear una función de constructor (clase OO) de la que podemos crear una instancia usando una nueva palabra clave. Lo único que hay que notar aquí es que cuando usamos el método de Servicio para crear servicios, creará automáticamente una instancia de él usando un mecanismo de inyección de dependencia soportado por AngularJS
- Con la fábrica realmente creas un objeto dentro de la fábrica y lo devuelves.
- Con el servicio solo tiene una función estándar que utiliza la
thispalabra clave para definir la función. - Con el proveedor ,
$getusted define a uno y puede usarse para obtener el objeto que devuelve los datos.