web-dev-qa-db-fra.com

AngularJS et TypeScript - Injection de services

J'écris des applications AngularJS depuis quelque temps déjà, mais TypeScript est nouveau pour moi, puis l'ajout de AngularJS à TypeScript est un peu différent de celui auquel je suis habitué.

Quoi qu'il en soit, quelle est la différence entre les deux:

app.service('customerDataService', Application.Services.CustomerDataService);

et

app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);

Contrôleur TS 

module Application {
    export module Services {
        export interface ICustomerDataService {
            getCustomer(id: number): ng.IPromise<Models.ICustomer>;
        }

        export class CustomerDataService implements ICustomerDataService {
            constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
            }

            getCustomer(id: number): ng.IPromise<Models.ICustomer> {
                return this.$http.get('data/Customer.json').then((response) => {
                    return response.data;
                });
            }
        }
    }
}

App TS 

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

app.value('config', new Application.ApplicationConfig());

app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
app.service('customerDataService', Application.Services.CustomerDataService);

app.controller('DefaultController', ['$scope','config', 'customerDataService', Application.Controllers.DefaultController]);

Ils semblent tous les deux fonctionner. Devez-vous définir explicitement les injections pour un service?

javascriptangularjstypescriptangularjs-service
10
Sam

Vous devez injecter des dépendances pour le service ou toute autre entité angulaire (fournisseurs, usines, contrôleurs, etc.) lors de la réduction du code. Dans un code non spécifié, oui, les deux approches fonctionneront.

Considérez le constructeur: -

 constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
 }

Cas 1 [Annotation de dépendance explicite]: -

app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);

Pas de problème dans la minification également, car même si le minificateur change $http pour dire a et $q pour dire b, il fonctionnera toujours car angular utilisera annotate en interne pour dériver les dépendances du tableau que vous fournissez en définissant le service.

Cas 2 [dépendances implicites]: -

app.service('customerDataService', Application.Services.CustomerDataService);

Dans ce cas, si le $http est modifié pour indiquer a et que $q est remplacé par b angular recherchera aProvider et bProvider lors de l'instanciation de votre service et que, finalement, votre application échouera si elle est exécutée avec des fichiers minifiés, car rien ne figure dans la liste des dépendances. avoir à analyser la définition de la méthode et les noms d’argument de la méthode pour découvrir les dépendances.

Une autre façon d'injecter des dépendances consiste à utiliser la propriété $inject définie sur la fonction (cTor) (pas sur l'instance). Vous pourriez faire:-

    export class CustomerDataService implements ICustomerDataService {
        static $inject = ['$http', '$q']; //<-- Inject here

        constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
      }
      ....

et juste:-

   app.service('customerDataService', Application.Services.CustomerDataService);

Et lister vos dépendances aide parfois aussi à utiliser un autre nom pour les noms d'argument de service injectés. Si vous ne voulez pas faire tout cela et que votre code fonctionne toujours avec minifier, vous pouvez utiliserng-annotatelibrary.

Avec angular 1.3 rc, il existe une option appelée strict-di que vous pouvez spécifier avec votre rootElement pour appliquer une injection de dépendance explicitement annotée à tout service ou à toute entité angulaire qui sera instancié pendant la durée de vie de votre application. Si vous utilisez cette option, tous les services qui ne sont pas explicitement annotés échoueront lors de l'instanciation.

15
PSL

les deux sont identiques mais lors de la minification dans votre première option, votre code ur sera dérouté car la logique de minification va changer le nom des dépendances, donc dans la deuxième option, donnez un tableau de dépendances que la minification alo touchera

0
Pranay Dutta