戲畫地雷: 9月 2020

之前是使用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了。檔案很多，有個印象就好。

戲畫地雷

2020年9月9日水曜日

[Web開發]angular 9 筆記