使用 TypeScript 駕馭 Web 世界的脫韁野馬：以 Angular 2 開發框架為例

使用 TypeScript 駕馭
Web 世界的脫韁野馬
多奇數位創意有限公司
技術總監黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
以 Angular 2 開發框架為例

ANGULAR 2 簡介
Angular 2 Introduction

與 Angular 1.x 的比較
• 三大特色
– 效能改進 (Performance)
• 偵測變更：比 ng1 快 10 倍
• 渲染速度：比 ng1 快 5 倍 (Render & Re-render)
• 範本編譯：支援 Template 預先編譯機制
• 更小的 Library Size 與延遲載入機制
• 支援伺服器渲染機制 (Node.js & ASP.NET )
– 高生產力 (Productivity)
• 開發應用程式能夠用更簡潔的語法讓團隊更加容易上手跟維護
• 更強大的開發工具 Augury
• 移除超過 40+ 個 directives
– 多樣平台 (Versatility)
• 支援 Browser, Node.js, NativeScript, and more … 3

Angular 2 的開發語言
TypeScript
ES 2016
ES 2015
ES5
5

Angular 2 的開發語言
• ES5
– 傳統 JavaScript 程式語言 ( IE9+ )
• ES 2015
– 此版本為 ES5 的「超集合」
– 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … )
– 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本
• TypeScript
– 此版本為 ES 2015 的「超集合」
– 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支
援
• Dart
– 非 JavaScript 家族的程式語言
– 具有強型別特性 6

Angular 2 的開發工具
• Visual Studio Code
• Visual Studio 2015
• Atom
• Sublime Text
• Plunker
7

建立第一個 ANGULAR 2 應用程式
Build your first Angular 2 Application
8

Angular 2 應用程式的組成
• App Component元件
• Child Component元件
• Services Component元件
• Pipe Component元件

Angular 2 頁面的組成
應用程式元件 + 樣板
( AppComponent + Templates )
頁首元件 + 樣板
( HeaderComponent )
子選單
元件 + 樣板
(SideComponent)
10
主要內容元件 + 樣板
(MainComponent)

Angular 2 結構剖析
• Module 應用程式被切分成許多「模組」
• Component 每個模組下有許多「元件」
• Template 每個元件都可能有自己的「樣板」
• Metadata 每個元件都可以標示「中繼資料」
• Data Binding 樣板與元件屬性、方法可以進行綁定
• Directive 將 DOM 轉換為多功能的「宣告命令」
• Service 由「服務」集中管理資料與運算邏輯
• Dependency Injection 由「相依注入」機制管理物件生命週期
12

Angular 2 元件的組成
範本
( Template )
• HTML 版面配置
• HTML 部分片段
• 資料繫結 (Bindings)
• 畫面命令 (Directives)
類別
( Class )
• 建構式 (Constructor)
• 屬性 (Properties)
• 方法 (Methods)
中繼資料
( Metadata )
• 裝飾器 (Decorator)
• 針對類別
• 針對屬性
• 針對方法
• 針對參數
13

手動建立基礎開發環境
1. 建立應用程式資料夾
2. 建立 tsconfig.json
3. 建立 package.json
4. 建立 typings.json
5. 建立 libraries & typings
6. 建立 index.html
7. 建立 main.ts (bootstrapper)
8. 設定 .gitignore 與建立版控
9. 設定 Visual Studio Code 開發工具 ( .vscode )
14

使用 Angular CLI 建立專案範本
• npm install -g angular-cli
• ng new PROJECT_NAME
• cd PROJECT_NAME
• ng serve
– http://localhost:4200/
• ng generate component my-new-component
縮寫語法：
ng g component my-new-component 15

複製現有的 Angular 2 專案範本
• 現有的專案範本
– miniasp/angular-2-boilerplate
– miniasp/angular-2-boilerplate-webpack
– AngularClass/angular2-webpack-starter
– angular/angular2-seed
– DanWahlin/Angular2-JumpStart
– johnpapa/angular2-tour-of-heroes
16

認識 ES 2015 / TypeScript 模組化技術
• 每個檔案都是一個「模組」( module )
• 每個模組內都可以「匯出」( export ) 公開的物件
• 匯出
export class Product {
pageTitle = "Hello World";
}
• 匯入
import { Product } from './product';
import { Product as prod } from './product';
import * as product from './product';
import './product'; 17

建立第一個元件 (根元件)
• 建立根元件 app/app.component.ts
export class AppComponent {
pageTitle: string = 'Hello World';
}
• 匯入 Angular 2 啟動器 app/main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
18

認識 Angular 2 元件的命名規則
// 命名規則： PascalCase
// 命名規則： camelCase
pageTitle : string = "Hello World";
// 命名規則：動詞 + 名詞 with camelCase
printTitle() {
console.log(this.pageTitle);
}
}
19

認識 ES7 / TypeScript 的 Decorator
• 可以套用在
– 類別
– 屬性
– 方法
– 方法中的參數
• 永遠以 @ 開頭
• 不用分號結尾
• 用法跟 C# 的 Attributes 很像!! 20

修改首頁 HTML 內容
• 修改 index.html
<my-app>
Loading App...
</my-app>
21

建立第一個元件的 HTML 範本
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div>
<div class='container'><h1>{{pageTitle}}</h1></div>
</div>
`
})
pageTitle: string = 'Hello World';
}
22

建立子元件
• 建立模組檔案 ( *.ts )
star.component.ts
• 建立元件類別 (Class) 與中繼資料 (Decorator)
@Component({ selector: 'posts', template: `xxxxx` })
export class StarComponent {
}
• 設定元件範本 (Template)
star.component.html
• 套用結構式命令 (Structure Directives)
*ngIf='products && products.length'
*ngFor='let product of products' 23

載入子元件
• 修改上層元件的 directives
@Component({
templateUrl: 'app/products/product-list.component.html',
directives: [StarComponent]
})
• app/products/product-list.component.html
<ai-star [rating]='product.starRating'
(ratingClicked)='onRatingClicked($event)'>
</ai-star>
24

認識資料繫結方法 (Bindings)
• 內嵌繫結 ( interpolation )
{{property}}
• 屬性繫結 ( Property Binding )
[property]='statement'
• 事件繫結 ( Event Binding )
(event)='someMethod($event)'
• 雙向繫結 ( Two-way Binding )
[(ngModel)]='property'
25

透過 TypeScript 加強元件結構
• 使用型別標註 ( Type annotations ) 強化工具支援
• 使用「介面」強化工具支援 ( Strong typing )
• 使用「介面」確保 Lifecycle hooks 可以正確撰寫
• 使用泛型 ( Generic ) 建立程式碼範本
• 使用列舉 ( Enum ) 增加程式可讀性
26

相關連結
• Angular 2 官網
• Angular 2 學習資源
• Angular 2 風格指南 (官方版)
• Angular Augury (開發偵錯工具) (GitHub)
• codelyzer (程式碼風格分析器)
• Angular CLI (命令列工具)
• Angular 2 Cheat Sheet for TypeScript
• ng-conf 2016 – YouTube
• ReactiveX ( RxJS on GitHub )
• RxMarbles: Interactive diagrams of Rx Observables
• TypeScript - JavaScript that scales.
• TypeScript Handbook (中文版) 27

聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang

使用 TypeScript 駕馭 Web 世界的脫韁野馬：以 Angular 2 開發框架為例

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 使用 TypeScript 駕馭 Web 世界的脫韁野馬：以 Angular 2 開發框架為例 (20)

More from Will Huang (20)

使用 TypeScript 駕馭 Web 世界的脫韁野馬：以 Angular 2 開發框架為例