之前是使用angularJS寫前端。
angularJS有個最大的罩門就是不適合做uglify。對於程式碼的保護可以說是沒有。
整個模組也有點大，網頁啟動的時間偏長。
anguar 9 在評估之後，有以下幾點符合需求：
- 有自己的編譯工具，可以滿足minify / uglify / tree shaking等等減少含入程式碼或是模組的能力
- 導入typescript，可以撰寫型別較為嚴謹的設計（也可以不使用）
- lazy-loading頁面，減少啟動頁面到出現讀取畫面的所需時間跟資料量，也可以減少編譯時間。個人認為是很大的優勢。把頁面分開撰寫，編譯的時候只會編譯有改到的頁面。
- 預設可以使用sass/scss （因此導入bootstrap4也可以加上自定義的顏色組合）
- 模組化設計
於是就開始學習使用angular 9了。希望以下的資訊可以幫助到各位。
以下簡稱為angular。
前置作業：
建立node.js的開發環境。 到 https://nodejs.org/ 下載安裝包並安裝在作業系統內。
筆者是使用MAC OSX為開發環境，以下的動作也都是以OSX為主。
安裝angular開發環境：
npm install -g @angular/cli
不知所措的第一步：建立全新的project。angular因為需要編譯，其實開發環境是相對複雜的。之後再來研究製作出來的檔案。
在想要建立project的路徑之下執行：
ng new <project name>
本文使用「angularTest」作為project名稱。
「ng」是angular開發環境的執行指令。在angular開發環境安裝成功後應該就可以使用。若是不行的話代表angular的開發環境沒有安裝正確。
接著會有兩個選項需要選擇：
? Would you like to add Angular routing? Yes
angular是靠routing來實作lazy-loading，基本上是選yes。選No的話之後要使用routing的話，就要自己加上routing的設計，會比較麻煩些。選擇yes，就算要製作的網頁只有一頁，也沒有使用上的問題。
? Which stylesheet format would you like to use?
CSS
❯ SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
筆者是使用Scss。為了可以比較簡單的客製bootstrap4。
接著就會建立一堆檔案，跟安裝angular會用到的node_modules。時間很長。
CREATE angularTest/README.md (1028 bytes)
整個project的解說檔。其他的開發者拿到這個程式包的時候第一個會看的檔案。請自行撰寫。
CREATE angularTest/.editorconfig (246 bytes)
編輯器的設定。使用支援這個檔案的編輯器的話就會套用。包含了文字編碼的指定，括號階層的表示方法
CREATE angularTest/.gitignore (631 bytes)
記載git要忽略的檔案/目錄列表。像是編譯的cache檔案，系統檔案，ide編輯器的設定等等
CREATE angularTest/angular.json (3695 bytes)
angular的設定檔。為重要檔案。記載各種ng指令的設定。
- build：編譯project的時候所使用的設定。
- serve：執行內建web server的時候所使用的設定。（內建web server，可以快速開發。因為只要修改程式碼就會自動編譯並觸發瀏覽器重新讀取。）
- test：執行測試模組。進入點是test.ts。angular的測試模組是使用karma。會自動啟動瀏覽器，經由瀏覽器render。測試規則寫在*.spec.ts檔案。ui可以使用xpath selector取得render之後的資料。
- lint：找出語法錯誤。雖然編譯的時候就會提醒嚴重到無法編譯的錯誤，要是有嚴謹的撰寫規範的話，
- extract-i18n：輸出翻譯檔案。會把所有依照多國語系的格式，撰寫文字的呈現方式，輸出為「messages.xlf」檔案。
- e2e：End to End test。可以想成是「系統整合測試」。使用的模組是protractor。這邊就不深入討論。
CREATE angularTest/package.json (1289 bytes)
node.js的模組設定檔。記載有使用到的模組。
應該不需要手動修改，要增加模組的話就直接使用npm做安裝即可。
CREATE angularTest/tsconfig.json (489 bytes)
typescript的編譯設定檔。目前沒動到。
CREATE angularTest/tslint.json (1953 bytes)
typescript的語法檢查設定檔。目前沒動到。
CREATE angularTest/browserslist (429 bytes)似乎是輸出js/css的時候會根據瀏覽器的相容性做修改。目前沒動到。
CREATE angularTest/karma.conf.js (1023 bytes)
karma的設定，目前沒動到。預設是使用Chrome瀏覽器做測試。
CREATE angularTest/tsconfig.app.json (210 bytes)
CREATE angularTest/tsconfig.spec.json (270 bytes)
這兩個目前沒動到。
CREATE angularTest/src/favicon.ico (948 bytes)
在瀏覽器的Tab或是網址列前方顯示的小圖。依需求替換。或是修改index.html的<link rel="icon">的tag。
CREATE angularTest/src/index.html (297 bytes)
網頁的進入點。其中<app-root></app-root>是angular的進入點。
CREATE angularTest/src/main.ts (372 bytes)
angular的進入點。不需修改。
裡面做了幾件事情：
- 導入app.module.js。也就是angular的root模組。
- 是否使用產品模式。差異：編譯時不會注入除錯資訊，編譯完成的檔案size會小很多。（至少50%的差異）
CREATE angularTest/src/polyfills.ts (2835 bytes)
polyfill的設定。若是目標的支援瀏覽器有IE10跟IE11這種比較舊的，本檔內容有列出一些針對瀏覽器的部分需要啟動。
本文觸及的部分不需修改。
CREATE angularTest/src/styles.scss (80 bytes)
整個project的全域css定義。會在這邊導入bootstrap跟material design。
CREATE angularTest/src/test.ts (753 bytes)
karma測試的定義。裡面描述的動作是「把所有此目錄之下的"*.spec.ts"導入並執行測試」。不需修改。
CREATE angularTest/src/assets/.gitkeep (0 bytes)
git相關檔案。不需修改。
CREATE angularTest/src/environments/environment.prod.ts (51 bytes)
使用參數ng build --prod 編譯angular的時候所使用的環境變數檔案。
CREATE angularTest/src/environments/environment.ts (662 bytes)使用參數ng build 編譯angular的時候所使用的環境變數檔案。
這兩個檔案是靠ng build的參數「--prod」做切換。有加參數時使用environment.prod.ts，沒加這個參數的時候使用environment.ts檔案。
切換的定義方式請參考angular.json的這個區塊：
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
CREATE angularTest/src/app/app-routing.module.ts (246 bytes)
定義angular的url routing的運作方式。之後會解說。
CREATE angularTest/src/app/app.module.ts (393 bytes)
算是angular的進入點：根模組。
CREATE angularTest/src/app/app.component.scss (0 bytes)
根模組的scss檔案。這個模組專有的css定義請寫在這裡。
angular的css是寫在每一個component或是模組內。
影響範圍是以樹狀的方式向下作用。同一階的不會互相作用。
假設以下狀態：（被導入的模組就被掛在下一層）
a.module
a.scss
---b.module
---b.scss
---c.component
---c.scss
寫在a.scss的定義，會影響到b跟c。寫在b的不會影響到a跟c。寫在c的不會影響到a跟b。
CREATE angularTest/src/app/app.component.html (25755 bytes)
根模組的component的html檔案。雖然模組裡面不一定要有component...
angular init的預設會給一個測試頁。此檔案也就是測試頁的html內文。
CREATE angularTest/src/app/app.component.spec.ts (1074 bytes)根模組的測試規格。angular init的預設會給一個測試頁，所以這個檔案裡面所描述的測試規格也就是測試頁的規格：「必須要有title，值為"angularTest"」。也可以藉由觀察此檔案來了解如何撰寫karma的測試碼。
CREATE angularTest/src/app/app.component.ts (216 bytes)
根模組的component的typeScript檔案。雖然模組裡面不一定要有component...
angular init的預設會給一個測試頁。此檔案也就是測試頁會用到的typeScript。
CREATE angularTest/e2e/protractor.conf.js (808 bytes)
protractor是整合測試會使用的模組，具有操作網頁的顯示物件的能力。
CREATE angularTest/e2e/tsconfig.json (214 bytes)
protractor所使用的tsconfig。會繼承project根目錄的tsconfig.json。
CREATE angularTest/e2e/src/app.e2e-spec.ts (644 bytes)
protractor的測試規格。可以藉由觀察此檔案來了解如何撰寫protractor的測試碼。
CREATE angularTest/e2e/src/app.po.ts (301 bytes)
protractor的class定義。可以藉由觀察此檔案來了解如何撰寫protractor的測試class。
通常是如何取用頁面上所顯示的資料。
這樣就建立完成新的project了。檔案很多，有個印象就好。
