带有依赖注入和缩小的打字稿中的角服务

Posted 2023-03-13

【中文标题】带有依赖注入和缩小的打字稿中的角服务

【英文标题】：Angular service in typescript with dependency injection and minification

【发布时间】：2013-10-16 15:21:45

【问题描述】：

我现在正试图让我的头脑围绕 angularjs。我目前正在寻找服务，我也在使用 typescript 来编写代码。

现在从网络上的示例中，我看到人们在 typescript 中使用类似下面的东西来提供服务。

class Service

    constructor( private $http: ng.IHttpService )
    
    

    public MyMethod()
    
        this.$http.get( "/" )
            .success( null )
            .error( null );
    

现在，如果将其缩小，我会从构造函数中丢失$http，并且 angular 需要变量名。所以我检查了一下，发现我可以使用 $inject 而不是构造函数，但这也会遇到同样的缩小问题。

人们如何在打字稿上下文中处理缩小和角度问题？我正在努力寻找一些关于如何处理的可靠文档。对我来说，在现代 api 中出现这些问题似乎很奇怪，所以我一定在某个地方遗漏了一些东西。

【问题讨论】：

您可以在 uglifyid 之前使用“ngAnnotate”模块进行 gulp，这样可以防止 Angular 中的依赖关系丢失。例如：gulp.src(paths.ts).pipe(ts(ts.createProject('tsconfig.json'))).pipe(concat('app.min.js')).pipe(ngAnnotate(remove: true,add: true,single_quotes: true )).pipe(uglify()).pipe(gulp.dest('www/js/'))

【参考方案1】：

只使用$inject 语法。例如：

class Service

    static $inject = ['$http'];    
    constructor( private $http: ng.IHttpService )
    
    

    public MyMethod()
    
        this.$http.get( "/" )
            .success( null )
            .error( null );
    

PS：我做了一个关于这个主题的详细视频：http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

【讨论】：

但是这样，每个Service 实例都有自己的$http 引用。在 vanilla javascript 中，angular.factory 方法通常用于访问闭包中的此类依赖项。为了在 Typescript 中实现这一目标，您会建议哪些最佳实践？

服务是单例的。只会有一个实例

Javascript 不知道类（或单例），AngularJS 也不知道。服务可以是任何东西。多年来，我一直在提供可实例化的“类”作为服务。

是的，但是 AngularJS 会在任何需要的地方进行实例化并注入相同的实例。

【参考方案2】：

目前官方的 TypeScript 编译器仍然不会生成可在运行时用于 DI 系统的接口元数据。关于发射器可扩展性here 存在问题。 同时，我创建了一个 AngularJS 1.3 应用程序的示例项目（以及发出接口元数据的 TS 编译器的定制版本），该应用程序提供装饰器以在应用程序模块中注册组件并在运行时使用类元数据注入依赖项。你可以给看看here。