在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