如何建立Angular開發環境？
本文介紹在node.js與Angular CLI環境下，如何來開發Angular-based applications。
- 安裝Node.js。Node.js安裝好之後，便有後續需要之npm工具。根據Angular官方文件（https://angular.io/guide/quickstart），node建議版本是6.9.x以上，npm則是3.x.x。
- 安裝好Node.js與npm後，在命令列下即可安裝Angular CLI
- 如有需要
node -v npm -v
可檢查node與npm的版本。node版本過舊，通常建議移除後再重新安裝，npm則可用下列方式升級：npm install -g npm
npm install -g @angular/cli
第一個Angular專案
Angular CLI用來建立專案指令為：
ng new 專案名稱安裝過程中，angular相關套件便會被加入專案之中。以專案名稱MyWeb為例：
ng new MyWeb則建好之專案資料夾如下圖：
專案主要程式碼位於src/app資料夾下。專案可透過命令列開啟瀏覽器模擬網站執行結果:
ng serve --open瀏覽器會以http://localhost:4200，模擬Angular專案。
 |
| 圖2. 專案模擬執行結果 |
Angular專案結構
Angular專案由「模組」(module)組成，每一模組內再由「元件」(component)合組而成。Angular模組稱為NgModule，每一個專案至少有一個根模組(root module)。以MyWeb專案為例，app.module.ts便是根模組。
模組內須有模組類別，如上例第16行定義之AppModule，再加上@NgModule decorator所定義之metadata（上例第6-15行）。
模組metadata重要屬性說明如下：
- declarations：定義模組所屬之view類別。元件(component)便屬於一種view類別。上例之AppComponent為此模組之根元件(root component)。此外，元件都會帶有模板(template)，用以顯示內容。
- imports：模組內各元件所需用到之外部模組。
- bootstrap：此web app進入點，亦即根元件。
根元件app.component.ts程式碼如下：
元件亦是以類別方式定義，如上例第8-10行，定義AppComponent元件。此外第3-7行，則是以@Component decorator定義元件的metadata。
元件metadata重要屬性說明如下：
- selector: CSS seletor。當html模板檔出現<app-root></app-root>時，Angular便會產生此元件的頁面內容，放置於上述開始與結束標籤之間。
- templateUrl: 指定元件所屬的html模板檔url。
- styleUrl: 指定元件所屬的css檔url。
元件與指定的模板檔案app.component.html之間，以雙向繫結(two-way binding)的方式綁定成員變數與HTML頁面內容，便能呈現動態內容。
例如app.component.ts第9行定義了title變數，而html檔第4行便以{{title}}兩對大括弧的方式，綁定title變數內容。
沒有留言:
張貼留言