O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

17.577 visualizações

Publicada em

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

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

Publicada em: 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

×