AngularJs教學
用AngularJs建立一個簡單的SPA頁面:
什麼是SPA:
SPA（Single Page Application）意思是僅有一個頁面的應用程式，也就是說網頁不需跳轉頁面就可以達到基本的新增、查詢、修改、刪除資料功能。
為什麼要使用SPA:
1.把 Server-side 的工作丟給 Client-side，以降低 Server 的負載量。
2.提升用戶體驗，讓操作流程變得更加流暢，不需要等待跳轉畫面的時間。
使用SPA的缺點:
1.由於畫面都是過script渲染，可能會造成SEO的表現變差
由於畫面交由client-side來渲染，前端的開發工作會變得較為複雜，因此我們需要一個好的框架來做管理，可以降低開發的複雜度，也可以統一開發的風格，讓後續維護工作變簡單。
本文將簡單示範，如何使用AngularJs建立一個SPA demo，步驟如下:
首先，在主畫面引入AngularJs的Library，主畫面可以是JSP，也可以是html。
AngularJs最基本的功能只需要angular.min.js就可以執行了，本文因為需要Route功能，所以引入angular-route.min.js模塊。
步驟一:建立一個模組。
在script內，建立一個模組，命名為=myApp，並且注入ngRoute模組。
Angular 建立最基本的模組語法如下
var app= angular.module('yourAppName', []);
第一個參數是自訂模組名稱，第二個陣列參數則是說當使用這模組(Module)時，它還會需要使用那些額外的模組(Module)，可以是自己建的或是原生的，預設帶入ng模組。當使用到Angular提供的原生模組時，要引入相應的模塊。
步驟二:設定URL路徑mapping
用URL來決定畫面呈現那些元件，以及使用那個controller。
Config方法可以在Module載入前做一些設定。
引入的ngRoute模組後，可以透過依賴注入的方式獲得$routeProvider物件，使用when方法可以定義URL、畫面、controller之間的對應關係。
Otherwise方法可以在URL都對應不到時重導。
步驟三:建立controller
建立前面在config內有使用到的controller
一個模組可以，定義多個controller，來處理畫面中不同的區塊，每個controller都有獨立的作用域，在controller注入$scope物件，可以在作用域內定義方法，以及變數，每個controller之間$scope互相獨立。若controller之間需要互相溝通，可以使用service物件，或者可以在網址上帶入參數，在接收方controller注入$routeParams，以此取得傳入參數。
本文中以service裡的陣列模擬DB裡面的資料，將dbData物件，注入到各個controller中，service也可以放共用方法讓各個controller共享。
實際在專案要取得server端資料中可以使用$http物件發送ajax到server端。語法如下:
步驟四:準備畫面
建立一個主要畫面index.html，然後在主要畫面上，建一些a標籤用來改變URL。
在html標籤上定義一個ng-app屬性，名稱為要該畫面要套用的模組，一個html只能定義一個ng-app做為根模組。ng-app也可以定義在body或div上，表示AngularJs只作用在此範圍內。
ng-view屬性會根據URL動態載入不同的模板，以及套用對應的controller。
再建立之前config中定義的各html模板，一個最基本的SPA畫面就完成了。
上圖是query.html，透過主畫面ng-app=”myapp”宣告，可以使用ng-…的宣告式，在input標籤設定ng-model屬性可以將畫面的值，雙向綁定到masterCtrl裡面的$scope中的屬性例如ng-model=”myName”，在controller中可以$scope.myName取得。
ng-repeat可以將$scope中的陣列動態渲染到畫面上，{{ name }} 是angular表達式，可以將$scope裡的值取出，也可以加入Filtter，讓資料格式化呈現，而不會影響到資料本身例如:{{ x.date | date:"yyyy-MM-dd"}}，可以將日期格式化成"yyyy-MM-dd"。更多用法可以參考官方文件: https://docs.angularjs.org/api/ng/filter
ng-click 可以在畫面上監聽click事件，用法跟原生onclick差不多，但是ng-click內呼叫的方法必須要在$scope中有定義。
畫面呈現如下:
新增畫面的html如下:
上圖是新增跟修改的頁面，主要以editBean物件傳值，saveAdd方法將editBean push 到dbData中，這樣查詢時就可以取得最新的資料了。
新增畫面呈現如下:
以上就是以AngualrJs製作SPA簡單的範例，本文主要介紹AngualrJs使用方法，詳細的設計概念以及實現原理，還是建議讀者可以上網搜尋參閱，對於開發及除錯都會頗有幫助。
