# Day04 【牙起來】 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` 中新增的區塊


新增 `RoleComponent` Role元件的相關描述

---

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

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

產出後的檔案目錄


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

---

## § Webstorm IDE 專區 §

### 推薦安裝的兩個IDE套件

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


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