Angular 4 新手入門攻略完全制霸

Angular 4 新手入門攻略完全制霸
多奇數位創意有限公司
技術總監黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
帶你認識 Angular 4 開發流程

錄影重播
http://bit.ly/ng4intro

建立 ANGULAR 應用程式
Build your first Angular Application
3

使用 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

了解 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 )

src/index.html
6
根元件的 directive 宣告
咦？沒有載入任何 JavaScript 函式庫？

src/main.ts
7
啟用 Production 模式 (提升執行速度)
設定 AppModule 為啟動模組

src/app/app.module.ts
宣告跟 View 有關的元件
宣告要匯入此模組的外部模組
宣告要註冊的服務元件
宣告根元件

src/app/app.component.ts
9
指令 (directive) 選擇器
元件網頁範本
元件 CSS 樣式
TypeScript 類別
類別中的屬性 (Property)
類別中的方法 (Method)
類別的建構式

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

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

Angular 頁面的組成
應用程式元件 + 樣板 + 樣式
( AppComponent )
頁首元件 + 樣板 + 樣式
( HeaderComponent )
子選單
元件 + 樣板 + 樣式
(AsideComponent)
12
主要內容
元件 + 樣板 + 樣式
(ArticleComponent)

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

認識 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
類別
匯入模組
裝飾器

使用 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 # 顯示所有藍圖與用法說明

常見 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

建立子元件 ( 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

資料繫結的四種方法 (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

相關連結
• 台灣 Angular 開發者社群 (Facebook)
• 台灣 Angular 技術論壇 (Forum)
• Angular 官網 ( 官方簡體中文翻譯 )
• Angular 風格指南 (官方版)
• Angular 學習資源 (官方版)
• Angular 學習資源 (社群版)
• Awesome Angular
• Angular 2 Fundamentals | AngularClass (免費 Angular 線上課程)
• 前端工程的夢幻逸品：Angular 2 開發框架介紹

聯絡資訊
• 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

Angular 4 新手入門攻略完全制霸

More Related Content

What's hot (20)

Similar to Angular 4 新手入門攻略完全制霸 (8)

More from Will Huang (20)

Angular 4 新手入門攻略完全制霸