// DatePickerCtrl.js
export default class DatePickerCtrl {$onInit() {this.date = `${this.year}-${this.month}`;}getMonth() {...}getYear() {...}
}

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;

3、component

//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 {}

import ServiceA from './service/a';export angular.module('moduleA', []).service('ServiceA', ServiceA).name;

import EntityA from './model/a';export default function FactoryA {return new EntityA();
}

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);

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();

2、依赖属性的计算

$scope.$watch("a", function(val) {$scope.b = val + 1;
});

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}`;}
}

<input type="text" ng-model="$ctrl.firstName">
<input type="text" ng-model="$ctrl.lastName"><span ng-bind="$ctrl.fullName"></span>

3、事件冒泡和广播

4、指令中$scope

7、总结