angularjs互動案例指導
由於過一段時間需要給小學弟小學妹講一講前後端互動的例子。 趁機整理一下原來的知識。 前後端互動，在我的理解來看，是為了保證資料的同步為目的的。 按照它動作的重心又可以分為 前端主導型，後端主導型。 前端主導型也就是在一個頁面的主體文件請求到了後，後面所有的內容都是通過請求json資料，或者說文字段 來進行互動，那麼它就必須在前端控制檢視的一致性，也就是通過js來操作使得頁面同步。也就是所謂的ajax非同步請求。因為說到非同步請求，更多的指資料的同步，卻忽略了檢視的同步。 後端主導型就是前臺只負責向後臺傳送請求或者訊號，所有的操作比如資料同步，檢視同步都是通過伺服器端完成，它是通過dom文件進行互動，也就是text/html格式的文字段。常見的比如jsp,velocity等。 所以說，以資料和檢視的同步為目的的話，我以前更多的是採用jq的方式。 眾所周知，jq對js做了簡單的封裝，它是基於事件驅動的。 也就是我們要做檢視同步的時候，必須對事件進行處理派發，重寫各個塊的程式碼以完成業務邏輯，而通常業務邏輯又是驚人一致，所以自然產生了很多冗餘程式碼。。 況且，js取資料的方式也讓自己有一些煩躁，想一想自己要在一個具有兩三百行密密麻麻的html文字程式碼中，要在幾十個id中，要在近百個class中，定位自己的元素的場景吧！ 首先自己對id的命名和class的命名就是第一個考驗。 其次，如何保證自己不在一次一次的枯燥操作中失去理智關電腦跑路。。 angularjs的出現，可以說很好的處理了這些問題。 2016年以來出現的前端三大框架vue,react,angular它們都是基於mvvc模式。 也就是說是以資料驅動的，那些簡單枯燥的同步工作我就不做了，解放了雙手，同時解放了大腦。。 此外，angularjs提供了雙向繫結這樣一個神器，再也不需要去一堆堆程式碼裡面定位某個屬性了。 可以簡單的講頁面分為幾個物件，我們直接操作物件就行了。 大大的解耦了html與js指令碼。 當然angularjs 與angular差別又大了很多，就不考慮了。 但是至少我們有必要用angularjs做互動。。
原因就說這麼多，下面就開始基礎內容的整理。
當網頁載入完畢，AngularJS 自動開啟。 **ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程式 的"所有者"。** ng-model 指令把輸入域的值繫結到應用程式變數 name。 ng-bind 指令把應用程式變數 name 繫結到某個段落的 innerHTML。 ng-init 指令初始化 AngularJS 應用程式變數。 HTML5 允許擴充套件的（自制的）屬性，以 data- 開頭。AngularJS 屬性以 ng- 開頭，但是您可 以使用 data-ng- 來讓網頁對 HTML5 有效。 AngularJS 表示式寫在雙大括號內：{{ expression }}。等同於 ng-bind AngularJS 模組（Module） 定義了 AngularJS 應用。 AngularJS 控制器（Controller） 用於控制 AngularJS 應用。 ng-app指令定義了應用, ng-controller 定義了控制器。 AngularJS 物件就像 JavaScript 物件 AngularJS 陣列就像 JavaScript 陣列 AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。 ng-app 指令初始化一個 AngularJS 應用程式。 ng-init 指令初始化應用程式資料。 ng-model 指令把元素值（比如輸入域的值）繫結到應用程式。 ng-repeat 指令會重複一個 HTML 元素
ng-model是用於表單元素的，支援雙向繫結。對普通元素無效； ng-bind用於普通元素，不能用於表單元素，應用程式單向地渲染資料到元素；
當ng-bind和{{}}同時使用時，ng-bind繫結的值覆蓋該元素的內容
Valid: true (如果輸入的值是合法的則為 true)。
Dirty: false (如果值改變則為 true)。
Touched: false (如果通過觸屏點選則為 true)
Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個物件，有可用的方法和屬性。 Scope 可應用在檢視和控制器上。 當在控制器中新增 $scope 物件時，檢視 (HTML) 可以獲取了這些屬性。 檢視中，你不需要新增 $scope 字首, 只需要新增屬性名即可，如： {{carname}} AngularJS 應用組成如下： View(檢視), 即 HTML。 Model(模型), 當前檢視中可用的資料。 Controller(控制器), 即 JavaScript 函式，可以新增或修改屬性。 過濾器可以使用一個管道字元（|）新增到表示式和指令中 currency 格式化數字為貨幣格式。 filter 從陣列項中選擇一個子集。 lowercase 格式化字串為小寫。 orderBy 根據某個表示式排列陣列。 uppercase 格式化字串為大寫 AngularJS 內建了30 多個服務。 有個 $location 服務，它可以返回當前頁面的 URL 地址。 $http 是 AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料 在 AngularJS 中我們可以使用 ng-option 指令來建立一個下拉列表，列表項通過物件和陣列迴圈輸出 ng-disabled 指令 ng-show 指令 ng-hide 指令 ng-click 指令 模組定義了一個應用程式。 模組是應用程式中不同部分的容器。 模組是應用控制器的容器。 控制器通常屬於一個模組。 可以通過 AngularJS 的 angular.module 函式來建立模組 ngAnimate 模型並不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素 ，如果事件發生 ngAnimate 就會使 用預定義的 class 來設定 HTML 元素的動畫。 AngularJS 提供很好的依賴注入機制。以下5個核心元件用來作為依賴注入： value factory service provider constant
接著以一個實際的例子來感受一下angualrjs的便利吧：
