Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

17,725 views

Published on

本簡報是 Will 保哥在 2016/5/10 創新應用開發大會 的演講內容
https://www.microsoft.com/taiwan/events/opencloud/agenda_10th.htm

現場展示的專案可以從以下網址取得完整原始碼與歷程記錄:
https://github.com/miniasp/angular-2-boilerplate-webpack

Published in: Software

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

  1. 1. 使用 TypeScript 駕馭 Web 世界的脫韁野馬 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ 以 Angular 2 開發框架為例
  2. 2. ANGULAR 2 簡介 Angular 2 Introduction
  3. 3. 與 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
  4. 4. 從框架轉向平台 4
  5. 5. Angular 2 的開發語言 TypeScript ES 2016 ES 2015 ES5 5
  6. 6. Angular 2 的開發語言 • ES5 – 傳統 JavaScript 程式語言 ( IE9+ ) • ES 2015 – 此版本為 ES5 的「超集合」 – 具有新穎的 JavaScript 語言特性 ( let, const, for-of, … ) – 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本 • TypeScript – 此版本為 ES 2015 的「超集合」 – 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支 援 • Dart – 非 JavaScript 家族的程式語言 – 具有強型別特性 6
  7. 7. Angular 2 的開發工具 • Visual Studio Code • Visual Studio 2015 • Atom • Sublime Text • Plunker 7
  8. 8. 建立第一個 ANGULAR 2 應用程式 Build your first Angular 2 Application 8
  9. 9. Angular 2 應用程式的組成 • App Component元件 • Child Component元件 • Services Component元件 • Pipe Component元件
  10. 10. Angular 2 頁面的組成 應用程式元件 + 樣板 ( AppComponent + Templates ) 頁首元件 + 樣板 ( HeaderComponent ) 子選單 元件 + 樣板 (SideComponent) 10 主要內容元件 + 樣板 (MainComponent)
  11. 11. Angular 2 結構剖析 11
  12. 12. Angular 2 結構剖析 • Module 應用程式被切分成許多「模組」 • Component 每個模組下有許多「元件」 • Template 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定 • Directive 將 DOM 轉換為多功能的「宣告命令」 • Service 由「服務」集中管理資料與運算邏輯 • Dependency Injection 由「相依注入」機制管理物件生命週期 12
  13. 13. Angular 2 元件的組成 範本 ( Template ) • HTML 版面配置 • HTML 部分片段 • 資料繫結 (Bindings) • 畫面命令 (Directives) 類別 ( Class ) • 建構式 (Constructor) • 屬性 (Properties) • 方法 (Methods) 中繼資料 ( Metadata ) • 裝飾器 (Decorator) • 針對類別 • 針對屬性 • 針對方法 • 針對參數 13
  14. 14. 手動建立基礎開發環境 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
  15. 15. 使用 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
  16. 16. 複製現有的 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
  17. 17. 認識 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
  18. 18. 建立第一個元件 (根元件) • 建立根元件 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
  19. 19. 認識 Angular 2 元件的命名規則 // 命名規則: PascalCase export class AppComponent { // 命名規則: camelCase pageTitle : string = "Hello World"; // 命名規則: 動詞 + 名詞 with camelCase printTitle() { console.log(this.pageTitle); } } 19
  20. 20. 認識 ES7 / TypeScript 的 Decorator • 可以套用在 – 類別 – 屬性 – 方法 – 方法中的參數 • 永遠以 @ 開頭 • 不用分號結尾 • 用法跟 C# 的 Attributes 很像!! 20
  21. 21. 修改首頁 HTML 內容 • 修改 index.html <my-app> Loading App... </my-app> 21
  22. 22. 建立第一個元件的 HTML 範本 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <div> <div class='container'><h1>{{pageTitle}}</h1></div> </div> ` }) export class AppComponent { pageTitle: string = 'Hello World'; } 22
  23. 23. 建立子元件 • 建立模組檔案 ( *.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
  24. 24. 載入子元件 • 修改上層元件的 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
  25. 25. 認識資料繫結方法 (Bindings) • 內嵌繫結 ( interpolation ) {{property}} • 屬性繫結 ( Property Binding ) [property]='statement' • 事件繫結 ( Event Binding ) (event)='someMethod($event)' • 雙向繫結 ( Two-way Binding ) [(ngModel)]='property' 25
  26. 26. 透過 TypeScript 加強元件結構 • 使用型別標註 ( Type annotations ) 強化工具支援 • 使用「介面」強化工具支援 ( Strong typing ) • 使用「介面」確保 Lifecycle hooks 可以正確撰寫 • 使用泛型 ( Generic ) 建立程式碼範本 • 使用列舉 ( Enum ) 增加程式可讀性 26
  27. 27. 相關連結 • 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
  28. 28. 聯絡資訊 • 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

×