[Angular] 【Angular 開發實戰：從零開始】 學習筆記 (上)
===
###### tags: `前端` `Angular`

內容僅為個人學習筆記之紀錄分享。

## 課程網址
https://www.udemy.com/course/angular-zero/


## S01重點整理


* **S01-03：使用 Angular CLI 建立 Angular 專案骨架**

| 檔案名稱 | 介紹 |
| -------- | -------- |
| node_modules | 透過npm安裝好的所有套件 |
| .editorconfig | 編輯器設定檔 |
| .gitignore | git的忽略設定檔(不計入版控) |
| karma.conf.js | 如用到karma單元測試工具時可能用到 |
| package.json | 目前專案的nmp套件的設定檔 |
| package-lock.json | 目前專案下載至node_modules後的nmp套件詳細版控 |
| protractor.conf.js | 實作E2E testing時候要用到的設定檔 |
| tsconfig.app.json | 會繼承tsconfig.json的設定檔，並可加入app底下額外的設定 |
| tsconfig.json | TypeScript的相關設定 |
| tslint.json | 定義tslint工具檢查程式碼的規則 |

* src資料夾底下

| 檔案名稱 | 介紹 |
| -------- | -------- |
| app (資料夾) | 存放程式的主檔 |
| assets (資料夾) | 需要的靜態資源 |
| enviroment (資料夾) | 此angular專案所需的環境變數 |
| favicon.ico | 於瀏覽器標籤顯示的icon圖示 |
| index.html | 預設進入畫面 |
| main.ts | 專案使用之JavaScript |
| polyfills.ts | 若需支援較舊的瀏覽器時，需開啟裡面指定位置的註解 |
| styles.scss | 專案的CSS(全域) |
| test.ts | 寫單元測試時(karma.conf.js)會用到 |

**流程**：index.html(template) > main.ts > app.module.ts(起始模組) > app.component.ts(根元件)

* **S01-05 認識 Visual Studio Code 開發環境**

| shortcut | 介紹 |
| -------- | -------- |
| F1 | 開啟控制命令搜尋 |
| ctrl + E | 搜尋專案資料夾內的檔案 |
| ctrl + ` | 開啟treminal |
| 點選xxxModule或是cxxComponent + F12 | 可自動打開其檔案 |
| a-XXX | 尋找code snippet |
| 選取需要的字 按ctrl + D | 多重選取 |
| alt + O | 在xxxComponent.ts和其template切換 |
| shift + alt + F | 將文件進行format排版 |

---

## S02重點整理

* **S02-01 關於 AngularJS 與 Angular 開發框架**
1. 初始的Angular雖得到程式區圈不少迴響，但仍有大量改進空間。
2. 爾後發布了Angular2，與初始的Angular不相容。
3. 為了溝通方便，將初始的Angular稱為【AngularJS】，Angular2以後都稱【Angular】

* **S02-02 了解 Angular 的優點與主要特色**
1. 跨平台：Progressive Web Apps、Desktop Apps、Native Apps
3. 速度與效能：AOT、Universal、Code Splitting
4. 支援很多工具生產力up：Templates、Angular CLI、各IDE
5. 完整的開發體驗：包山包海的工具
7. 可維護性佳：angular update

* **S02-03 認識 Angular 開發語言：TypeScript**
1. TypeScript為JavaScript的超集合。
2. TypeScript有許多類似後端語言的寫法 EX: class
3. TypeScript編譯器可以將寫好的TypeScript轉換為各式ES版本的JavaScript。

* **S02-04 理解 Angular 應用程式與元件**
1. 一個Angular應用程式至少有一個module，module可以封裝多個component，component有父子關係。可以說Angular應用程式是由元件所組成。
2. Angular頁面的組成：應用程式元件 + template + 樣式。
---

## S03重點整理


* **S03-01 認識 Angular 應用程式啟動流程**
1. 輸入指令`npm start`會去執行在`package.json`內的script區段定義的`ng serve`命令。
2. `ng serve`會透過背後的Webpack將TypeScript編譯成JavaScript並啟動開發伺服器。
3. 瀏覽器載入index.html，並動態注入javaScript。
4. 進入點為main.ts，會由

		platformBrowserDynamic().bootstrapModule(AppModule)
  		.catch(err => console.error(err));

載入AppModule根模組
5. 進入AppModule內執行，在@NgNodule內啟動根元件AppComponent：

| Propetity | 介紹 |
| -------- | -------- |
| declarations | 宣告一些和View 有關的原件 |
| imports | 匯入這個module或用到的其他module |
| providers | 註冊一些服務的提供者 |
| bootstrap | 啟動根元件(預設：AppComponent) |

6. 進入AccComponent執行，在@Component內：
| Propetity | 介紹 |
| -------- | -------- |
| selector | 會找到專案內的指定標籤 (例如：<app-root></app-root>) ，將渲染+編譯好的JS內容載入標籤內區塊 註：要寫成{{.class}}也可以，但官方的tslint建議使用標籤名|
| templateUrl | 這個Component的板模html |
| styleUrls | 這個Component的CSS樣式 |

* **S03-02 Angular CLI快速建立元件與範本**

cmd輸入指令 `ng generate component {{元件名}}` 縮寫`ng g c {{元件名}}`會自動建立以下4個檔案，以及修改AppModule將該元件註冊進declarations內：
1. 元件名.component.css
2. 元件名.component.html
3. 元件名.component.spec.ts
4. 元件名.component.ts

`ng generate` 指令可以幫我們自動gen出這些類型的檔案：

* **S03-03 將靜態檔案加入 Angular CLI 建立的專案**
1. 將靜態檔案丟進專案資料夾內
> 2. 在`angular.json`內(舊版是`angular-cli.json`)的`apps > assets`內加入新增的靜態資源(需要重啟伺服器)

* **S03-04 將網頁 HTML 加入到 Angular 應用程式**
1.`<base href="/">` 為網頁的預設路徑，十分重要。
2. 若有JS或資源載入要將其放在`<base href="/">` 標籤之後，以免進入網頁但資源還沒載入完成。

* **S03-05 發行與部署 Angular 應用程式的方法**
1. 輸入指令`npm build`呼叫webpack進行打包。若加上 `--prod` 參數可將打包的資源做壓縮。
2. 在預設的 dist 資料夾內(可在`angular.json`內修改)，就是打包完成的結果。

* **S03-05 升級 Angular 應用程式到新版的方法**

建議1~2周可以升級一下，幾乎都可以無痛升級，偶而才會遇到問題。
有需要查詢升級版本有沒有須注意的地方，可至這個連結查詢：https://update.angular.io/
| 指令 | 說明 |
| -------- | -------- |
| ng version (舊版ng -v) | 查詢目前的Angular相關使用之版本(要在專案資料夾內開CMD查，不然只能查到全域的內容) |
| ng update | 升級Angular版本(幫你修改package.json和npm install) |