// DatePickerCtrl.js

export default class DatePickerCtrl {

	$onInit() {

		this.date = `${this.year}-${this.month}`;

	}

	getMonth() {

		...

	}

	getYear() {

		...

	}

}

注意，這里先寫了controller而不是link/compile方法，原因在于一個數據驅動的組件體系下，我們應該盡量減少對DOM操作，因此理想狀態下，組件是不需要link或compile方法的，而且controller在語義上更貼合mvvm架構。

import template from './date-picker-tpl.html';

import controller from './DatePickerCtrl';

const ddo = {

	restrict: 'E',

	template, //es6對象簡寫

	controller,

	controllerAs: '$ctrl',

	bingToController: {

		year: '=',

		month: '='

	}

};

export default angular.module('components.datePicker', [])

    .directive('dataPicker', ddo)

    .name;

在整個系統設計中只有index.js（定義模塊的地方）是框架可識別的，其它地方的業務邏輯都不應該出現框架的影子，這樣方便移植。

3、component

1.5版本還給組件定義了相對完整的生命周期鉤子，而且提供了單向數據流的方式，以上例子可以寫成下面這樣子：

//DirectiveController.js

export class DirectiveController {

	$onInit() {

	}

	$onChanges(changesObj) {

	}

	$onDestroy() {

	}

	$postLink() {

	}

}

//index.js

import template from './date-picker-tpl.html';

import controller from './DatePickerCtrl';

const ddo = {

	template,

	controller,

	bindings: {

		year: '<',

		month: '<'

	}

};

export default angular.module('components.datepicker', [])

    .component('datePicker', ddo)

    .name;

4、服務

export default class ServiceA {}

serviceA的模塊包裝器moduleA的實現

import ServiceA from './service/a';

export angular.module('moduleA', [])

    .service('ServiceA', ServiceA)

    .name;

factoryA的實現，factory/a.js

import EntityA from './model/a';

export default function FactoryA {

	return new EntityA();

}

factoryA的模塊包裝器moduleA的實現

import FactoryA from './factory/a';

export angular.module('modeuleA', [])

    .factory('FactoryA', FactoryA)

    .name;

對于依賴注入我們可以通過以下方式來實現：

export default class ControllerA {

	constructor(ServiceA) {

		this.serviceA = ServiceA;

	}

}

ControllerA.$inject = ['ServiceA'];

import ControllerA from './controllers/a';

export angular.module('moduleA', [])

    .controller('ControllerA', ControllerA);

對于constant和value，可以直接使用一個常量來代替。

export const VERSION = '1.0.0';

5、filter

import { dateFormatter } './transformers';

export default class Controller {

	constructor() {

		this.data = [1,2,3,4];

		this.currency = this.data

		    .filter(v => v < 4)

		    .map(v => '$' + v);

		this.date = Date.now();

		this.today = dateFormatter(this.date);

	}

}

6、消除$scope，淡化框架概念

<div ng-controller="TestCtrl as testCtrl">

    <input ng-model="testCtrl.aaa">

</div>

xxx.controller("TestCtrl", [function() {

    this.aaa = 1;

}]);

實際上框架會做一些事情：

$scope.testCtrl = new TestCtrl();

對于這一塊，把那個function換成ES6的類就可以了。

2、依賴屬性的計算

$scope.$watch("a", function(val) {

    $scope.b = val + 1;

});

我們可以直接使用ES5的setter和getter來定義就可以了。

class A {

    set a(val) { //a改變b就跟著改變

        this.b = val + 1;

    }

}

如果有多個變量要觀察，例如

$scope.$watchGroup(["firstName", "lastName"], function(val) {

    $scope.fullName = val.join(",");

});

我們可以這樣寫

class Controller {

    get fullName() {

        return `${this.firstName} ${this.lastName}`;

    }

}

html

<input type="text" ng-model="$ctrl.firstName">

<input type="text" ng-model="$ctrl.lastName">

<span ng-bind="$ctrl.fullName"></span>

3、事件冒泡和廣播

4、指令中$scope

7、總結

參考鏈接：