在AngularJS中使用ES6

本篇记录一些AngularJS结合使用ES6的各种写法。

ES6中module的导出导入

class MainController {
    constructor(searchService){
        this.searchService = searchService;
    }

    search(){
        this.searchService
            .fetch(this.searchTerm)
            .then(response => {
                this.items = resposne.data.items;
            })
    }
}

export {MainController}

如何把module中的Controller注册进module呢？

import {MainController } from './MainController';
import {searchService } from './SeachService';

angualr
    .module('app',[])
    .controller('mainController', MainController)
    .service('searchService', searchService);

ES6中的继承

class PageController{
    constructor(name){
        this.name = name;
    }

    sayHello(){
        return 'Hello ' + this.name;
    }
}

export {PageController}

在另外一个文件中：

import {PageController} from './PageController';

class ProductPageController extends PageController {
    constructor(){
        super('jack');
    }
}

export {ProductPageController}

最后注册到module中去：

angular
    .module('app',[])
    .controller('ProductPageController', ProductPageController);

ES6中Service和Controller的写法

class UserService{
    constructor($http){
        this.$http = $http;
    }

    getFullName(){
        return this.$http.get('api/user/details');
    }
}

class MyController{
    //注意：定义时的class名是UserService，正真的名称是在service('realname',UserServie)中定义的
    constructor(userService){
        userService.getFullName().then(result => this.userName = result.fullName);
    }
}

angular.module('app')
    .service('userService', UserService)
    .controller('MyController', MyController);

ES6中Providers的写法

class MyProvider{
    constructor(){
        this.apiPath = 'default/api';
    }
    setApiPath(value){
        this.apiPath = value;
    }
    $get($http){
        return {
            getThings: () => $http.get(this.apiPath);
        }
    }
}

ES6的Provider中依赖的注入是写在$get()中的，不能在constructor中注入。Provider中必须有$get()方法。

ES6中Factory的写法

class Thing{
    constructor(){
        console.log('create the thing');
        showMsg();
    }
    showMsg(){
        console.log('some msg');
    }
}

class ThingFactory{
    constructor($timeout){
        this.$timeout = $timeout;
    }

    createThing(){
        return this.$timeout(() => new Thing(),1000);
    }
}

如何往module中注册呢？

● 第一种写法

angular.module('app')
    .factory('thingFactory', () => new ThingFactory());

以上写法是错误的，因为$timeout还没有注入进去。可以这样写。

angular.module('app')
    .factory('thingFactory', ['$timeout', ($timeout) => new ThingFactory($timeout)]);

● 第二种写法

但，以上的写法也不是最理想的。最好是写在类中。

class ThingFactory{
    constructor($timeout){
        this.$timeout = $timeout;
    }

    createThing(){
        return this.$timeout(() => new Thing(),1000);
    }
}

ThingFactory.$inject = ['$timeout'];

然后，

angular.module('app')
    .factory('thingFactory', () => new ThingFactory());

● 第三种写法

class ThingFactory{
    constructor($timeout){
        this.$timeout = $timeout;
    }

    createThing(){
        return this.$timeout(() => new Thing(),1000);
    }
}

ThingFactory.$inject = ['$timeout'];

var constructorFn = ThingFactory;

//args = ['$timeout']
var args = constructorFn.$inject;

//根据参数创建ThingFactory实例，任意多的参数
var factoryFunction = (...args) => {
    return new constructorFn(...args);
}

//['$timeout', ($timeout) => new ThingFactory($timeout)]
var factoryArray = args.push(factoryFunction);

angular.module('app')
    .factory('thingFactory', factoryArray);

ES6中Directive的写法

class MyDirective{
    constructor($interval){
        this.template = '<div>I\'m a directive</div>';
        this.restrict = 'E';
        this.scope = {};
        this.$interval = $interval;
    }

    compile(tElement){
        tElement.css('position','absolute');
    }

    link(scope, element){
        this.$interval(() => this.move(element),1000);
    }

    move(element){
        element.css('left', (Math.random() * 500) + 'px');
        element.css('top', (Math.random() * 500) + 'px');
    }
}

以上，如果同时使用compile和link方法，link方法应该是compile的返回值。

compile(tElement){
    tElement.css('position','absolute');
    return this.link;
}

以上,当angular调用this.link方法，将不会在MyDirective的当前上下文中，调用this.$interval(() => this.move(element),1000);会报undefined类型错误。

如果改成这样：

compile(tElement){
    tElement.css('position','absolute');
    return (scope, element) => {
        this.$interval(() => this.move(element),1000);
    };
}

这里，当使用=>后，调用this.$interval(() => this.move(element),1000);方法能保证还MyDirective所在的当前上下文中。

还可以这么写：

compile(tElement){
    tElement.css('position','absolute');
    return this.link.bind(this);
}

link(scope, element){
    this.$interval(() => this.move(element),1000);
}

但， 以上所有的做法都必须调用compile方法，而在实际场景中，调用compile方法不是必须的。最好这样写：

var constructorFn = MyDirective;

//是否有compile方法
if (!constructorFn.prototype.compile) {
    // 如果没有，通过原型创建compile方法
    constructorFn.prototype.compile = () => {};
}

var originalCompileFn = _cloneFunction(constructorFn.prototype.compile);

//重写compile方法
_override(constructorFn.prototype, 'compile', function () {
    return function () {

        //先调用原先的compile方法
        originalCompileFn.apply(this, arguments);

        //如果Directive包含link方法再执行link方法，绑定正确的上下文
        if (constructorFn.prototype.link) {
            return constructorFn.prototype.link.bind(this);
        }
    };
});

往module注册controller、factory、provider等的帮助方法

Michael Bromley还专门写了一个帮助方法，在这里。

大致这样使用：

class MyAngularComponent {
    /*@ngInject*/
    constructor(dependency1, dependency2) {
        this.dependency1 = dependency1;
        // stuff happens here
    }
    someMethods() {
        this.dependency1.doThatThing();
        // more stuff here
    }
}

register('app')
    .controller('MyController', MyAngularComponent)
    .service('myService', MyAngularComponent)
    .provider('myOtherService', MyAngularComponent)
    .factory('myFactory', MyAngularComponent)
    .directive('myDirective', MyAngularComponent);

参考资料：
http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html
http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x
https://github.com/timroes/angular-es6-sample