Quelle est la différence entre une usine et un service dans AngularJS et quand doit-on les utiliser?


Réponse 1:
angular.service ('apiService', apiServiceFunction);
angular.factory («apiFactory», apiFactoryFunction);

Je pense que cette question existe depuis la création de Factory and Service dans AngularJS. C'est peut-être la question la plus posée et débattue. En bref, les deux sont singleton et presque la même chose avec une mise en garde:

Factory: la fonction d'usine (constructeur) que nous avons créée sera appelée.

apiFactoryInjected <--- apiFactoryFunction ()

Service: la fonction de service que nous écrivons sera instanciée (nouveau)

  apiServiceInjected <---- new apiFactoryFunction ()

Confusion? Regardez l'article suivant: Service AngularJS vs usine - avec exemple


Réponse 2:

La différence entre l'usine et le service est comme la différence entre une fonction et un objet

Fournisseur d'usine

  • Nous donne la valeur de retour de la fonction ie. Il vous suffit de créer un objet, d'y ajouter des propriétés, puis de renvoyer ce même objet. Lorsque vous transmettez ce service à votre contrôleur, ces propriétés sur l'objet seront désormais disponibles dans ce contrôleur via votre usine. (Scénario hypothétique) Peut utiliser d'autres dépendances Habituellement utilisé lorsque l'instance de service nécessite une logique de création complexe Utilisé pour des services non configurables Si vous utilisez un objet, vous pouvez utiliser le fournisseur d'usine Syntaxe: module.factory ('factoryName', fonction);

Fournisseur de services

  • Nous donne l'instance d'une fonction (objet) - Vous venez d'instancier avec le mot clé `` nouveau '' et vous ajouterez des propriétés à `` ceci '' et le service renverra `` ceci '' .Lorsque vous transmettez le service à votre contrôleur, ces propriétés sur 'ceci' sera désormais disponible sur ce contrôleur via votre service. (Scénario hypothétique) Vous pouvez ajouter des propriétés et des fonctions à un objet de service en utilisant ce mot clé Les dépendances sont injectées comme arguments de constructeur Utilisées pour une logique de création simple Si vous utilisez une classe, vous pouvez utiliser le fournisseur de services Syntaxe: module.service ('serviceName', fonction );

Caractéristiques communes

  • Singleton et ne sera créé qu'une fois Composant réutilisable Utilisé pour la communication entre les contrôleurs pour partager les données Ne peut pas être injecté dans la fonction .config ().

source (belle explication) - AngularJS: Factory and Service?

plus de détails - Service vs Factory - Une fois pour toutes

J'espère que cela aide!!


Réponse 3:

Je parie qu'il n'y a pas de meilleure explication que ça!

Attends quoi? Encore un autre post / article qui répond à la grande question: Service vs Factory, que dois-je utiliser? Oui, il semble que cela ne soit plus nécessaire, car il existe une tonne de ressources sur Internet qui traitent de ce sujet. Il se trouve que cette question apparaît toujours chaque semaine sur différents canaux, et même après avoir lu les dix meilleures réponses sur StackOverflow, ce n'est toujours pas très clair. Malgré cela, il semble également que les ressources actuelles sur le Web ne favorisent pas vraiment les meilleures pratiques réelles, surtout si l'on considère les récents mouvements de la plate-forme Web. ES6 je vous regarde!

Cet article explique une fois pour toutes la différence entre les services et les usines et pourquoi nous voulons préférer les services aux usines.

TABLE DES MATIÈRES

  • La différence entre les services et les usinesQui utiliser? Les services nous permettent d'utiliser les classes ES6

La différence entre les services et les usines

D'accord, alors quelle est la différence entre un service et une usine dans AngularJS? Comme nous le savons tous, nous pouvons définir un service comme celui-ci:

app.service ('MyService', function () {
  this.sayHello = function () {
    console.log ('bonjour');
  };
});

.service () est une méthode de notre module qui prend un nom et une fonction qui définit le service. Assez simple. Une fois défini, nous pouvons injecter et utiliser ce service particulier dans d'autres composants, comme les contrôleurs, les directives et les filtres, comme ceci:

app.controller ('AppController', function (MyService) {
  MyService.sayHello (); // enregistre «bonjour»
});

D'accord, clair. Maintenant la même chose qu'une usine:

app.factory ('MyService', function () {
  revenir {
    sayHello: function () {
      console.log ('bonjour');
    }
  }
});

Encore une fois, .factory () est une méthode sur notre module et il prend également un nom et une fonction, qui définit l'usine. Nous pouvons injecter et utiliser cette chose exactement de la même manière que nous l'avons fait avec le service. Maintenant, quelle est la différence ici?

Eh bien, vous pourriez voir qu'au lieu de travailler avec cela en usine, nous retournons un objet littéral. Pourquoi donc? Il s'avère qu'un service est une fonction constructeur alors qu'une usine ne l'est pas. Quelque part au fond de ce monde angulaire, il y a ce code qui appelle Object.create () avec la fonction constructeur de service, quand il est instancié. Cependant, une fonction d'usine n'est vraiment qu'une fonction qui est appelée, c'est pourquoi nous devons renvoyer un objet explicitement.

Pour rendre cela un peu plus clair, nous pouvons simplement jeter un œil au code source angulaire. Voici à quoi ressemble la fonction factory ():

usine de fonctions (nom, usineFn, appliquer) {
  fournisseur de retour (nom, {
    $ get: enforce! == false? enforceReturnValue (nom, factoryFn): factoryFn
  });
}

Il prend le nom et la fonction d'usine qui sont passés et retourne essentiellement un fournisseur avec le même nom, qui a une méthode $ get qui est notre fonction d'usine. Alors qu'est-ce que c'est avec ce truc de fournisseur? Eh bien, chaque fois que vous demandez à l'injecteur une dépendance spécifique, il demande essentiellement au fournisseur correspondant une instance de ce service, en appelant la méthode $ get (). C'est pourquoi $ get () est requis lors de la création de fournisseurs.

En d'autres termes, si nous injectons MyService quelque part, ce qui se passe dans les coulisses est:

MyServiceProvider. $ Get (); // retourne l'instance du service

D'accord, les fonctions d'usine sont simplement appelées, qu'en est-il du code de service? Voici un autre extrait:

service de fonction (nom, constructeur) {
  return factory (name, ['$ injector', function ($ injector) {
    return $ injector.instantiate (constructeur);
  }]);
}

Oh regardez, il s'avère que lorsque nous appelons service (), il appelle en fait factory (). Mais il ne se contente pas de transmettre notre fonction de constructeur de services à l'usine telle quelle. Il passe une fonction qui demande à l'injecteur d'instancier et d'objecter par le constructeur donné. En d'autres termes: un service appelle une fabrique prédéfinie, qui se termine par la méthode $ get () sur le fournisseur correspondant. $ injector.instantiate () est la méthode qui appelle finalement Object.create () avec la fonction constructeur. C’est pourquoi nous l’utilisons dans les services.

D'accord, il s'avère que, peu importe ce que nous utilisons, service () ou usine (), c'est toujours une usine appelée qui crée un fournisseur pour notre service. Ce qui nous amène à la question la plus fréquemment posée dans l'histoire angulaire: laquelle dois-je utiliser?

Lequel utiliser?

Poser cette question sur Internet nous amène à quelques articles et réponses StackOverflow. La première est cette réponse. Ça dit:

"Fondamentalement, la différence entre le service et l'usine est la suivante:"

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

  // le service n'est qu'une fonction constructeur
  // qui sera appelé avec 'new'

  this.sayHello = fonction (nom) {
     retour "Salut" + nom + "!";
  };
});

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

  // l'usine retourne un objet
  // vous pouvez exécuter du code avant

  revenir {
    sayHello: fonction (nom) {
      retour "Salut" + nom + "!";
    }
  }
});

Nous savons maintenant déjà ce qui se passe dans les coulisses, mais cette réponse ajoute un autre commentaire. Il dit que nous pouvons exécuter du code avant de renvoyer notre objet littéral. Cela nous permet essentiellement de faire des choses de configuration ou de créer ou non un objet de manière conditionnelle, ce qui ne semble pas être possible lors de la création d'un service directement, c'est pourquoi la plupart des ressources recommandent d'utiliser des usines plutôt que des services, mais le raisonnement est inappréciable.

Et si je vous le disais, nous pouvons faire exactement la même chose avec les services?

Ouais, correct. Un service est une fonction constructeur, cependant, qui ne nous empêche pas de faire un travail supplémentaire et de renvoyer des littéraux d'objet. En fait, les fonctions constructeur en JavaScript peuvent retourner ce qu'elles veulent. Nous pouvons donc prendre notre code de service et l'écrire de manière à ce qu'il fasse exactement la même chose que notre usine:

app.service ('MyService', function () {

  // nous pourrions faire du travail supplémentaire ici aussi
  revenir {
    sayHello: function () {
      console.log ('bonjour');
    };
  }
});

Hoppla, et maintenant? Nous venons de réaliser que, selon la façon dont nous écrivons nos services, il n'y a plus de différence entre les deux. La grande question demeure: laquelle utiliser?

Les services nous permettent d'utiliser les classes ES6

Bien sûr, écrire des services de cette manière est un peu contre-productif, car il est appelé comme une fonction de constructeur, donc il devrait également être utilisé comme tel. Y a-t-il alors un avantage sur l'autre? Oui il y a. Il s'avère qu'il est en fait préférable d'utiliser des services lorsque cela est possible, lorsqu'il s'agit de migrer vers ES6. La raison en est simplement qu'un service est une fonction constructeur et qu'une usine ne l'est pas. Travailler avec des fonctions de constructeur dans ES5 nous permet d'utiliser facilement les classes ES6 lorsque nous migrons vers ES6.

Par exemple, nous pouvons prendre notre code et le réécrire dans ES6 comme ceci:

class MyService {
  dis bonjour() {
    console.log ('bonjour');
  }
}

app.service ('MyService', MyService);

Une classe ES6 est vraiment juste une fonction constructeur dans ES5. Nous avons écrit à ce sujet dans Utilisation d'ES6 avec Angular aujourd'hui, si vous n'avez pas encore lu cet article, je vous recommande de le vérifier.

Avec les usines, cela n'est pas possible car elles sont simplement appelées fonctions. J'espère que cet article a tout précisé et encourage les gens à ne pas utiliser les usines plutôt que les services, s'ils ne savent pas quoi utiliser.


Réponse 4:

Service Vs d'usine?

Bon, commençons par les bases

Angular a des services intégrés, y compris «Services» et «Usines»

Dans Factory, vous créez un objet, lui ajoutez des propriétés et renvoyez le même objet.

En service, vous ne créez pas un objet de manière explicite, Angularjs l'instancie en arrière-plan avec un «nouveau» mot-clé, il construit essentiellement l'objet avec une fonction constructeur.

Confusion? Permet de le simplifier avec cet exemple.

app.service («myService», serviceFunction)

app.factory («myFactory», factoryFunction)

var serviceFunction = function () {

// ici, vous affecterez les valeurs à cette fonction à l'aide du mot clé "this"

// dans les coulisses, angular déclarera var this = {}

this.name = "abc du service",

// retourne ceci

}

var factoryFunction = function () {

var someObject = {}

someObject.name = "abc from factory";

return someObject.name;

}

app.controller (‘myCtrl”, function (myService, myFactory) {

console.log («Data from Service», myService) // o / p serviceFunction: {«name»: «abc from service»}

console.log («Data from Factory», myFactory) // o / p «abc from factory»

})

Donc, fondamentalement, dans le service, il retournera implicitement toute l'instance de la fonction ... mais en usine, vous pouvez retourner ce que vous voulez .. donc vous avez plus de contrôle en usine par rapport au service.

J'espère que cela vous donne une petite idée de la façon dont les services et l'usine diffèrent.

vous pouvez demander plus d'explications si vous le souhaitez.


Réponse 5:

Merci pour l'A2A. Il n'y a pas vraiment de différence. Vous pouvez faire la même chose dans les deux. Cependant, je vous recommande de vous en tenir aux services. Parce que JavaScript évolue vers des structures "de classe", les services sont la meilleure pratique. Par exemple, si vous aviez un service et avez passé la fonction, cette fonction est en fait une classe. Donc, si vous supprimez l'Angular de votre projet, vous pourrez toujours tout utiliser du service.


Réponse 6:

La différence entre les services et les usines

D'accord, alors quelle est la différence entre un service et une usine dans AngularJS? Comme nous le savons tous, nous pouvons définir un service comme celui-ci:

app.service ('MyService', function () {
  this.sayHello = function () {
    console.log ('bonjour');
  };
});

.service () est une méthode de notre module qui prend un nom et une fonction qui définit le service. Assez simple. Une fois défini, nous pouvons injecter et utiliser ce service particulier dans d'autres composants, comme les contrôleurs, les directives et les filtres, comme ceci:

app.controller ('AppController', function (MyService) {
  MyService.sayHello (); // enregistre «bonjour»
});

D'accord, clair. Maintenant la même chose qu'une usine:

app.factory ('MyService', function () {
  revenir {
    sayHello: function () {
      console.log ('bonjour');
    }
  }
});

Encore une fois, .factory () est une méthode sur notre module et il prend également un nom et une fonction, qui définit l'usine. Nous pouvons injecter et utiliser cette chose exactement de la même manière que nous l'avons fait avec le service. Maintenant, quelle est la différence ici?

Eh bien, vous pourriez voir qu'au lieu de travailler avec cela en usine, nous retournons un objet littéral. Pourquoi donc? Il s'avère qu'un service est une fonction constructeur alors qu'une usine ne l'est pas. Quelque part au fond de ce monde angulaire, il y a ce code qui appelle Object.create () avec la fonction constructeur de service, quand il est instancié. Cependant, une fonction d'usine n'est vraiment qu'une fonction qui est appelée, c'est pourquoi nous devons renvoyer un objet explicitement.

Pour rendre cela un peu plus clair, nous pouvons simplement jeter un œil au code source angulaire. Voici à quoi ressemble la fonction factory ():

usine de fonctions (nom, usineFn, appliquer) {
  fournisseur de retour (nom, {
    $ get: enforce! == false? enforceReturnValue (nom, factoryFn): factoryFn
  });
}

Il prend le nom et la fonction d'usine qui sont passés et retourne essentiellement un fournisseur avec le même nom, qui a une méthode $ get qui est notre fonction d'usine. Alors qu'est-ce que c'est avec ce truc de fournisseur? Eh bien, chaque fois que vous demandez à l'injecteur une dépendance spécifique, il demande essentiellement au fournisseur correspondant une instance de ce service, en appelant la méthode $ get (). C'est pourquoi $ get () est requis lors de la création de fournisseurs.

En d'autres termes, si nous injectons MyServicesomewhere, ce qui se passe dans les coulisses est:

MyServiceProvider. $ Get (); // retourne l'instance du service

D'accord, les fonctions d'usine sont simplement appelées, qu'en est-il du code de service? Voici un autre extrait:

service de fonction (nom, constructeur) {
  return factory (name, ['$ injector', function ($ injector) {
    return $ injector.instantiate (constructeur);
  }]);
}

Oh regardez, il s'avère que lorsque nous appelons service (), il appelle en fait factory (). Mais il ne se contente pas de transmettre notre fonction de constructeur de services à l'usine telle quelle. Il passe une fonction qui demande à l'injecteur d'instancier et d'objecter par le constructeur donné. En d'autres termes: un service appelle une fabrique prédéfinie, qui se termine par la méthode $ get () sur le fournisseur correspondant. $ injector.instantiate () est la méthode qui appelle finalement Object.create () avec la fonction constructeur. C’est pourquoi nous l’utilisons dans les services.


Réponse 7:

Angular JS travaille sur la séparation des préoccupations. Pour cela, il s'appuie sur une architecture de service. Dans cela, certaines fonctions intégrées ont été fournies comme $ location, $ http etc. Chaque fonction est affectée à une tâche singulière. Ce sont des services intégrés qui sont préfixés par un signe $. Mais si nous voulons créer notre propre service, nous utilisons la méthode de service. La méthode de service est donc une API utilisée pour créer des fonctions. Celles-ci sont invoquées au moment de l'exécution. D'autre part, la méthode d'usine n'est pas une autre option pour l'utilisation de l'architecture de service, elle peut effectuer le travail qui est effectué par la méthode de service, mais ce n'est pas comme la méthode de service. La méthode fcatory crée des objets contrairement au service qui est une API pour créer des méthodes. Comprenons-le avec un exemple.

fonction getClass ($ http) {
  this.getClass = fonction fetch () {
    return $ http.get ('class.htm');
  };
}

angulaire
  .module ('app')
  .service ('getClass', getClass);
fonction getClass ($ http) {
  return {// retourne un objet
    fetch: function () {// fonction définie dans cet objet
      return $ http.get ('class.htm');
    }
  };
}
angulaire
  .module ('app')
  .factory ('getClass', getClass);

Réponse 8:

Angular JS travaille sur la séparation des préoccupations. Pour cela, il s'appuie sur une architecture de service. Dans cela, certaines fonctions intégrées ont été fournies comme $ location, $ http etc. Chaque fonction est affectée à une tâche singulière. Ce sont des services intégrés qui sont préfixés par un signe $. Mais si nous voulons créer notre propre service, nous utilisons la méthode de service. La méthode de service est donc une API utilisée pour créer des fonctions. Celles-ci sont invoquées au moment de l'exécution. D'autre part, la méthode d'usine n'est pas une autre option pour l'utilisation de l'architecture de service, elle peut effectuer le travail qui est effectué par la méthode de service, mais ce n'est pas comme la méthode de service. La méthode fcatory crée des objets contrairement au service qui est une API pour créer des méthodes. Comprenons-le avec un exemple.

fonction getClass ($ http) {
  this.getClass = fonction fetch () {
    return $ http.get ('class.htm');
  };
}

angulaire
  .module ('app')
  .service ('getClass', getClass);
fonction getClass ($ http) {
  return {// retourne un objet
    fetch: function () {// fonction définie dans cet objet
      return $ http.get ('class.htm');
    }
  };
}
angulaire
  .module ('app')
  .factory ('getClass', getClass);

Réponse 9:

Angular JS travaille sur la séparation des préoccupations. Pour cela, il s'appuie sur une architecture de service. Dans cela, certaines fonctions intégrées ont été fournies comme $ location, $ http etc. Chaque fonction est affectée à une tâche singulière. Ce sont des services intégrés qui sont préfixés par un signe $. Mais si nous voulons créer notre propre service, nous utilisons la méthode de service. La méthode de service est donc une API utilisée pour créer des fonctions. Celles-ci sont invoquées au moment de l'exécution. D'autre part, la méthode d'usine n'est pas une autre option pour l'utilisation de l'architecture de service, elle peut effectuer le travail qui est effectué par la méthode de service, mais ce n'est pas comme la méthode de service. La méthode fcatory crée des objets contrairement au service qui est une API pour créer des méthodes. Comprenons-le avec un exemple.

fonction getClass ($ http) {
  this.getClass = fonction fetch () {
    return $ http.get ('class.htm');
  };
}

angulaire
  .module ('app')
  .service ('getClass', getClass);
fonction getClass ($ http) {
  return {// retourne un objet
    fetch: function () {// fonction définie dans cet objet
      return $ http.get ('class.htm');
    }
  };
}
angulaire
  .module ('app')
  .factory ('getClass', getClass);

Réponse 10:

Angular JS travaille sur la séparation des préoccupations. Pour cela, il s'appuie sur une architecture de service. Dans cela, certaines fonctions intégrées ont été fournies comme $ location, $ http etc. Chaque fonction est affectée à une tâche singulière. Ce sont des services intégrés qui sont préfixés par un signe $. Mais si nous voulons créer notre propre service, nous utilisons la méthode de service. La méthode de service est donc une API utilisée pour créer des fonctions. Celles-ci sont invoquées au moment de l'exécution. D'autre part, la méthode d'usine n'est pas une autre option pour l'utilisation de l'architecture de service, elle peut effectuer le travail qui est effectué par la méthode de service, mais ce n'est pas comme la méthode de service. La méthode fcatory crée des objets contrairement au service qui est une API pour créer des méthodes. Comprenons-le avec un exemple.

fonction getClass ($ http) {
  this.getClass = fonction fetch () {
    return $ http.get ('class.htm');
  };
}

angulaire
  .module ('app')
  .service ('getClass', getClass);
fonction getClass ($ http) {
  return {// retourne un objet
    fetch: function () {// fonction définie dans cet objet
      return $ http.get ('class.htm');
    }
  };
}
angulaire
  .module ('app')
  .factory ('getClass', getClass);