Question

我正在开始一个新项目，并希望将Angular 1.4与ES6类用于控制器，服务和指令。我能找到的最好看的代码倾向于使用某种类型的装饰器，比如@Component，但这似乎是ES7的一个实验性功能。 ES6中的控制器，服务和指令有哪些实例可用于实际的Angular 1.4应用程序？我的项目设置为使用Babel进行转换。

Answer 1

使用Angular 1.x的ES6类构建项目还为时过早。如果您要开始一个新项目，我建议使用TypeScript或ES6和Angular 1.4或1.3。然后，您可以将其转换为ES5，这是当今所有浏览器都支持的JavaScript版本。

TypeScript是ES6，添加了装饰器和类型注释。

您见过的@Component装饰器示例可能适用于Angular 2.这些是TypeScript 1.5的一项功能。你今天可以使用装饰器。也就是说，你可能需要编写自己的装饰器，转换成Angular 1.4所期望的。你今天可能没有装饰者。

使用ES6或TypeScript，您的Controller和Service类应如下所示：

export class LoginController {

    static $inject = ['dataApi'];
    constructor(private dataApi: DataApi) {}

    submit(login: LoginRequest) {
        this.dataApi.login(login);
    }  

}
loginModule.controller('LoginController', LoginController);

一项服务：

export class DataApi {

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

    login(login: LoginRequest) {
        return this.$http.post('/api/login', login);
    }
}
loginModule.service('dataApi', DataApi);

在此示例中，LoginRequest是在别处定义的数据传输对象。

更新：指令

指令不是类，但如果您愿意，可以将它们创建为类。我更喜欢将它们创建为factories。

var DIRECTIVE = 'mmTitle';

mmTitle.$inject = ['$window'];
function mmTitle($window: ng.IWindowService, $parse: ng.IParseService): ng.IDirective {

    return {
        restrict: 'A',
        link: (scope, element, attrs) => {

            $window.document.title = $parse(attrs[DIRECTIVE])(scope);

            attrs.$observer(DIRECTIVE, value => $window.document.title = value);
        }
    }
}    
loginModule.directive(DIRECTIVE, mmTitle);

Angular 1.4使用ES6 / ES7

1 个答案: