AngularJS和打字稿 - 注射服务 [英] AngularJS and Typescript - Injecting Services

问题描述

我一直在写AngularJS应用一段时间了，但打字稿是新的给我，然后在AngularJS以打字稿将是一个有点不同比我使用。

I have been writing AngularJS apps for awhile now, but Typescript is new to me, and then adding in AngularJS to Typescript is a bit different than I am use to.

不管怎么说，之间有什么区别之二：

Anyways, what is the difference between the two:

app.service（'customerDataService'，Application.Services.CustomerDataService）;

和

app.service（'customerDataService'，['$ HTTP，$ Q'，Application.Services.CustomerDataService]）;

控制器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;
                });
            }
        }
    }
}

应用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]);

他们都似乎工作。你必须明确地定义为注射服务？

They both seem to work. Do you have to explicitly define the injections for a service?

推荐答案

您确实需要注入的服务或其它任何角度实体污染减量的code时（供应商，工厂，控制器等）的依赖。在非缩小的code是这两种方法会奏效。

You do need to inject dependencies for service or any other angular entities (providers, factories, controllers etc..) when minifying the code. In a non minified code yes both approaches will work.

考虑构造函数： -

Consider the constructor:-

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

案例1 [显式依赖注释]： -

Case 1 [Explicit dependency annotation]:-

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

在微小无问题，以及因为即使minifier修改 $ HTTP 说 A 和 $ q 说 b 它仍然可以工作，因为角将在内部使用注释派生从数组您提供定义的依赖关系服务。

No issues in minification as well because even if the minifier changes $http to say a and $q to say b it will still work because angular will internally use annotate to derive the dependencies from the array that you provide defining the service.

案例2 [暗指的依赖]： -

Case 2 [implicit dependencies]:-

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

在此情况下，如果 $ HTTP 是变化的说 A 和 $ Q 更改为 b 角将寻找aProvider和bProvider在实例化的服务，并最终你当缩小的文件上运行的应用程序将失败，因为有没有列为依赖角解析器将解析方法定义和方法的参数名来发现的依赖关系。

In this case if the $http is changes to say a and $q is changed to b angular will look for aProvider and bProvider while instantiating your service and ultimately you app will fail when run with minified files, since there was nothing listed as dependencies angular parser will have to parse the method definition and method's argument names to discover the dependencies.

您可以注入的依赖另一种方法是通过使用函数（构造函数）（不是实例）定义的 $注属性。你可以这样做： -

Another way you can inject dependencies is by using $inject property defined on the function (cTor) (not on the instance). You could do:-

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

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

和刚： -

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

和列出你的依赖，有时也帮助注入的服务参数名使用备用名称。如果你不想做所有这些，仍然与您可以与 NG-注释去minifier有你的code工作 库。

And listing your dependencies sometimes also help use an alternate name for the injected service argument names. If you dont want to do all these and still have your code work with minifier you could go with ng-annotate library.

通过角1.3 RC，有一个选项叫严格二这您可以与您指定 rootElement的执行上的任何服务或将您的应用程序生命周期中被实例化的角度明确的实体注释依赖注入。如果您使用此选项并没有明确注明实例化过程中会失败的任何服务或左右。

With angular 1.3 rc, there is an option called strict-di which you can specify with on your rootElement to enforce explicitly annotated dependency injection on any service or any angular entities that will be instantiated during your app lifetime. If you use this option and any services or so that are not explicitly annotated will fail during instantiation.

这篇关于AngularJS和打字稿 - 注射服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！