web-dev-qa-db-fra.com

AngularJS: Usine et service?

EDIT Jan 2016: Depuis cela attire encore l'attention. Depuis que j'ai demandé cela, j'ai terminé quelques projets AngularJS, et pour ceux que j'ai principalement utilisés factory, j'ai construit un objet et renvoyé l'objet à la fin. Mes déclarations ci-dessous sont toujours vraies.

EDIT: Je pense enfin comprendre la différence principale entre les deux et j'ai un exemple de code à illustrer. Je pense aussi que cette question est différente du duplicata proposé. Le duplicata indique que le service n’est pas instable, mais si vous le configurez comme je l’ai montré ci-dessous, c’est le cas. Un service peut être configuré pour être identique à une usine. Je fournirai également un code indiquant les cas de défaillance du service par l’usine, ce qu’aucune autre réponse ne semble faire.

Si je configure VaderService comme suit (c.-à-d. En tant que service):

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

module.service('VaderService', function() {
    this.speak = function (name) {
        return 'Join the dark side ' + name;
    }
});

Ensuite, dans mon contrôleur, je peux faire ceci:

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

Avec le service, le VaderService injecté dans le contrôleur est instancié. Je ne peux donc appeler que VaderService.speak. Toutefois, si je change le VaderService en module.factory, , le code du contrôleur ne fonctionnera plus. , et c'est la différence principale. Avec factory, le VaderService injecté dans le contrôleur est pas instancié, raison pour laquelle vous devez renvoyer un objet lors de la configuration d'une factory (voir mon exemple dans la question).

Cependant, vous pouvez configurer un service exactement de la même manière que vous pouvez configurer une usine (par exemple, le faire retourner à un objet) et le service se comporte exactement comme une usine

Compte tenu de cette information, je ne vois aucune raison d'utiliser le service après-vente en usine, le service peut tout faire en usine et plus encore.

Question originale ci-dessous.

Je sais que cela a souvent été demandé, mais je ne vois vraiment aucune différence fonctionnelle entre les usines et les services. J'avais lu ce tutoriel: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

Et cela semble donner une bonne explication, cependant, j’ai configuré mon application comme suit:

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;
});

Puis, quand je charge index.html, je vois "Rejoindre le côté sombre luke", c'est bien. Exactement comme prévu. Cependant, si je modifie VaderService.js en ceci (notez module.service au lieu 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;
});

Puis reload index.html (je me suis assuré de vider le cache et de recharger le disque). Cela fonctionne exactement comme avec module.factory. Alors, quelle est la vraie différence fonctionnelle entre les deux ??

javascriptangularjsangularjs-serviceangularjs-factory
212
Cameron Ball

Service vs Usine

enter image description hereenter image description here

La différence entre usine et service ressemble à la différence entre une fonction et un objet

Fournisseur d'usine

  • Donne-nous la valeur de retour de la fonction c'est-à-dire. Vous venez de créer un objet, d'y ajouter des propriétés, puis de renvoyer le même objet. Lorsque vous transmettez ce service à votre contrôleur, ces propriétés de l'objet sont désormais disponibles dans ce contrôleur via votre fabrique. (Scénario hypothétique)

  • Singleton et ne sera créé qu'une fois

  • Composants réutilisables

  • Factory sont un excellent moyen de communication entre contrôleurs, comme le partage de données.

  • Peut utiliser d'autres dépendances

  • Habituellement utilisé lorsque l'instance de service nécessite une logique de création complexe

  • Ne peut pas être injecté dans la fonction .config().

  • Utilisé pour des services non configurables

  • Si vous utilisez un objet, vous pouvez utiliser le fournisseur d'usine.

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

Fournisseur de service

  • Nous donne l'instance d'une fonction (objet) - Vous venez d'instancier avec le mot-clé 'new' et vous ajouterez des propriétés à 'this' et le service retournera 'this'. Lorsque vous transmettez le service à votre contrôleur, ces propriétés sur 'this' sera désormais disponible sur ce contrôleur via votre service. (Scénario hypothétique)

  • Singleton et ne sera créé qu'une fois

  • Composants réutilisables

  • Les services sont utilisés pour la communication entre les contrôleurs afin de partager des données

  • Vous pouvez ajouter des propriétés et des fonctions à un objet de service à l’aide du mot clé this.

  • Les dépendances sont injectées comme arguments de constructeur

  • Utilisé pour une logique de création simple

  • Ne peut pas être injecté dans la fonction .config().

  • Si vous utilisez une classe, vous pouvez utiliser le fournisseur de services

  • Syntaxe: module.service(‘serviceName’, function);

exemple de démonstration

Dans l'exemple ci-dessous, j'ai défini MyService et MyFactory. Notez comment dans .service j'ai créé les méthodes de service à l'aide de this.methodname. Dans .factory j'ai créé un objet fabrique et lui ai affecté les méthodes.

AngularJS .service 

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;
});

Regardez aussi ces belles choses

Confus au sujet du service par rapport à l'usine

Usine, service et fournisseur AngularJS

Angular.js: service vs fournisseur vs usine?

287
Nidhish Krishnan

Factory et Service est juste un wrapper d'un provider.

Usine

Factory peut renvoyer tout ce qui peut être class(constructor function), instance of class, string, number ou boolean. Si vous retournez une fonction constructor, vous pouvez l'instancier dans votre contrôleur.

 myApp.factory('myFactory', function () {

  // any logic here..

  // Return any thing. Here it is object
  return {
    name: 'Joe'
  }
}

Service

Le service n'a pas besoin de retourner quoi que ce soit. Mais vous devez tout affecter dans la variable this. Parce que service créera une instance par défaut et l'utilisera comme objet de base.

myApp.service('myService', function () {

  // any logic here..

  this.name = 'Joe';
}

Code angularjs réel derrière le service

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

C'est juste une enveloppe autour de la factory. Si vous retournez quelque chose de service, alors il se comportera comme Factory.

IMPORTANT: Le résultat renvoyé par Factory et Service sera cache et identique pour tous les contrôleurs.

Quand devrais-je les utiliser?

Factory est généralement préférable dans tous les cas. Il peut être utilisé lorsque vous avez la fonction constructor qui doit être instanciée dans différents contrôleurs.

Service est une sorte d'objet Singleton. Le retour d'objet du service sera le même pour tous les contrôleurs. Il peut être utilisé lorsque vous souhaitez avoir un seul objet pour toute l'application. Par exemple: détails de l'utilisateur authentifié.

Pour plus de compréhension, lisez

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

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

42
Fizer Khan
  • Si vous utilisez un service, vous obtiendrez l'instance d'une fonction (mot-clé "this").
  • Si vous utilisez une fabrique, vous obtiendrez la valeur renvoyée en appelant la référence de la fonction (l'instruction de retour dans la fabrique).

Factory et Service sont les recettes les plus couramment utilisées. La seule différence entre eux est que la recette de service fonctionne mieux pour les objets de type personnalisé, tandis que Factory peut produire des primitives et des fonctions JavaScript.

référence

7
Jayram

$ fournir un service

Il s’agit techniquement de la même chose, c’est en fait une notation différente qui consiste à utiliser la fonction provider du service $provide .

  • Si vous utilisez une classe: vous pourriez utilisez la notation service.
  • Si vous utilisez un objet: vous pourriez utilisez la notation factory.

La différence niquement ​​entre la service et la factorynotation est que le service est new-ed et l'usine n'est pas. Mais pour tout le reste, ils ont tous les deux look, odeur et se comportent ​​identiques. Encore une fois, il s’agit d’un raccourci pour la fonction $ remove.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);
_
4
null