AngularJS 和 Typescript - 注入服务

AngularJS and Typescript - Injecting Services

提问by Sam

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.

我已经编写 AngularJS 应用程序有一段时间了，但 Typescript 对我来说是新的，然后将 AngularJS 添加到 Typescript 与我习惯的有点不同。

Anyways, what is the difference between the two:

无论如何，两者之间有什么区别：

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

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

and

和

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

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

Controller TS

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

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

他们两个似乎都有效。您是否必须明确定义服务的注入？

回答by PSL

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

Case 1 [Explicit dependency annotation]:-

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

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

No issues in minification as well because even if the minifier changes $httpto say aand $qto say bit will still work because angular will internally use annotate to derive the dependencies from the array that you provide defining the service.

缩小也没有问题，因为即使缩小器更改$http为说a和$q说它b仍然有效，因为 angular 将在内部使用 annotate 从您提供的定义服务的数组中派生依赖项。

Case 2 [implicit dependencies]:-

案例 2 [隐式依赖]：-

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

In this case if the $httpis changes to say aand $qis changed to bangular 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.

在这种情况下，如果$httpis 更改为 saya并$q更改为bangular 将在实例化您的服务时查找 aProvider 和 bProvider，最终您的应用程序在使用缩小文件运行时将失败，因为没有列出任何依赖项 angular 解析器将必须解析方法定义和方法的参数名称以发现依赖项。

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

注入依赖项的另一种方法是使用$inject定义在函数 (cTor)（而不是实例上）的属性。你可以这样做：-

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

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

and just:-

并且只是：-

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

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-annotatelibrary.

列出您的依赖项有时也有助于为注入的服务参数名称使用替代名称。如果你不想做所有这些并且仍然让你的代码与 minifier 一起工作，你可以使用ng-annotate库。

---

---

With angular 1.3 rc, there is an option called strict-diwhich you can specify with on your rootElementto 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.

在 angular 1.3 rc 中，有一个名为strict-di的选项，您可以使用该选项rootElement在您的应用程序生命周期内对任何服务或将实例化的任何 angular 实体强制执行显式注释的依赖项注入。如果您使用此选项，并且任何未显式注释的服务等将在实例化期间失败。

回答by Pranay Dutta

both are just the same but during minification in your first option ur code will be busted since minification logic is going to change the name of dependencies so in the second option u give an array of dependencies which the minification algo wont touch

两者都是一样的，但是在您的第一个选项中，您的代码将被破坏，因为缩小逻辑将更改依赖项的名称，因此在第二个选项中，您提供了一个缩小算法不会触及的依赖项数组