基本概述
AngularJS誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、依賴注入等等。
mvc設計模式
Angular遵循軟件工程的MVC模式,並鼓勵展現，數據，和邏輯組件之間的鬆耦合.通過依賴注入（dependency injection），Angular爲客戶端的Web應用帶來了傳統服務端的服務，例如獨立於視圖的控制。 因此，後端減少了許多負擔，產生了更輕的Web應用
- Model:數據,其實就是angular變量($scope.XX);
- View: 數據的呈現,Html+Directive(指令);
- Controller:操作數據,就是function,數據的增刪改查;
雙向綁定
框架採用並擴展了傳統HTML，通過雙向的數據綁定來適應動態內容，雙向的數據綁定允許模型和視圖之間的自動同步
依賴注入
依賴注入(Dependency Injection,簡稱DI)是一種設計模式, 指某個對象依賴的其他對象無需手工創建，只需要“吼一嗓子”，則此對象在創建時，其依賴的對象由框架來自動創建並注入進來,其實就是最少知識法則;模塊中所有的service和provider兩類對象，都可以根據形參名稱實現DI.
模塊化設計
高內聚低耦合法則
1)官方提供的模塊 ng、ngRoute、ngAnimate
2)用戶自定義的模塊 angular.module(‘模塊名’,[ ])
表達式
- 表達式的寫法是{{表達式 }} 表達式可以是變量或是運算式
- ng-app 指令作用是告訴子元素指令是歸angularJs的,angularJs會識別
- ng-app 指令定義了 AngularJS 應用程序的根元素
- ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序
雙向綁定
ng-model 指令用於綁定變量,這樣用戶在文本框輸入的內容會綁定到變量上，而表達式可以實時地輸出變量
初始化指令
ng-init指令來對變量初始化
控制器
ng-controller用於指定所使用的控制器
$ scope貫穿整個 AngularJS App 應用,它與數據模型相關聯,同時也是表達式執行的上下文。有了scope,同樣的$scope發生改變時也會立刻重新渲染視圖
事件指令
ng-click 是最常用的單擊事件指令，在點擊時觸發控制器的某個方法
循環數組
ng-repeat指令用於循環數組變量
使用內置服務 $ http向後端請求數據
注意
Scope(作用域)是angular應用程序中視圖（HTML）和控制器（JavaScript）之間的紐帶。
也就是說HTML和JavaScript可以通過它來傳輸、共享數據。Scope是一個對象，有自己的很多的方法和屬性，$scope正是創建控制器時傳遞的Scope對象的一個實例。
頁面初始化遍歷數據
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
var app = angular.module("youlexuan", []);//第一個參數是模塊名，第二個參數是依賴
app.controller("brandController", function ($scope, $http) {//第一個參數是名字，第二個參數是操作
$scope.findAll = function () {
$http.get('../brand/findAll.do').success(function (response) {//response爲形參類似於ajax的data
$scope.list = response;
})
}
})
</script>
綁定到頁面標籤
<body ng-app="youlexuan" ng-controller="brandController" ng-init="findAll()">
遍歷數據
<tr ng-repeat="entity in list">
<td><input type="checkbox" class="eachbox"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改
</button>
</td>
</tr>
分頁
<!-- 分頁組件開始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分頁組件結束 -->
頁面引入分頁標籤（在數據行後）
<!-- 分頁 -->
<tm-pagination conf="paginationConf"></tm-pagination>
在module位置引入依賴
分頁控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 5,
perPageOptions: [5, 10, 20, 30],
onChange: function(){
//切換頁碼，重新加載
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
};
分頁控件配置裏需要findPage這個函數（自定義的）
$scope.findPage = function (page,size) {
$http.get("../brand/findPage.do?page="+page+"&size="+size).success(function (response) {
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total;
})
}
頁面不需要再綁定ng-init，因爲分頁插件會自動加載請求後端拿到數據