page navigationend change cambiar javascript angularjs angularjs-service angularjs-factory

javascript - navigationend - AngularJS: ¿Fábrica y servicio?



router events subscribe angular 4 (4)

Esta pregunta ya tiene una respuesta aquí:

EDITAR enero de 2016: Ya que esto todavía llama la atención. Desde que hice esto, he completado algunos proyectos de AngularJS, y para los que más usé en factory , construí un objeto y devolví el objeto al final. Sin embargo, mis afirmaciones a continuación siguen siendo ciertas.

EDITAR: Creo que finalmente entiendo la principal diferencia entre los dos, y tengo un ejemplo de código para demostrar. También creo que esta pregunta es diferente al duplicado propuesto. El duplicado dice que el servicio no es instantáneo, pero si lo configura como se muestra a continuación, realmente lo es. Se puede configurar un servicio para que sea exactamente igual al de una fábrica. También proporcionaré un código que muestre dónde falla la fábrica sobre el servicio, lo que no parece hacer ninguna otra respuesta.

Si configuro VaderService como tal (es decir, como un servicio):

var module = angular.module(''MyApp.services'', []); module.service(''VaderService'', function() { this.speak = function (name) { return ''Join the dark side '' + name; } });

Entonces en mi controlador puedo hacer esto:

module.controller(''StarWarsController'', function($scope, VaderService) { $scope.luke = VaderService.speak(''luke''); });

Con el servicio, se crea una instancia del VaderService inyectado en el controlador, así que solo puedo llamar a VaderService.speak, sin embargo, si cambio el VaderService a module.factory, el código en el controlador ya no funcionará , y esta es la principal diferencia . Con la fábrica, el VaderService inyectado en el controlador no se crea una instancia, por lo que debe devolver un objeto al configurar una fábrica (consulte mi ejemplo en la pregunta).

Sin embargo, puede configurar un servicio exactamente de la misma manera que puede configurar una fábrica (es decir, hacer que devuelva un objeto) y el servicio se comporta exactamente igual que una fábrica

Dada esta información, no veo ninguna razón para utilizar la fábrica durante el servicio, el servicio puede hacer todo lo que la fábrica puede y más.

Pregunta original a continuación.

Sé que esto se ha pedido muchas veces, pero realmente no puedo ver ninguna diferencia funcional entre las fábricas y los servicios. Había leído este tutorial: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

Y parece dar una explicación razonablemente buena, sin embargo, configuré mi aplicación de la siguiente manera:

index.html

<!DOCTYPE html> <html> <head> <title>My App</title> <script src="lib/angular/angular.js"></script> <script type="text/javascript" src="js/controllers.js"></script> <script type="text/javascript" src="js/VaderService.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body ng-app="MyApp"> <table ng-controller="StarWarsController"> <tbody> <tr><td>{{luke}}</td></tr> </tbody> </table> </body> </html>

app.js:

angular.module(''MyApp'', [ ''MyApp.services'', ''MyApp.controllers'' ]);

controllers.js:

var module = angular.module(''MyApp.controllers'', []); module.controller(''StarWarsController'', function($scope, VaderService) { var luke = new VaderService(''luke''); $scope.luke = luke.speak(); });

VaderService.js

var module = angular.module(''MyApp.services'', []); module.factory(''VaderService'', function() { var VaderClass = function(padawan) { this.name = padawan; this.speak = function () { return ''Join the dark side '' + this.name; } } return VaderClass; });

Luego, cuando cargué index.html veo "Join the dark side luke", genial. Exactamente como se esperaba. Sin embargo, si cambio VaderService.js a esto (note module.service en lugar de module.factory):

var module = angular.module(''MyApp.services'', []); module.service(''VaderService'', function() { var VaderClass = function(padawan) { this.name = padawan; this.speak = function () { return ''Join the dark side '' + this.name; } } return VaderClass; });

Luego vuelva a cargar index.html (me aseguré de vaciar la memoria caché y hacer una recarga difícil). Funciona exactamente igual que lo hizo con module.factory. Entonces, ¿cuál es la diferencia funcional real entre los dos?


$ proporcionar servicio

Técnicamente son lo mismo, en realidad es una notación diferente del uso de la función de provider del provider $provide .

  • Si está utilizando una clase: podría usar la notación de servicio .
  • Si está utilizando un objeto: puede usar la notación de fábrica .

La única diferencia entre el service y la notación de factory es que el servicio es nuevo y la fábrica no. Pero para todo lo demás ambos miran , huelen y se comportan igual. Una vez más, es solo una abreviatura de la función $ prov.provider .

// Factory angular.module(''myApp'').factory(''myFactory'', function() { var _myPrivateValue = 123; return { privateValue: function() { return _myPrivateValue; } }; }); // Service function MyService() { this._myPrivateValue = 123; } MyService.prototype.privateValue = function() { return this._myPrivateValue; }; angular.module(''myApp'').service(''MyService'', MyService);


Servicio vs Fábrica

La diferencia entre fábrica y servicio es igual que la diferencia entre una función y un objeto.

Proveedor de fábrica

  • Nos da el valor de retorno de la función es decir. Simplemente crea un objeto, le agrega propiedades y luego devuelve ese mismo objeto. Cuando pase este servicio a su controlador, esas propiedades en el objeto ahora estarán disponibles en ese controlador a través de su fábrica. (Escenario hipotético)

  • Singleton y solo será creado una vez.

  • Componentes reutilizables

  • Factory es una excelente manera de comunicarse entre controladores, como compartir datos.

  • Puede usar otras dependencias.

  • Generalmente se utiliza cuando la instancia de servicio requiere una lógica de creación compleja.

  • No se puede inyectar en la función .config() .

  • Utilizado para servicios no configurables.

  • Si está utilizando un objeto, puede utilizar el proveedor de fábrica.

  • Sintaxis: module.factory(''factoryName'', function);

Proveedor de servicio

  • Nos da la instancia de una función (objeto): acaba de crear una instancia con la palabra clave "nueva" y agregará propiedades a "esto" y el servicio devolverá "esto". Cuando transfiere el servicio a su controlador, esas propiedades en ''esto'' ahora estará disponible en ese controlador a través de su servicio. (Escenario hipotético)

  • Singleton y solo será creado una vez.

  • Componentes reutilizables

  • Los servicios se utilizan para la comunicación entre controladores para compartir datos.

  • Puede agregar propiedades y funciones a un objeto de servicio utilizando la palabra clave this

  • Las dependencias se inyectan como argumentos constructores.

  • Usado para lógica de creación simple

  • No se puede inyectar en la función .config() .

  • Si está utilizando una clase, puede utilizar el proveedor de servicios.

  • Sintaxis: module.service(''serviceName'', function);

Demostración de muestra

En el siguiente ejemplo, he definido MyService y MyFactory . Observe cómo en .service he creado los métodos de servicio usando this.methodname. En .factory he creado un objeto de fábrica y le he asignado los métodos.

AngularJS .servicio

module.service(''MyService'', function() { this.method1 = function() { //..method1 logic } this.method2 = function() { //..method2 logic } });

AngularJS .factory

module.factory(''MyFactory'', function() { var factory = {}; factory.method1 = function() { //..method1 logic } factory.method2 = function() { //..method2 logic } return factory; });

También eche un vistazo a estos hermosos productos

Confundido sobre servicio vs fábrica

http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

Angular.js: servicio vs proveedor vs fábrica?


Factory y Service es un envoltorio justo de un provider .

Fábrica

Factory puede devolver cualquier cosa que pueda ser una class(constructor function) , instance of class , string , number o boolean . Si devuelve una función de constructor , puede crear una instancia en su controlador.

myApp.factory(''myFactory'', function () { // any logic here.. // Return any thing. Here it is object return { name: ''Joe'' } }

Servicio

El servicio no necesita devolver nada. Pero tienes que asignar todo en this variable. Debido a que el servicio creará una instancia por defecto y la usará como un objeto base.

myApp.service(''myService'', function () { // any logic here.. this.name = ''Joe''; }

Código angularjs real detrás del servicio

function service(name, constructor) { return factory(name, [''$injector'', function($injector) { return $injector.instantiate(constructor); }]); }

Es solo un envoltorio alrededor de la factory . Si devuelves algo del service , entonces se comportará como Factory .

IMPORTANT : El resultado de retorno de Fábrica y Servicio será caché y se devolverá el mismo para todos los controladores.

¿Cuándo debo usarlos?

Factory es mayoritariamente preferible en todos los casos. Se puede usar cuando tienes una función de constructor que necesita ser instanciada en diferentes controladores.

Service es un tipo de objeto Singleton . El retorno de Objeto del Servicio será el mismo para todos los controladores. Se puede utilizar cuando se desea tener un solo objeto para toda la aplicación. Ej .: Datos de usuario autenticados.

Para una mayor comprensión, lea

http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/


  • Si utiliza un servicio, obtendrá la instancia de una función ("esta" palabra clave).
  • Si utiliza una fábrica, obtendrá el valor que se devuelve al invocar la referencia de función (la declaración de devolución en fábrica)

Fábrica y Servicio son las recetas más utilizadas. La única diferencia entre ellos es que la receta de servicio funciona mejor para objetos de tipo personalizado, mientras que Factory puede producir funciones y primitivas de JavaScript.

Reference