我正在使用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服务?
答案 0 :(得分:33)
静态$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());
}]);
要允许依赖注入,请在类上添加静态$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";
}
}
}
}
就这么简单..