探索 Angular 2

汤桂川

@广发证券

汤桂川

Speaker/Writer/Globetrotter

-- Front End Expert @ GF.S

-- Ex Tencenter

Past & Present

  • 2014         0.X.X
  • 2015.02   Alpha.1  -  55
  • 2015.12   Beta.0 - 17
  • 2016.05   RC.0 - 7
  • 2016.09   2.0.0

Trends

New

  • SPEED (change detection、view cache、init)

  • CROSS PLATFORM (worker、server、native)

  • Mobile (Android 4.1、  iOS 7.1、IE9+)

  • Flexible (TypeScript/ES6、 ES5、Dart)

  • AOT (静态编译)、Tree-shaking  (<50k)

Core Part

TypeScript

interface ClockInterface {
    currentTime: Date;
    color?: string;
}

class Clock implements ClockInterface  {
    private  name: string;
    currentTime: Date;
    static origin = {x: 0, y: 0};

    constructor(h: number, m: number) {}
}

Type

@SomeDecorator
class Test {}

// The same as
class Test {}
Test = SomeDecorator(Test) || Test;


function someDecorator(target) {
  // Do something with target function
  target.isTestable = true;
}

@ - Decorator

Hello World

Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Hello World</h1>'
})
export class AppComponent { }

NgModule

import { NgModule }      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Bootstrap App

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

Tools

  • Angular CLI
  • Mobile Toolkit
  • Material 2
  • Augury
  • Lint (style guide)
  • Codelyzer
  • ...

Extend

  • Universal
  • Web Worker
  • PWA
  • NativeScript, Ionic 2
  • ZoneJS
  • RxJS
  • ...

Scaffold

Github:

lightningtgc/awesome-ng2

《揭秘 Angular 2

- 从入门、进阶到实战》

Email : tangguichuan@gmail.com

Send Your Angular Story.

<thank-you [date]="'2016.10'">

</thank-you>

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

Exploring Angular 2

By Tang Guichuan

Exploring Angular 2

  • 1,557