第217期 / November 5, 2015 |
       AngularJS框架介紹作者/陳昱宏 [發表日期：2015/9/22] 簡介 AngularJS是由Google研發的前端JavaScript框架，也是SPA框架(Single-Page-Application)，與其它JavaScript框架最大的不同在於AngularJS能直接延伸現有的HTML架構，透過宣告式語法(Directives Syntax)可直接給予HTML額外的功能，讓Web應用程式在元件化的過程變得極其簡潔有力。並通過雙向的資料綁定(Two Way Data-Binding)來適應動態內容。雙向資料綁定允許Model和View之間自動同步。並且AngularJS框架的軟體大小很小，但功能很強大。 另外，在大多數的JavaScript框架當中，都會實作所謂的範本引擎 (Template Engine)，但大多數範本引擎都是利用「字串」型態來定義網頁片段的範本，然後透過 JavaScript 進行變數字串取代後，再將字串插入到原本的 DOM 物件之中，所以會有一些隱含的型別轉換成本。在AngularJS中，當AngularJS自訂的語法解析成DOM物件之後，AngularJS 會直接將原生的 DOM 物件當作網頁片段的範本，然後直接以 DOM 物件 (原生的 JavaScript 物件) 進行操作，大幅減少型別轉換的成本，所以在範本操作的過程中，其效能也比其他框架來的高出許多，這也就是 AngularJS 之中所謂的 DOM Templates 特性。 架構介紹 AngularJS架構所擁有的特性：
一、Model View Controller (MVC) MVC是一種源自於Smalltalk的一種開發架構，目前已經廣泛應用於各大開發環境中。其背後理念為：將管理資料的模型（Model）、邏輯（Controller）和使用者介面的（View）能夠分開得很清楚，利於管理、擴展和維護。在AngularJS中，也同樣也使用了MVC這樣的開發觀念（後端可用MVC，前端也可以），View指的是DOM（Document Object Model），Controller則是指JavaScript的函數建構式（類別），而Model則對應到物件的屬性。 二、資料聯繫 (Data Binding) 一般我們在開發網頁應用程式時，多半會由後端直接將資料印到HTML中。若是單頁應用程式，則是使用Ajax和後端進行溝通，來達成不更新頁面的方式呈現。以jQuery的作法來說，會將Ajax成功所獲得的資料利用innerHTML這個屬性塞到DOM中，但若是面對需要把最新的資料插入使用者介面或是根據使用者的輸入同步更新顯示數據的話將需要花很大的功夫才能達到預期的效果。而AngularJS透過引入資料聯繫（Data Binding）的概念，將資料映射於JavaScript的物件屬性，讓使用者介面的資料可以同步更新。 三、依賴注入 (Dependency Injection) 在AngularJS中，View與Controller之間的溝通都是透過Model來做傳遞，無論你在View這端修改了內容，還是在Controller這端修改了Model內容，兩邊都會即時發生變化，因為在AngularJS框架中會監控(watch) Model物件的任何變化，並隨時反映到View上面。以下是雙向資料聯繫的示意圖：  《圖一》Data-Binding架構圖(圖片來源:[The Will Will Web]) 四、Directives AngularJS中可將範本（template）寫成HTML的形式，利用強大的DOM轉換引擎，擴展HTML的功能。像是我們在AngularJS中看到的ng-app（說明Angular所要控制的範圍）、ng-controller（設定監聽View的範圍和所使用的Controller）、ng-model（對應Data和Model的屬性）等，都不是HTML本來就有的屬性，而是透過Angular去增強HTML的能力。這些都是Angular所內建的指令之一，然而你也可以撰寫客製的指令。 五、Form Validation AngularJS提供了一些表單的驗證方式，像是輸入欄位的必填、最小長度、最大長度、正規表達式、只能填數字、電子郵件、網址的一些基本驗證DOM物件，只要在標籤物件中使用”type”的物件，例如:type=’email’，這樣就可以即時的驗證此欄位是否符合驗證的條件。 六、Filter 可應用於Directive，對聯繫的資料進行後置處理，例如: {{ someDate | date:'yyyy-MM-dd' }}中date Filter將日期物件轉成指定格式字串、{{ dataArray | filter:{ id: 'A' } | json } }}中filter Filter對陣列進行篩選，只留下id屬性有"A"的物件，之後還能再串接另一個json Filter，將過濾後的陣列以JSON字串輸出。 AngularJS允許開發者自訂Filter，可讓各種資料的轉換及處理邏輯能很容易被加入Binding過程中。 七、Scope 資料聯繫的對象，在Controller中以$scope物件形式來做處理，當我們寫時，通常就是指$scope.ex，可以使用ng-repeat迴圈時則為集合中的逐一物件，Scope可以視為AngularJS中ViewModel角色。 本文以下主要會著重在基礎的用法與Form Validation、Filters。 基礎用法 一開始先載入AngularJS必要的Library。  《圖二》加入AngularJS的Library 接下來，我們還要先制定AngularJS的管理範圍以及制訂此區域所做處理的Controller。  《圖三》設定AngularJS的管理範圍 接著，我們可以先設定一個輸入視窗中制定ng-model的標籤，接著可以在Html中取用此Model的值，只需要利用兩個{{}}來取得此Model的數值，在{{ cname || ‘guest’ }}中的’guest’是用來當此Model的數值是Null或是Empty時給予一個預設值。  《圖四》基本Data-Binding範例程式碼 我們執行上述的程式碼時，會發現頁面載入時或是使用者沒有輸入任何資料時，會顯示””guest”的預設值。  《圖五》基本Data-Binding範例載入頁面 但是當我們在輸入框輸入資料時，顯示區隨著使用者輸入的進行變動。  《圖六》基本Data-Binding範例輸入資料後頁面 接下來我們來利用上述的功能加上基本的運算功能。在AngularJS中，可以不須透過JavaScript或是後端程式碼來進行運算，就可以直接在頁面上進行計算。在這裡出現一個Directives物件”ng-init”，主要是設定該Model的預設值，並在顯示結果的部分加上運算符號及所需計算的數值。  《圖七》AngularJS基本運算範例程式碼 頁面載入時，可以看到在金額與數量的輸入欄位中都有剛剛所設定的預設值，分別為金額300及數量1；並且可以看到總金額的數值為金額與數量相乘的結果。  《圖八》AngularJS基本運算範例載入頁面 接下來我們修改了金額或是數量都會直接在總金額的地方顯示所運算的結果。  《圖九》AngularJS基本運算範例輸入資料後頁面 接下來利用AngularJS來建立一個簡單的即時搜尋功能，AngularJS也可以利用JavaScript來進行放入資料及邏輯上的處理，之前所設定的” ng-controller”就有很大的關係了，在JavaScript中操作AngularJS的變數或是Model都是利用上述的” ng-controller”來做處理。  《圖十》AngularJS過濾功能程式碼 接著，我們在JavaScript中取得須設定的區域，在此是利用”angular.module”來取得AngularJS的控制範圍，接著利用”.controller”來取得所要處理的區塊，可以看到在function中有一個變數”$scope”， scope可以設定屬性以及加入Function來供給使用。  《圖十一》AngularJS基本Model資料設定程式碼 我們也可以取得Controller後，給予一個陣列的值。例如：{手機名稱, 簡述}。  《圖十二》AngularJS基本Model資料設定程式碼 接著，我們要將上述新增的資料放置在頁面上，我們可以利用AngularJS中提供的”ng-repeat”來將資料做一個迴圈來讓資料能一一的呈現。在”ng-repeat”的值可以看到是”phone in phones”，在這裡可以用C#的語法來說明，”phones”是我們在上述所制定的變數值，接著用”ng-repeat”來將每一筆資料放置在”phone”中，所以就可以用”phone”來取每一筆資料的數值。另外，在”ng-repeat”的後面有加上”| filter:query”的數值，這裡表示利用”query”的值來當作此資料集的過濾器。  《圖十三》AngularJS載入Model值範例程式碼 我可以利用”query”這個Model的物件來進行搜尋的動作，我們也可以利用Filter來進行一些簡單的驗證或是轉換，像是”currency”加入貨幣符號、”limitTo”限制字串或是陣列的字元個數、”order by”將資料進行排序…等等的功能。  《圖十四》AngularJS基本過濾範例展示結果 接著，我們來介紹AngularJS的Validation的功能；在AngularJS中提供了一些表單的驗證功能，當使用者在輸入資料至表單時，通常會把所有驗證的Function放置在Control中做，但如果能在使用者輸入表單時就先將資料先做簡單的驗證動作，可以在Controller中減少很多驗證的程式碼。 在下列的程式碼中可以看到再輸入物件的屬性有加入”required”的設定，此設定可以讓AngularJS知道此欄位需要驗證是否有輸入值；除此之外，除了讓程式知道驗證沒有過之外，也要讓他能提示錯誤訊息給使用者，所以在下面給予一個span來提示使用者。$dirty表示來確認使用者是否有輸入過此欄位，不然再載入頁面時就會直接顯示錯誤訊息。  《圖十五》表單基本驗證錯誤範例程式碼及展示結果 接著可以看到後面利用$error來確認哪種驗證的條件沒有通過，就可以提供頁面顯示各種不同的錯誤訊息給使用者，另外也可以利用form.formController來控管Button是否可以使用，來減少資料輸入錯誤的可能性。  《圖十六》表單基本驗證範例程式碼及展示結果  《圖十七》表單基本驗證顯示不同錯誤訊息範例程式碼 除了必要欄位的驗證外，AngularJS也提供了其他的驗證。  《圖十八》AngularJS其他驗證模組(圖片來源:[AngularJS API Document]) 比較  《表一》不同Framework的比較表 從上述的比較表中可以知道AngularJS是一個獨立的FrameWork架構，而且核心檔案的大小也不是很大，可是卻可以提供一套很完整的MVC架構功能，並且提供了使用者可以使用簡單的方法來製作需要的DOM物件，此外它的功能性很高，所以減少了使用者很多的時間，因為AngularJS幫你做完了。 結論 其實AngularJS不一定是最好的，但是它可以提供很完整的功能模組以及減少使用者開發時的時間，並且也提供測試使用的Function來讓使用者能更容易的撰寫及測試，AngularJS提供了兩套工具供使用者進行測試： 相對的，他就不太適合使用於遊戲、圖片介面編輯器…等等這種DOM物件操作很複雜也很頻繁的應用網頁，所以根據每個專案的特性不同來挑選適合此專案的FrameWork才能達到最大的效益。 資料來源
|
|
凌群電子報/一九八四年五月二十日創刊 |