Angular 1.4 使用 ES6/ES7

Question

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

Answer 1

用ES6类和Angular1.x构建项目并不为时过早。如果您要开始一个新项目，我建议您使用带有 Angular 1.4 或 1.3 的 TypeScript 或 ES6。然后，您可以将其转换为 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

Angular 1.4 using ES6/ES7

angularjs

ecmascript-6

ecmascript-2016