2.4.1 Angular
Angular[31]是由 Google 推出的前端開源框架，原本命名為 AngularJS，用來 協助單一頁面應用程式運行。Angular 透過 MVC[32]模式，增強基於瀏覽器的應 用，而且在Angular 上需要的套件與模組，皆可使用 Angular-CLI 安裝。使用者 不需要自己架構模組，開發和測試變得更加容易。第一代原名為Angular JS，第 二代之後改名為 Angular，最大的改變就是全面改用 TypeScript[33][34]撰寫，第 N 版就以 Angular N 來命名。從官方的架構圖來看，主要由 Template、Component、
Injector 構成。
圖2-13 Angular 架構圖6
6 Angular architecture, from https://angular.io/guide/architecture#whats-next
以下介紹Angular 中的組成單元:
1. Template 是一個類似 HTML 的檔案，負責呈現的工作，我們可以在裡面 做屬性綁定（property binding）或是事件綁定（event binding），Template 上面有事件發生時，如果需要變動屬性或是要處理事件，都會到其對應 的component 尋找對應的屬性變動設定與方法。
2. Component 是提供屬性或是方法的地方。在創建 Angular 服務時，基本 的Template 屬性設定，或是事件處理需要用到哪些方法、資料綁定，都 寫在Component 裡。
3. Injector 存放了 Component 需要哪些 Service，如果沒有對應的 Service，
Injector 會創建一個 Service 並且放入集合中。
4. Service 則是放方法內容的地方。我們可能會有各式各樣的服務，每個服 務都會寫成一個目的明確且狹義的方法，包含從遠端儲存或取得資料，
都歸類在Service 裡。
5. Directive 可以看成是沒有 Template 的 Component。本質上來說，Directive 和 Component 是一樣的，但 Directive 可以用來定義 HTML 元素，簡化 我們對DOM 的操作。
Angular 之中，Component 有其生命週期，從一開始透過 Constructor 建置後，
能在不同的時間點，調用不同的函式。
表2-4 Angular 的 Component 生命週期7
ngOnChanges() Component 發生事件時，此方法會先接受到當前狀 態與前一個狀態的屬性值。
ngOnInit() Angular 第一次顯示物件的屬性，與輸入物件的屬 性值時呼叫，只呼叫一次。
ngDoCheck() 有任何變更時，便呼叫此方法。
ngAfterContentInit() 在第一個ngDoCheck()執行後，呼叫此方法，只呼 叫一次。也就是外部內容要放到Template 之前，或 是放到Directive 的 view 之前呼叫。
ngAfterContentChecked() 每次完成 Template/Directive 的內容變更後執行。
ngAfterViewInit() Angular 初始化 Component 和子元件的 view 時呼 叫，只在第一次ngAfterContentChecked()之後呼叫 一次。
ngAfterViewChecked() Angular 檢查 Component 與子元件的 view 後呼叫。
ngOnDestroy() 在Angular 銷毀元件前，會執行這個方法。
本研究之系統採用Angular 框架建構前端網頁，將網頁上的組成要件做成 各個Angular Component。利用 Angular Component 中提供的資料綁定與事件綁 定，提升網頁元件的重複利用性，避免撰寫多餘的HTML 檔案。
7 Angular lifecycle sequence, from https://angular.io/guide/lifecycle-hooks#lifecycle-sequence
2.4.2 Angular tree component
Angular tree component[29][30]是一個開源的 Angular component 專案，讓使 用者能一目了然檢視資料的Angular 樹狀結構元件。在 Angular tree component 呈 現的樹狀結構中，有許多滑鼠與鍵盤的事件監聽器可以使用。Angular tree component 有自己的資料表示規則，並非直接將 JSON 格式字串放入即可。本研 究之系統，將 Java 物件轉換為 JSOG 後，實現了將 JSOG 轉換為 Angular tree component 能接受的資料表示方法，應用在本系統之中，並利用 Angular tree component 將 JSON 之樹狀結構呈現出來，此部分將會在 3.2 系統實作中詳述。
以下是Angular tree component 中，顯示資料時所需之格式。
表2-5 Angular tree component 的資料格式8
名稱 說明
hasChildren 用於異步資料載入。表示此節點可能有子節點，
即使children 為空。
isExpanded 確定節點預設的顯示方式是否以擴展方式啟動。
此屬性不可做資料綁定。
8 angular tree component format, from https://angular2-tree.readme.io/docs/options-1
2.4.3 HTML5 Web Storage
HTML5 web storage[35]能夠讓資料儲存於網頁客戶端，資料形式是以 key-value pair 儲存。比起 Cookie 只有 4KB 的儲存空間，web storage 的 5MB 空間大 了很多，儲存的資料也不會隨著網頁對伺服器端傳送請求，而讓資料在伺服器端 與客戶端來回傳送，表示web storage 不會佔用網路頻寬。web storage 分成 2 種，
local storage 與 session storage，以下介紹兩者的相同與差異。
相同之處在於對兩者資料的處理動作，包含設置資料、提取資料、刪除資料 清除全部資料，都是相同的函式。設置資料 setItem(key, value) 、提取資料 getItem(key) 、刪除資料 removeItem(key) 、清除全部資料 clear()。
local storage 與 session storage 的差異，在於各自的壽命長短與有效範圍。
local storage 除非執行清除，否則資料會一直存在，就算分頁關閉、瀏覽器關閉 也會存在。但session storage 只要分頁關閉，或是重新整理頁面，就會將資料刪 除。有效範圍則是在於，local storage 的資料在同一網站的前提下，不同的分頁 可存取，也就是說，相同網站的網頁能夠共享local storage。但是 session storage 只要是不同分頁，就無法共享彼此在session storage 的資料。
圖2-14 web storage 示意圖
本研究之系統，選用web storage 裡面的 session storage 當作資料的暫存空 間，讓使用者能在編輯資料的途中，讓暫存的物件資料儲存在客戶端的網頁 上，頁面結束或是更新頁面後，資料將不再儲存於客戶端的瀏覽器中。
第 3 章
系統架構與實作
此章節將介紹我們的系統架構與實作。首先，於3.1 節之系統架構中，說明 本系統之架構設計，以及簡單介紹，如何在網頁上產生與編輯 Java 物件資料，
並儲存為JSOG。於 3.2 節之系統實作中，闡述系統實作的細節。