About me

汤桂川

• Github : @lightningtgc
• Weibo : @汤桂川_gc
• Zhihu   : @汤桂川
• Email   :  tangguichuan@gmail.com

爱Coding，也爱Traveling

Angular 2 前世今生

• 2009年第一版 0.X.X
• 2012.06  1.0.0
• 2016.02  1.5.0 (component)
• angularjs.org  vs  angular.io

• 2014年宣布开发2.0
• 2015.02   Alpha.1  -  55
• 2015.12   Beta.0
• 2016.03.19 Beta.11 & Build

• SPEED(change detection,启动时间)

• CROSS PLATFORM(worker,server,ionic)

• Mobile (Android 4.1,  iOS 7.1，IE9+)

• Flexible (TypeScript/ES6, ES5，dart)

New Feature:

Angular 1 版本:

Angular Dart 版本:

Angular 2 版本:

语法 -  (eg: 按一定格式输出今天的日期)

import { bootstrap } from 'angular2/platform/browser';
import { Component, Output, AfterViewInit } from 'angular2/core';
import { LoggerService }  from './logger.service';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES, HomeComponent],
  providers: [LoggerService, ROUTER_PROVIDERS],
  template: `
    <a [routerLink]="['Home']">Home</a>
    <router-outlet></router-outlet>
    <!--<form (submit)="addName()" *ngIf="canAddName">
       <input [(ngModel)]="newName" [style.color] = "isSpecial ? 'red' : 'green'">
       <img [src]="addImageUrl" >
    </form>
    <p *ngFor="#name of personNames">{{name}}</p> -->
  `,
  styles: ['p{padding: 8px;}']
})
@RouteConfig([{ path: '/home', name: 'Home',  component: HomeComponent }])
export class AppComponent implements AfterViewInit{
    private _logger:LoggerService;
    static addImageUrl = '';
    @Output('everyFiveSeconds') five5Secs = new EventEmitter();
    constructor(logger:LoggerService){
        this._logger = logger;
        setInterval(() => this.five5Secs.emit("event"), 5000);
    }
    ngAfterViewInit() {
        this._logger.log(`After View Init.`);
    }
}
bootstrap(AppComponent).catch(err => console.error(err));

ElementRef in Angular@2.0.0-beta.0 and Angular@ElementRef 2.0.0-beta.1

import { Directive, ElementRef, Renderer } from 'angular2/core';

@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective { 

  constructor(el: ElementRef, renderer: Renderer) {
        
       // renderer.setElementStyle(el, 'backgroundColor', 'yellow');
       // renderer接口更改了
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }

}

ECMAScript 6

-  2015. 06. 17 

ECMAScript 6 在浏览器的实现情况

数据来源：http://kangax.github.io/compat-table/es6/

Modules (1/4)

// 模块导入
import { lightRed } from './colors';
import { Component } from 'angular2/core';
import * as UserModule from './user.module';

let userCtrl = UserModule.ctrl;

// 模块导出
export { userCtrl };
export class App{
  constructor() {}
};
export default lightRed;

• ng2 is modular
• vs CommonJS
• 循环依赖？
• Native, HTTP 2
• System.js

Classes (2/4)

class Animal {
  constructor(name) {
    this.name = name;
  }
  say(msg){
    alert(`${this.name} says ${msg}`);
  }
  static staticMethod() {
    return '不能被实例继承，子类可继承父类';
  }
}
class Panda extends Animal {
  say(msg = 'hi') {
    super(msg); // 调用父类say方法
  }
}
let panda = new Panda('Tuan');
panda.say(); // 'Tuan says hi'
panda.say('Ooooh'); // 'Tuan says Ooooh'

• constructor
• this
• default
• extends
• super
• 静态方法

IN TypeScript 

Template String (3/4)

Notice？

// 多行字符串，引号
var multiStr = `In 'JavaScript' this is
                not legal.`;


// 字符串插值
var name = "ITA1024", time = "today";
console.log(`Hello ${name},
how are you ${time}?`);

Arrows (4/4)

const name = 'object name';
let obj = {
  name,
  init() {
    // Lexical this
    $.on('click', () => this.name);
  }
};

ES6Features

查看详情:  ES6features(中文版)

• let + const - 块级作用域
• destructuring - 解构
• arrows - 箭头函数
• classes - 类
• modules - 模块
• template strings 
• default + rest + spread
• iterators + for..of - 遍历器
• generators函数
• promises对象

• map + set
• weakmap + weakset
• enhanced object literals    - 增强对象字面量
• proxies - 代理
• symbols - 第七种数据类型
• binary and octal literals
• unicode - 字符串扩展
• reflect api - 反射api
• tail calls - 尾调用

TypeScript

TypeScript

Type  +  Java  Script

Decorator - 修饰器

@Component

@Directive

@Animation

@Inject

@InjectLazy

@Optional

@Host

@Parent

@Pipe

@Property

@Event

@RouteConfig

@HostBinding

@HostEvent

@ContentChildren

@ViewChild

@ViewChildren

@Input

@Output

@Attribute

@CanActivate

学习资源：

• TS HandBook
• learn-typescript

• TS Github
• 特性路线图

component 组件

• Web Component
• 组件化开发
• Tree - 分治
• 相互独立

HTML

CSS

JS

import { Component } from 'angular2/core';
import {AppHeadComponent} from './app-head.component';
import { LogService } from './log.service';

@Component({
  selector: 'my-app',
  providers: [ LogService ],
  directives: [ AppHeadComponent ],
  pipes: [], 
  styles: [`
    .main-body { width: 60px; }    
  `], 
  template: `
    <my-app-head [title]="titleStr"></my-app-head>
    <div class="main-body">
        Test..
    </div>
  `
});
export class MyAppComponent {
    titleStr = 'My App';
    constructor(private _log: LogService){ }
}

• @Component
• metaData
• 多组件依赖

组件树工作机制

[property]="expression"

@Input()

(event)="update()"

@Output()

根组件

子组件

子组件

孙组件

组件的生命周期

Hooks：

• OnInit
• OnDestroy
• DoCheck 
• OnChanges 
• AfterViewInit
• AfterViewChecked
• AfterContentInit
• AfterContentChecked

import { Component } from 'angular2/core';
import {AppHeadComponent} from './app-head.component';
import { LogService } from './log.service';

@Component({
  selector: 'my-app',
  providers: [ LogService ],
  directives: [ AppHeadComponent ],
  pipes: [], 
  styles: [`
    .main-body { width: 60px; }    
  `], 
  template: `
    <my-app-head [title]="titleStr"></my-app-head>
    <div class="main-body">
        Test..
    </div>
  `
});
export class MyAppComponent {
    titleStr = 'My App';
    constructor(private _log: LogService){ }
}

Dependency Injection 依赖注入

interfaces， no implement

组件

服务接口

服务实现

实现

提供给

依

赖

于

// log.service.ts
import {Injectable} from 'angular2/core';

@Injectable()
export class LogService{

  log(msg:string){
    console.log(msg)
  }
}

Services

-

服务

全局注入（不推荐）

bootstrap(AppComponent, [LogService]); 

延伸：

指令注入指令：

@ContentChildren，@ViewChildren

@Component({selector: 'tab', template: 'tab.html'})
class Tab {
  @ContentChildren(Pane) panes: QueryList<pane>;
   
  ngAfterContentInit() {
    // contentChildren is set
  }
}

@Component({selector: 'pane', template: 'pane.html'})
class Pane {
}

 see: viewchildren-contentchildren 

difference-viewproviders

可提供的服务 Provider：类，值，工厂

• useExisting：新旧共存，起别名
• multi: 多依赖，[ ]

var injector = Injector.resolveAndCreate([
  new Provider("message", { useValue: 'Hello' })
]);
expect(injector.get("message")).toEqual('Hello');

// 可用provide简写new Provider,metadata
providers:[provide('tokenStr', {useValue: 'CONFIG'})]

import { Component } from 'angular2/core';
import {AppHeadComponent} from './app-head.component';
import { LogService } from './log.service';

@Component({
  selector: 'my-app',
  providers: [ LogService ],
  directives: [ AppHeadComponent ],
  pipes: [], 
  styles: [`
    .main-body { width: 60px; }    
  `], 
  template: `
    <my-app-head [title]="titleStr"></my-app-head>
    <div class="main-body">
        Test..
    </div>
  `
});
export class MyAppComponent {
    titleStr = 'My App';
    constructor(private _log: LogService){ }
}

Template 模板

• PROPERTY BINDINGS - 属性绑定

• EVENT BINDINGS - 事件绑定

• INTERPOLATION - 插值

<div [textContent]="interpolate(['My name is'], [name])"></div>

// 语法糖
<div>My name is {{name}}</div>

<todo-cmp [model]="todo" (complete)="onComplete(todo)"></todo-cmp>

@Component({
    // inputs: ['model'],
    // outputs: ['complete'],
    selector: 'todo-cmp'
})
class TodoCmp {
  @Input() model;
  @Output() complete = new EventEmitter(); // emit() subscibe

  constructor(){ }
}

inputs vs @Input ?

TodoCmp 内部：

[],() vs 数据流动机制  (~~组件树)

input

output

双向绑定 - In Forms

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event"></input>

// 语法糖
<input [(ngModel)]="todo.text"></input>

Pipe  - 过滤加工器

<p>Your birthday is {{ birthday | date:'shortDate'}} /p>

以上将输出 'Your birthday is 9/3/1999'

• 链式调用Pipes

• 自定义Pipes

模板内置指令

NgClass, NgStyle, NgIf, NgSwitch, NgFor

ANGULAR 1 TO 2 QUICK REFERENCE

Tools

工具

Angular 2 Style Guide

https://github.com/mgechev/angular2-style-guide

Debug

Angular 2.0 Batarangle 

- chrome extension

• Hot loader - 热加载器：mgechev/angular2-hot-loader

• Angular 2与Redux：wbuchwalter/ng2-redux

Scaffold - 脚手架

• angular/angular2-seed
• mgechev/angular2-seed  (QuickStart with gulp)
• angular2-webpack-starter  (wepack)
• gf-rd/gf-angular2-quickstart

ngUpgrade

升级

UPGRADING FROM 1.X

• 准备工作

  1. Following The Angular Style Guide

  2. Using a Module Loader

  3. Migrating to TypeScript

  4. Using Component Directives

• 使用更新适配器进行更新

  1. How The Upgrade Adapter Works

  2. Bootstrapping Hybrid Angular 1+2 Applications

  3. Using Angular 2 Components from Angular 1 Code

  4. Using Angular 1 Component Directives from Angular 2 Code

  5. Projecting Angular 1 Content into Angular 2 Components

  6. Transcluding Angular 2 Content into Angular 1 Component Directives

  7. Making Angular 1 Dependencies Injectable to Angular 2

  8. Making Angular 2 Dependencies Injectable to Angular 1

import {UpgradeAdapter} from 'angular2/upgrade';

var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);

adapter.bootstrap(document.body, ['myApp']);

混合NG1,NG2代码

资源：

• angular1 和 angular2 共存
• upgrading-apps-to-angular-2-using-ngupgrade
• ng-forward 解决方案
• ES6化的Angular1.x（汤桂川QCon分享）

Change Detection

Zone.js

造成变化的因素：

怎么通知变化了？

dirty:scope.$apply()

monkey-patched (内置对象扩展) in zone

• Zone.setInterval()
• Zone.alert()
• Zone.prompt()
• Zone.requestAnimationFrame()
• Zone.addEventListener()
• Zone.removeEventListener()

zone.fork({
  beforeTask: function () {...},
  afterTask: function () {...},
  ...
})
.run(() => {
  foo();
  setTimeout(doSth, 0);
  bar();
});

NgZone

• onTurnStart() 
• onTurnDone() 
• onEventDone()
• based on Observables

this.zone.onTurnDone
  .subscribe(() => {
    this.zone.run(() => this.tick() })
  })
tick() {
  this.changeDetectorsRefs
    .forEach((ref) => ref.detectChanges())
}

如何变化

根组件

子组件

子组件

孙组件

孙组件

孙组件

孙组件

发生变化

孙组件

• 自上而下
• 几毫秒做成百上千次检查
• VM优化

根组件

子组件

子组件

孙组件

孙组件

孙组件

孙组件

发生变化

孙组件

智能的变化检测

@Component({
  template: `
    <h2>{{someData.name}}</h2>
    <span>{{someData.email}}</span>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class CardCmp {
  @Input() someData;
}

还可以避免 input不变的 子组件树 的更新

根组件

子组件

子组件

孙组件

孙组件

孙组件

孙组件

发生变化

孙组件

onPush

Observables

订阅模式 (emit, subscribe)

@Component({
  template: '{{counter}}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class CartBadgeCmp {

  @Input() addItemStream:Observable<any>;
  counter = 0;

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
    this.addItemStream.subscribe(() => {
      this.counter++; // application state changed
      this.cd.markForCheck(); // marks path
    })
  }
}

markForCheck() : 标示变化的路径

根组件

子组件

子组件

孙组件

孙组件

孙组件

孙组件

发生变化

• Big O
• 组合
• 使用场景

孙组件

Reactive Programming

Rx.js

Gulp  ?

订阅，观察者

HTTP Client

好处：vs promise   - 大一统(events)，加工

• 自定义触发时机
• 缓存数据
• 多、无序的请求：switchMap(自动退订)

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input type="text" [ngFormControl]="term"/>
      <ul>
        <li *ngFor="#item of items | async">{{item}}</li>
      </ul>
    </div>
  `
})
export class App {
  items: Observable<Array<string>>;
  term = new Control();
  constructor(private wikipediaService: WikipediaService) {
    this.items = this.term.valueChanges
                 .debounceTime(400)
                 .distinctUntilChanged()
                 .switchMap(term => this.wikipediaService.search(term));
  }
}

• observable规范指南
• EventEmitter-class
• Video:ntroduction-to-reactive-programming

More Detail:

Webworkers

使用场景？

<script src="angular2/web_worker/ui.js"></script>


// index.js
import {WORKER_RENDER_PLATFORM, WORKER_RENDER_APPLICATION, 
WORKER_SCRIPT} from "angular2/platform/worker_render";

import {platform} from "angular2/core";

platform([WORKER_RENDER_PLATFORM])
.application([WORKER_RENDER_APPLICATION, provider(WORKER_SCRIPT, {useValue: "loader.js"});


// loader.js
importScripts("./es6-shim.js", "./system@0.16.js", "angular2/web_worker/worker.js");
System.import("app");


// app.ts
import {Component, View, platform} from "angular2/core";
import {WORKER_APP_PLATFORM, WORKER_APP_APPLICATION} from "angular2/platform/worker_app";

@Component({
  selector: "hello-world"
  template: "<h1>Hello {{name}}</h1>
})
export class HelloWorld {
  name: string = "Jane";
}

platform([WORKER_APP_PLATFORM])
.application([WORKER_APP_APPLICATION])
.then((ref) => ref.bootstrap(RootComponent));

server-side Render

服务端渲染

Angular Universal

preboot - control

注意事项:

• 不要直接操作nativeElement,用Render

        -确保多平台能正确更新view

constructor(element: ElementRef, renderer: Renderer) {
  renderer.setElementStyle(element.nativeElement, 'font-size', 'x-large');
}

• 尽量让指令无状态化，减少跟随属性的变化<img url="">

• 从"angular2/src/platform/dom/dom_adapter"

      使用支持的DOM操作

Summary - 总结

① 概述

• Angular2 前世今生
• ES6
• TypeScript

② 核心部分

• Component
• DI
• Template
• Tools
• ngUpgrade

③  延伸

• Change Detection     - Zone.js

• Reactive Programming - Rx.js
• Web worker
• server-side Render

更多资源：

• Angular 2官网
• ng2开发者指南 by 广发证券 (Google i18n)
• Angular 2相关书籍
• blog.thoughtram.io
• victorsavkin.com
• angular material2 alpha.0（2016.03.15）