Lawrence Blog

前言 在 2016 年時，曾經寫過一篇關於 SEO 優化的文章  [SEO優化] Microdata類別(itemtype)實作  ，時隔多年，現在有越來越多的網站都已經改成前後端分離，前端採購 SPA 的框架，筆者自己寫的 寶貝評論+ 也不例外。 什麼是 SPA (Single-Page Application) 單頁式應用程式 ?  維基百科的說明是，它是一種網路應用程式或網站的模型，它透過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。 簡單來說， 當你從伺服器下載網頁到瀏覽器時，一開始該網頁並不包含實際內容，而是在下載完成後，動態抓取並呈現你所看到的內容 。常見的 SPA 前端開發框架包括 Angular、Vue 和 React。

應用程式執行前讀取 config 檔案內的參數，這是常見的開發方式，但若把參數定義在 TypeScript 檔案內，經過編譯後，所撰寫的類別都會被整併到 main.js 檔案內，所以若需要調整 config 參數，就必須要打開 main.js 然後在凌亂的 JavaScript檔案內找到參數，在修改它，這可能不是你樂見的。 理想的狀態應該是，把參數檔案定義在一個不會被編譯的檔案內，Ex. JSON檔，然後要使用的時候再去讀取它，對吧~ 當然不對，這也是筆者一開始的思維，但當要讀取 .json 檔案的時候，卻發現必須使用 http 、使用 http 、使用 http 來取得參數，若還沒發現事情的嚴重性，筆者大概說明一下，http是一個非同步回傳的類別，所以若要取得參數，就必須要在等待資料回傳後再繼續進行後續的作業，這樣整個應用程式會變得非常的複雜。

儘管 Angular 已經提供了很多功能及特效，但有時候直接套用前端版型的時候，還是不免使用到外部的JavaScript檔案，例如，jQuery 就是非常常見的類別庫。 本篇文章就簡單的介紹一下如何在 Angular 當中使用 jQuery，使用 jQuery 檔案的時機點，我們先大致區分成三大塊。 在index.html檔案當中。 在typescirpt檔案當中。 在其它.html檔案當中。

開發Angular應用程式的時候，有時候會把一些常用 複合式控制元件 打包成一個Component控制項，只要將商業邏輯撰寫在該控制項之後，其它開發人員若需要使用到該功能，就可以直接拿來使用了，例如下圖，是一個動態選擇電子郵件的輸入框，當資料輸入後會去檢查電子郵件的資料，並撈回可用的電子郵件。 在開發表單或者使用ngModel雙向繫結的時候，當部分控制項拉出去變成一個Component的時候，若要取得該控制項的資料，直覺的解決辦法就是使用 @Input() 和 @Output 的方式進行資料的傳遞。 但 Angular 本身就有針對 ngModel 在 Component 的資料繫結提供解決辦法，在Component 端實作 ControlValueAccessor，接下來的就來分享一下該怎麼實作該功能。

Angular 的指令共分三種類型 : 組件(Component) : 也就是模板的指令，這是最常使用到的指令。 結構型指令(Structural directives) : 用來修改視圖的 "結構"，例如添加或移除DOM布局，常用的指令如 NgIf 和 NgFor。 屬性指令(Attribute directives) : 用來改變視圖元件的 "外觀和行為"，例如預設的背景色、滑過改變顏色，常用的指令如 NgStyle。 而 @Directive() 就是 "屬性指令" 的一種，下圖為本文範例的示意圖，先大概說明以下幾個操作情境，底下會有詳細的說明。 設定載入時的預設背景色。 設定滑鼠滑過的背景設，當滑鼠離開後恢復預設背景色。 設定滑鼠點擊的背景設，當Click事件發生時變成指定背景色。

SPA(Single Page Application)的開發方式就是指透過一個 html 檔案來達成整個網站系統的任何操作，從頭到尾都不會離開此頁面，例如 Web Gmail 就是一個典型的 SPA 設計，回過頭來看一下 Angular 的基礎示範教學中也是使用 SPA 的方式，並透過屬性的判斷來決定使否載入某個 Template。 小型應用程式只有少數幾個頁面，使用此方式到還好，但假想一下有一個中大型應用程式有數十甚至數百個頁面需要切換，如果再像小型應用程式一樣透過屬性判斷的方式，後續整個程式碼可能會出現難以維護的情況，因此這種時候就需要運用 Angular 所提供的路由機制來處理此類的問題了。 什麼是路由? 簡單來說就是 Angular 會根據瀏覽器中的 URL，自動對應到要載入的視圖，這跟其它開發語言的路由，如 ASP.NET MVC 的概念是差不多的，差別在 Angular 透過路由機制來完成單一個網頁檔案切換視圖(SPA)的效果。 Angular 路由器是一個可選擇的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)，本文將說明如何建立 Angular 路由設定。

在前面的學習過程中，理解了Angular的Layout布局方式可以像是ASP.NET的MasterPage方式來規劃好UI的布局，使用的是Template內嵌另外一個子Template，如下圖紅框處就是一個Child的Template，也學習到 Parent & Child Template 之間資料的傳遞方式( 參考先前文章 )。 今天又再次接觸到幾個新的裝飾器 @ViewChild & @ContentChild，在開始說明之前，需要先理解<ng-content>這個嵌入標籤。 先回到UI布局的部分，如果想要在一個 Parent 下方放置另外一個 Child Template，最簡單的使用方式就是直接在要顯示的地方加上類似上圖的操作方法。 從上面的範例來看，該標籤的InnerHtml是空白的，因此就大膽的假設有機會把資料寫在InnerHtml的部分，讓HTML標籤可以從 Parent Template 傳入Child Template當中，但經過實際測試的結果(如下圖)，果然失敗了。 實際上Angular是允許讓HTML標籤由Parent Template傳入Child Template，ng-content就是要用來處理此問題的。

Angular可以透過在HTML標籤內使用 DOM的Property綁定 的方式將資料由Component端傳送到Template端(又或者反向綁定、雙向綁定)。 但該方式指的都是同一個Template，若假設有一種情境為，一個父親的Template必須要將值傳送到兒子Template，並且兒子Template內處理完某些事件必須要將資料傳送回父親Template的情境時，該如何進行? PS. 有點類似早期的showModalDialog在兩個父子視窗傳值的概念，只是在此Single Page Application（SPA）的情境中不是兩個不同的頁面，因此使用方式也有所不同。

Attribute 和 Property 這兩個英文單字翻譯成中文都稱作 "屬性"。 而且也應該知道Angular可以透過 " 屬性 " 的綁定，讓Component和Html Template之間可以進行溝通，但常常有時候會發生一些特例，因而讓應用程式無法正常的運作。 舉個簡單的例子，表格欄位物件 td 內有一個合併儲存格 colspan 的屬性，它是一個可用的屬性(Html Attribute)，但是實際將該屬性綁定後卻出現錯誤，為何會發生這種錯誤?

本篇文章無任何說明，僅紀錄要開發 Angular 必要的安裝項目和幾個常用的指令，有興趣也可參考保哥的文章 Angular 4 開發環境說明 。