第三章 RIC-GIS 模型與系統架構
第二節 系統實作
3.2.3 AngularJS
3.2.3 AngularJS
AngularJS 於 2009 年由 Misko Hevery 等人創建，後為 Google 所收購、傾力 打造的前端 JavaScript 框架[6]，至 2015 年 10 月 Angular 穩定版本為 1.4.7 版，
本研究實作之系統則採用 Angular 1.4.3 版。
與其他 JavaScript 框架最大的不同在於，AngularJS 直接延伸現有的 HTML 架構，透過宣告式語法（Directives Syntax）讓 Web 應用程式在元件化的過程變 得極其簡潔有力。所謂宣告式語法是指開發者於前端網頁的指令，可使 AngularJS 的 HTML 編譯器（$compile）將特定的行為繫結至 DOM 元素（如屬性、元素名
AngularJS 為前端工程的 MVC（Model–View–Controller）框架，以投入產出 效率分析模組為例說明如下：
(一) 模型（Model）主要負責應用程式中的商業邏輯，實作演算法，以及資料 庫與使用者介面之間資料的交換。Model 層封裝了應用程式中對資料的存 取並提供可重複使用的函式庫，像是資料庫存取的抽象化、資料的驗證與 稽核都會發生在此。如圖 3.7，後端程式計算 DEA 效率值，產生
DEAModel 物件，透過 Json.NET 元件轉成 JSON（JavaScript Object Notation）字串，以 AJAX（Asynchronous JavaScript and XML）的方式傳 送至前端網頁。
(二) 控制器（Controller）用於控制應用程式的流程，處理事件並作出響應。
「事件」包括使用者的行為和資料 Model 上的改變。如圖 3.7，dea.js 將接
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
收到的 JSON，依 DEA 效率值計算色階、綁定數據至 D3 台灣地圖。
(三) 檢視（View）呈現自 Model 層取得的資料與蒐集使用者互動資料的網頁，
HTML / CSS / JavaScript 都是使用於此層的技術。如圖 3.7，dea.html 負責 配置網頁的呈現樣貌。
圖 3.7 系統應用 AngularJS —MVC 框架[圖片參考[44]]
圖 3.8 系統應用 AngularJS —雙向資料繫結
‧
資料驗證規則、商業邏輯、資料存與驗證等；使分析師專注於 Controller，設計網 頁與後端的互動關係；開發人員則專注於 View，決定前端呈現的細節、實做網 頁互動的程式碼與 HTML、CSS 等編修工作。
數據綁定在 AngularJS 中 Model 和 View 之間是自動同步，當 View 發生變 化時會直接反射繫結至 Model，反之亦然，此即為 AngularJS 雙向資料繫結（Two
Way Data-binding）的特性。開發人員可以將 Model 視為單一可信賴的來源，相
對於傳統的網頁程式，開發人員須撰寫 Model 資料綁定 DOM 物件的程式碼，並 於使用者操作異動畫面資料後，再撰寫 View 資料綁定 Model 的程式碼，AngularJS 雙向資料繫結的特性讓開發變得直覺，前端語言也變得更純粹乾淨。系統應用如 圖 3.8 所示。AngularJS 實現自動雙向繫結其後端機制，是頻繁檢查（Dirty Check）的反 覆比對，意思是當 Model 有任何異動，所有註冊該 Model 的 View 就會重新掃一
AngularJS 框架尚有幾個重要的特色，如前端範本（Client-side Templates）、 相依性注入（Dependency Injection，DI）、關注點分離（Separation of Concerns，
SoC）
。前端範本為由開發者定義，具有重用性的 HTML 代碼。相依性注入是反 轉控制（Inversion of Control，IoC）常見的方法之一，乃物件導向程式的一種設 計原則，主要用來降低偶合性並且能夠抽換工作類別，可以大幅降低元件設計的‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
（關注點）相關聯的軟體組成部分進行「標識、封裝和操縱」的能力，由於關注 點混雜在一起會導致複雜性大大增加，所以能夠把不同的關注點分離開來、分別 處理就是處理複雜性的一個原則，也是物件導向的程 式設計的核心概念。
AngularJS「關注點分離」的部分，在於控制器（Controllers）與檢視（Views）之 間切割的非常乾淨，再搭配模組（Module）與相依性注入（DI）相關實作，如工 廠（Factory）與服務（Service）、提供者（Provider）與常數值（Value）等等，在 在落實了「關注點分離」這個觀念。系統應用如圖 3.9 所示。
圖 3.9 系統應用 AngularJS —相依性注入
透過上述前端框架優勢，本系統實作之功能，均可視為一個小工具（Widget）， 依不同的頁面分類需求，使用者可以自行修改該頁面預設載入的工具，如圖 3.10 所示，競爭者資料分析模組中，現有提供「競爭者辨識」與「投入產出分析（DEA）」
兩種工具，使用者透過介面設定可以增刪修改載入設定，包括載入的小工具項目、
名稱與顯示的頁面框架比例，如
圖 3.11 所示，設定的資料儲存在使用者端（localStorage），下次使用者再連
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
結開網頁，版面的呈現即為上次使用者設定的狀態。此彈性的客製化功能提供，
也視為本研究實作的 UX 設計的一環。
圖 3.10 UX 設計—使用者自行設定所需模組
圖 3.11 UX 設計—使用者自行設定網頁排版