angularjs - 使用 ES6/ES7 的 Angular 1.4

Question

我正在开始一个新项目，并希望将 Angular 1.4 与 ES6 类一起用于控制器、服务和指令。我能找到的最好看的代码倾向于使用某种装饰器，比如@Component，但这似乎是 ES7 的一个实验性特性。对于现实世界的 Angular 1.4 应用程序，ES6 中的控制器、服务和指令有哪些示例？我的项目设置为使用 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);