終於進入到Angular環節了，
個人學習過程中主要以保哥的Angular教學為主。

Angular 簡介

Angular是基於TypeScript的網頁應用框架，主要由Google團隊把拔維護的跨平台程式語言，
除了可做網頁之外，搭配Electron框架可做出桌面型應用程式。

Angular是純前端的程式，僅會有html、CSS、JS、圖檔等靜態檔案，
不會有任何後端的程式，頂多是接後端API的資料來進行頁面呈現。

Angular中文意思是 多角形的、稜角分明的，有讓網頁各元件彼此分工、各司其職的味道在。
透過Angular，我們能快速將網頁的每個區塊拆分成各個部件，
藉由元件化的開發模式(如:模組包含模組、元件中包含子元件)來進行網頁設計與開發，
好處是不會經由程式碼直接對DOM進行操作 (像JS、JQuery會頻繁的透過querySelector等方式來指定DOM元素)，
省掉這個步驟可讓工程師專注於處理頁面呈現及撰寫商務邏輯。

缺點是一開始學習的難度非常高，學習曲線陡峭的令人想放棄。

Angular具有程式碼預先產生機制(Angular Universal)，可將HTML預先產生好、將靜態HTML傳送給client瀏覽器呈現後再啟動Angular應用程式。透過router機制達到延遲載入功能，在開發SPA單頁應用網站時非常方便。

除了JavaScript之外，也可用Dart程式語言來開發Angular。

另外，在JS中的所有語法通通都是TS有效語法，
用TS寫好的程式碼，經由TypeScript編譯器(WebPack)，在編譯時可以選擇JS版本 如:ES3、ES5、ES2015(支援class的版本)等，能編譯出各種版本的JS程式碼在瀏覽器上執行，

意即TypeScript寫好後，經過編譯後能產出支援任意版本的JavaScript程式碼

TypeSrcipt 是什麼

一言以蔽之，TypeScript就是有型別的JavaScript。

可以到TS Playground來玩看看TypeScript。

AngularJS vs Angular 兩者何異

Angular剛推出時(2010年)第一版(v1)因為草創，有許多用法過於艱澀、或者說不夠好用，
於是在第二版(v2)進行大改版，一些用法不互相兼容，
因為版本差異過大，為了區分兩者，把第一版稱為AngularJS
第二版之後(2016年)的所有版本則稱為Angular、或者Angular 2+

在2.0之後或更高的版本，彼此架構就差異不大、兼容性好很多，於是就沒有新的名字。

安裝環境 (Win10)

安裝 Chocolatey

打開PowerShell(以管理員身分安裝)，安裝chocolatey管理系統

> Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安裝 Node.js

安裝Node.js(以管理員身分安裝)、以及Git

> choco install -y nodejs git

之前電腦有安裝過chocolatey，但似乎未成功安裝

解決辦法是先刪除 C:\ProgramData\chocolatey 資料夾，再重新執行一次安裝。

透過choco套件管理系統安裝的程式，路徑通常都會在C:\ProgramData\chocolatey\lib底下。

安裝環境 (MacOS)

安裝 Homebrew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝 Node.js

$ brew update
$ brew install node

安裝好Node.js後，
就會有npm這套軟體套件管理系統
要先重新開啟powershell，再透過npm來下載Angular Cli

安裝 Angular Cli

下載最新版本Angular Cli

> npm i -g @angular/cli

若要指定版本，可再後面加上@版本號

如:

> npm i -g @angular/cli@9
> npm i -g @angular/cli@9.1

確認Angular版本，如果能成功執行ng指令代表Angular Cil成功安裝。

> ng --version
或者
> ng v

若要移除angular

> npm uninstall -g @angular/cli
> npm cache clean --force
> npm cache verify

建立Angular專案

透過ng來新增專案

> ng new ng-test

這一步驟會問要不要新增routing、以及樣式的格式

第一次建立專案有可能會跑比較久。
在Windows作業系統上，完成之後會出現一大堆的CRLF提示

接著進到專案底下

> cd ng-test

執行專案

> npm start

或

> ng serve

若在Windows平台上使用ng serve遇到set-executionpolicy : 拒絕存取登錄機碼 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell'。等類似問題

可先執行 Set-ExecutionPolicy remotesigned -Scope CurrentUser 來放寬安全性的限制。

(npm start的指令參數在 package.json)

執行完後透過瀏覽器開啟 http://localhost:4200/
有出現以下畫面代表專案成功執行

Angular 目錄架構

我們進剛產好的Angular專案資料夾底下瞧瞧。

夭壽，才剛開始就冒出這麼多的檔案?!

根目錄底下檔案
package.json 給npm看的，用來安裝、管理模組
angular.json Angular Cli的設定檔
.editorconfig 給編輯器看的，如何處理編碼、縮排字元、斷行等
.gitignore 給git看的，可設定不被git紀錄的檔案
karma Karma單元測試工具
tsconfig.json 存放TypeSrcipt相關設定 ES版本
tsconfig.app.json 針對app資料夾內的TS做出額外的定義
tsconfig.spec.json 寫單元測試TS時用到的設定檔
tslint tslint檢查程式碼品質的規則

資料夾

• node_modules 透過npm安裝好的所有套件
• e2e end-to-end 點對點測試工具
  • protractor 則是測試的設定檔
  • app.po.ts 由TS寫成的測試程式
• src Angular應用程式專案主要原始碼:
  • index.html 網站首頁
  • favicon.ico 網站圖示
  • style.css global style 樣式
  • main.ts js主程式進入點，會去啟動 app/app.module (裡面又會啟動AppComponent)
  • polyfills.ts 調整支援舊瀏覽器版本時的設定檔
  • test.ts 寫單元測試，會被 karma.conf.js 檔案載入
  • typings.d.ts 定義額外的TS型別定義，例如整合JQuery到網站中
  • app 資料夾 應用程式主檔案
    • spec.ts 單元測試定義檔
  • assets 資料夾 存放所有靜態檔案。通常存放額外或共用的CSS、JS、JQuery、圖片等
    • .gitkeep 給git看的，純粹給assets資料夾進入版控用(資料夾底下若為空則不會進入git版控)
  • environments 資料夾 存放用到的環境變數，透過TS定義環境變數
    • environment.ts 開發時期用的
    • environment.prod.ts 當只有在build production版Angular才會用到

Angular 應用程式發行部署

> ng build

建置過程中呼叫webpack，將ts編譯、打包成數個JS檔案，
build完之後會產出dist資料夾，
直接將整包dist資料夾複製到伺服器底下即可直接執行。
(只會按照angular.json底下的asset配置建置檔案)

> ng build --prod

壓縮檔案讓JS更小
(從約15MB降到1.42MB)

常用指令一覽

Node.JS npm 指令

啟動服務

> npm start

更新套件

> npm update

列出套件版本

> npm list -g

> npm list -g --depth=0

查詢有無新版本

查看angular cli有無最新版本

> npm outdated -g

安裝

> npm install -g @angular@cli

Angular Cli指令

幫助

> ng -h
> ng generate --help 或 ng generate -h

版本查詢

> ng v
> ng version
> ng --version

升版

> ng update

創建

> ng new test1

啟動

> ng serve

創立元件

> ng generate component test1
> ng g c test1

建置部署

> ng build
> ng build --prod

Angular版本升級

Angular Cli分為global、local版本

更新local版本：

> ng update

自動更新 Angular Cli、Angular、TS、Webpack、rxjs版本
(自動修改package.json 裡的版本號、同時做npm update)

更新global版本：

安裝全域Angular Cli

> npm install -g @angular@cli

可參考版本升級指南及注意事項