如何使用不污染全局范围的TypeScript类定义AngularJS服务?

时间:2013-10-18 10:53:21

标签: angularjs global-variables typescript angularjs-service

我正在使用AngularJS和TypeScript。我想使用Typescript类实现AngularJS服务,如下所示:

class HelloService {
    public getWelcomeMessage():String {
        return "Hello";
    }
}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new HelloService();
});

这将编译为以下javascript代码:

var HelloService = (function () {
    function HelloService() {
    }
    HelloService.prototype.getWelcomeMessage = function () {
        return "Hello";
    };
    return HelloService;
})();

angular.module('app.services.helloService', []).factory('helloService', function () {
    return new HelloService();
});

这会使用变量HelloService污染全局命名空间,这显然是我不想要的。 (使用Chrome的控制台,我确认HelloService是一个对象。)如何解决/避免此问题?

我尝试了显而易见的事情:

angular.module('app.services.helloService', []).factory('helloService', function () {
    class HelloService { ...} 
    return new HelloService();
});

但是这给了我一个编译错误(“意外的令牌;预期的'陈述'。”。)。

我能想到的一个可能的解决方案是以某种方式使用TypeScript的导入和导出,而这又将使用RequireJS。这可能会将HelloService包装在define函数中,从而避免使用HelloService污染全局范围。但是,我现在不想在我的AngularJS应用程序中使用RequireJS,因为我认为AngularJS足以供我使用,并且增加了复杂性。

所以,我的问题是,如何使用不会污染全局范围的TypeScript类来定义AngularJS服务?

4 个答案:

答案 0 :(得分:33)

2016-05-06:使用ES6风格模块的新示例

静态$inject数组和构造函数与前一个示例保持不变。

唯一的变化是将类拆分为多个文件,并使用ES6模块来引入类定义。

<强> /lib/HelloService.ts:

export class HelloService {
    public getWelcomeMessage():String {
        return "Hello from HelloService";
    }
}

<强> /lib/AnotherService.ts:

import {HelloService} from './HelloService';

/**
 * Service that depends on HelloService.
 */
export class AnotherService {

    // Define `HelloService` as a dependency.
    static $inject = ['HelloService'];
    constructor(
        // Add the parameter and type definition.
        public HelloService: HelloService
    ){}

    public getWelcomeMessage():String {
        // Access the service as: `this.HelloService`
        // Enjoy auto-completion and type safety :)
        var helloMsg = this.HelloService.getWelcomeMessage();
        return "Welcome from AnotherService, " + helloMsg;
    }
}

<强> /index.ts:

// Using the services.
import {HelloService} from './lib/HelloService';
import {AnotherService} from './lib/AnotherService';

angular.module('HelloApp', [])
    .service('HelloService', HelloService)
    .service('AnotherService', AnotherService)
    .run(['AnotherService', function(AnotherService: AnotherService){
        console.log(AnotherService.getWelcomeMessage());
    }]);

上一个答案:使用名称空间

Steve Fenton's answer构建:

要允许依赖注入,请在类上添加静态$inject数组。

请参阅Angular $injector documentation了解$inject数组的工作原理。

依赖项将按照数组给出的顺序注入到构造函数中(并使其适用于缩小)。

依赖注入示例:

namespace MyModule {
    /**
     * Angular Service
     */
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello from HelloService";
        }
    }

    /**
     * Service that depends on HelloService.
     */
    export class AnotherService {

        // Define `HelloService` as a dependency.
        static $inject = ['HelloService'];
        constructor(
            // Add the parameter and type definition.
            public HelloService: MyModule.HelloService
        ){}

        public getWelcomeMessage():String {
            // Access the service as: `this.HelloService`
            // Enjoy auto-completion and type safety :)
            var helloMsg = this.HelloService.getWelcomeMessage();
            return "Welcome from AnotherService, " + helloMsg;
        }
    }
}


// Using the services.
angular.module('app.services.helloService', [])
    .service('HelloService', MyModule.HelloService)
    .service('AnotherService', MyModule.AnotherService)
    .run(['AnotherService', function(AnotherService: MyModule.AnotherService){
        console.log(AnotherService.getWelcomeMessage());
    }]);

答案 1 :(得分:14)

我应该提供我实际上做的事情:

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    angular.module('app.services.helloService', []).factory('helloService', () => {
        return new HelloService();
    });
}

通过这种方式,我可以使用

return new HelloService();

而不是

return new MyModule.HelloService();

答案 2 :(得分:6)

我有两个解决方案,第一个给你基于类的语法,第二个在全局范围内绝对没有...

您可以通过仅向全局范围添加单个句柄来稍微妥协(如果您希望避免将多个类放在全局范围内,这实际上适用,因为目前只有一个类)。

以下代码仅在全局范围内保留模块。

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    export class AnotherService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new MyModule.HelloService();
});

angular.module('app.services.anotherService', []).factory('anotherService', () => {
    return new MyModule.AnotherService();
});

或者,要在全局范围内保留一个东西,可以避免使用类语法并使用“普通旧JavaScript”:

angular.module('app.services.helloService', []).factory('helloService', () => {
    var HelloService = (function () {
        function HelloService() {
        }
        HelloService.prototype.getWelcomeMessage = function () {
            return "Hello";
        };
        return HelloService;
    })();

    return new HelloService();
});

答案 3 :(得分:-1)

这是我关注的方法:

module HelperServices {
    export class helloService {
       sayHelloWorld: () => string;
        constructor() {
            this.sayHelloWorld = () => {
                return "Hello World";
            }
        }
    }
}

就这么简单..