Angular 4 新手入門攻略完全制霸
25 likes7,025 views
本文件是 Angular 4 的新手入门指南，介绍了使用 Angular CLI 创建项目的步骤及项目结构。文中详细列出了 Angular 应用的组件、模块及服务的基本概念和代码结构，并提供了命令行的常见用法。还附上了相关学习资源和联系信息，以便新手进一步学习。
![認識 Angular 元件的程式碼結構
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}
14
類別
匯入模組
裝飾器](https://image.slidesharecdn.com/angular4-170919071654/85/Angular-4-14-320.jpg)
![資料繫結的四種方法 (Binding syntax)
• 內嵌繫結 ( interpolation )
{{property}}
• 屬性繫結 ( Property Binding )
[propertyName]="statement"
bind-propertyName="expression"
[attr.attributeName]="statement"
bind-attr.attributeName="expression"
• 事件繫結 ( Event Binding )
(eventName)="someMethod($event)"
on-eventName="someMethod($event)"
• 雙向繫結 ( Two-way Binding )
[(ngModel)]='property'
bindon-ngModel='property' 18](https://image.slidesharecdn.com/angular4-170919071654/85/Angular-4-18-320.jpg)
Angular 4 新手入門攻略完全制霸
- 1. Angular 4 新手入門攻略完全制霸 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 帶你認識 Angular 4 開發流程
- 3. 建立 ANGULAR 應用程式 Build your first Angular Application 3
- 4. 使用 Angular CLI 建立專案架構 • 使用說明 – ng --help • 建立新專案並啟動開發伺服器 – ng new PROJECT_NAME – cd PROJECT_NAME – npm start ( 執行 ng serve 也可以 ) – http://localhost:4200 • 啟動開發伺服器並自動開啟瀏覽器 – ng serve --open • 指定不同埠號啟動開發伺服器 – ng serve --port 4201
- 5. 了解 Angular CLI 建立的專案結構 • 首頁 HTML 與 Angular 主程式 – src/index.html 預設網站首頁 ( 還是要有一份 HTML 網頁來載入 JS 執行 ) – src/style.css 預設全站共用的 CSS 樣式檔 – src/main.ts 預設 Angular 程式進入點 • 公用檔案資料夾 – src/assets/ 網站相關的靜態資源檔案 (CSS, Image, Fonts, …) • 應用程式原始碼 – src/app/app.module.ts 應用程式的全域模組 (AppModule) – src/app/app.component.ts 根元件主程式 (AppComponent) – src/app/app.component.html 根元件範本檔 (HTML) – src/app/app.component.css 根元件樣式檔 (CSS) – src/app/app.component.spec.ts 根元件單元測試程式 • 共用的環境變數 – src/environments/environment.ts 環境變數設定 ( 預設 ) – src/environments/environment.prod.ts 環境變數設定 ( ng build --env=prod )
- 6. src/index.html 6 根元件的 directive 宣告 咦？沒有載入任何 JavaScript 函式庫？
- 7. src/main.ts 7 啟用 Production 模式 (提升執行速度) 設定 AppModule 為啟動模組
- 9. src/app/app.component.ts 9 指令 (directive) 選擇器 元件網頁範本 元件 CSS 樣式 TypeScript 類別 類別中的屬性 (Property) 類別中的方法 (Method) 類別的建構式
- 10. 認識 Angular 元件的命名規則 // 命名規則： PascalCase export class AppComponent { // 命名規則： camelCase pageTitle : string = "Hello World"; // 命名規則： 動詞 + 名詞 with camelCase printTitle() { console.log(this.pageTitle); } } 10
- 11. Angular 應用程式的組成 • App Component元件 • Child Component元件 • Services Component元件 • Pipe Component元件 模組 • AppModule
- 12. Angular 頁面的組成 應用程式元件 + 樣板 + 樣式 ( AppComponent ) 頁首元件 + 樣板 + 樣式 ( HeaderComponent ) 子選單 元件 + 樣板 + 樣式 (AsideComponent) 12 主要內容 元件 + 樣板 + 樣式 (ArticleComponent)
- 13. Angular 元件的組成 範本 ( Template ) • HTML 版面配置 • HTML 部分片段 • 資料繫結 (Bindings) • 畫面命令 (Directives) 類別 ( Class ) • 建構式 (Constructor) • 屬性 (Properties) • 方法 (Methods) 中繼資料 ( Metadata ) • 裝飾器 (Decorator) • 針對類別 • 針對屬性 • 針對方法 • 針對參數 13
- 14. 認識 Angular 元件的程式碼結構 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { title = 'app works!'; } 14 類別 匯入模組 裝飾器
- 15. 使用 Angular CLI 快速產生程式碼 • 透過 藍圖 (blueprint) 產生程式碼 – ng generate 藍圖 元件名稱 • 透過 藍圖 (blueprint) 產生程式碼 (簡寫) – ng g 藍圖 元件名稱 • 使用範例 – 產生 HeaderComponent 元件 • ng g component header # 建立元件 • ng g c header # 簡寫版本 ( c = component ) • ng g c header --spec=false # 不要建立單元測試檔 ( *.spec.ts ) • ng g c charts/header # 在特定目錄(模組)下建立元件 – 產生 DataService 服務元件 • ng g s data # 建立服務元件 – 產生 Charts 模組 • ng g m charts # 建立模組 – 查詢其他藍圖用法 • ng g --help # 顯示所有藍圖與用法說明
- 16. 常見 Angular CLI 產生器藍圖與範例 16 藍圖名稱 使用方式 Component ng g component my-new-component Service ng g service my-new-service Module ng g module my-module Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Class ng g class my-new-class Interface ng g interface my-new-interface Enum ng g enum my-new-enum
- 17. 建立子元件 ( Child Component ) • 建立子元件 – 透過 ng generate component header 建立元件 – 簡寫指令：ng g c header --spec=false – 會建立 HeaderComponent 元件類別 • 會自動在 app.module.ts 匯入 declarations 宣告 – import { HeaderComponent } from './header/header.component'; • 在任意元件的範本中使用 Directives 語法載入元件 – <app-header></app-header> 17
- 18. 資料繫結的四種方法 (Binding syntax) • 內嵌繫結 ( interpolation ) {{property}} • 屬性繫結 ( Property Binding ) [propertyName]="statement" bind-propertyName="expression" [attr.attributeName]="statement" bind-attr.attributeName="expression" • 事件繫結 ( Event Binding ) (eventName)="someMethod($event)" on-eventName="someMethod($event)" • 雙向繫結 ( Two-way Binding ) [(ngModel)]='property' bindon-ngModel='property' 18
- 19. 相關連結 • 台灣 Angular 開發者社群 (Facebook) • 台灣 Angular 技術論壇 (Forum) • Angular 官網 ( 官方簡體中文翻譯 ) • Angular 風格指南 (官方版) • Angular 學習資源 (官方版) • Angular 學習資源 (社群版) • Awesome Angular • Angular 2 Fundamentals | AngularClass (免費 Angular 線上課程) • 前端工程的夢幻逸品：Angular 2 開發框架介紹
- 20. 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 – http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) – http://www.facebook.com/will.fans • Will 保哥的推特 – https://twitter.com/Will_Huang • Will 保哥的噗浪 – http://www.plurk.com/willh/invite