Day04 Angular牙起來 - CLI入門指令及元件

透過ng new project01 建立好新的專案後

運行專案 - ng serve

接著來讓專案跑起來

> ng serve

成功的話會出現這段文字 √ Compiled successfully.

此時在瀏覽器中輸入 http://localhost:4200/

就能看到Angular新專案的預設頁面

可是呈現出這個畫面的程式碼在哪裡呢？

開啟專案資料夾

打開project01資料夾，看到有一大坨東西檔案和資料夾
這些都太複雜、暫時不用理會，我們先往下

來到src資料夾底下
在這層資料夾底下存放著專案的所有程式碼和程式設定

再點擊app，這一層是主程式的位置

剛剛瀏覽器呈現的畫面，程式碼都在app.component.html這個檔案裡

對這個檔案稍加修改、存檔，瀏覽器就能自動渲染

襪，檔案和資料夾這麼多，已經頭昏眼花惹...發

對，這就是Angular新專案預設長的樣子
雖然看起來浩浩蕩蕩、一大堆東西，但目前所用到的只有一小部分

Angular元件 - Component

在Angular中，一個元件的標配有三個檔案

• html 樣板
• css 樣式
• ts 程式邏輯

就是橘框圈起來的三樣

如果把網頁中的某個部分或畫面單獨拆出來看，就都會是一個個的元件
而Angular只是以元件為主體的角度來寫網頁
因為寫網頁不外乎就 HTML、CSS、Javascript 三個部分
所以一個對一個來看，能比較快理解

• html 樣板 <=> HTML 標籤結構
• css 樣式 <=> CSS 樣式
• ts 程式 <=> Javascript 動態、程式

產生新元件 - ng generate component

透過ng-cli來產生新元件
譬如我們在網頁中設計一個遊戲，需要主角的角色區塊
所以將新元件命名為role
要注意路徑，因產生的新元件會在當前路徑底下

> cd src/app
> ng generate component role
或縮寫成
> ng g c role

透過ng-cli產生的元件，預設有四個檔案

• .html 樣板
• .css 樣式
• .ts 程式邏輯
• .spec.ts 測試程式 這我們暫時用不到，以後看到都先大力刪除

ng g c role 這行指令只做兩件事情：

1. 新增橘色方框內的檔案（.spec.ts檔案已被我秒刪除）
2. 改動黃色方框內的檔案　app.module.ts

app.module.ts 中新增的區塊

接著，遊戲內還需要商店區塊，將新元件命名為store

> cd src/app
> ng generate component store
或縮寫成
> ng g c store

產出後的檔案目錄

恭喜你學會透過ng-cli產生新的元件
到這一步，已經完成20%的Angular！

推薦安裝的IDE套件

推薦兩個WebStorm IDE的套件
在設定中搜尋angular，在Plugins > Markplace底下安裝

1. Angular CLI QuickSwitch
   按Alt+S可以在元件中快速切換html、ts、css檔案
2. Angular Component Folding
   把同一個元件的檔案組折疊在一起，查看項目元件時更方便