AngularJS
被Google收購了，並且應用到Google的很多產品中
Google有一個產品，寫了17000多行代碼，使用AngularJS改版之后，代碼1500行代碼
應用場景：
- 前后端相分離的應用 HTML JS（PHP）
- CRUD類型的應用（Create、Read、Update、Delete）
- SPA（Single Page App：單頁面應用）
AngularJS特性一：MVC模式
AngularJS 第一大特性采用MVC模式設計：使數據分離更加便於維護與修改。
M(model): 模型-用來處理數據；
V(view): 視圖-用來顯示數據；
C(controller): 控制器-用來分配數據給視圖顯示(調度作用)；
代碼示例：
<!DOCTYPE html><html ng-app><head><script src="JS/angular.min.js"></script><script> function ng1($scope,$rootScope){ // 局部范圍變量$scope.name = "梁"; // 全局范圍變量 $rootScope.age = 20;}function ng2(){}</script>
</head>
<body>
<div ng-controller="ng1"> {{name}} {{age}} </div>
<div ng-controller="ng2">{{age}}</div>
</body>
</html>
注意點：
* ng-app 指令：在哪里注入就說明從哪里開始用angular解析。
* ng-controller 指令：指定該區域使用哪個控制器來解析。
* $scope 局部范圍變量：定義的變量只能在該函數內部使用。
* $rootScope 全局范圍變量：定義的變量可以在全部范圍中使用。
*{{變量名}} 在視圖層中用 { { } } 符號來解析變量內的數據。
AngularJS特性二：MVVM雙向數據綁定模式
AngularJS 第二大特性采用MVVM模式設計：使模型與視圖層相互關聯，更加方便使用。
模型變化視圖也跟着變化，視圖變化模型也跟着變化。
代碼示例：
<!DOCTYPE html>
<html ng-app >
<head>
<script src="JS/angular.min.js"></script>
<script>
// 文字兩秒后變換
function ng1($scope,$timeout){
$scope.name="李";
$timeout(function(){
$scope.name="王";
},2000);
}
</script>
</head>
<body>
<div ng-controller="ng1"> {{name}}</div>
</body>
</html>
AngularJS特性三：模塊化處理 以及代碼壓縮問題
AngularJS 第三大特性分模塊化處理：減少全局變量的污染（減少變量的沖突）; 減少模塊與模塊之間的依賴（模塊1出錯了，不影響模塊2）; seaJS saas模塊化處理的框架
實現：
- 先定義模塊angular.module(‘模塊的名稱’,[‘依賴的其他模塊’])
- 調用模塊ng-app調用
- 代碼壓縮問題處理方法
代碼示例：
<html ng-app=”app”>
var ng = angular.module('app',[]); // 定義模塊
// 綁定控制器
ng.controller('a',['$scope',function($scope){ // 代碼壓縮問題解決
$scope.name = 'angular1';
}]);
ng.controller('b',['$scope',function($scope){
$scope.name = 'angular2';
}]);
ng.controller('c',['$scope',function($scope){
$scope.name = 'angular3';
}]);
<div ng-controller="a"><p>{{name}}</p></div>
<div ng-controller="b"><p>{{name}}</p></div>
<div ng-controller="c"><p>{{name}}</p></div>
注意點：
* 代碼壓縮：項目完成后代碼壓縮會將形參壓縮導致不能用，解決方法：在綁定控制器時第二個參數設置為數組，第一個元素為真是的作用域，第二個元素函數的參數對應前面真是的作用域。
AngularJS：過濾器的使用
AngularJS 過濾器的使用：更加方便的進行數據轉換及數據排列。
AngularJS：過濾器擴展(在js中使用、自定義過濾器)
AngularJS 過濾器拓展：
- 過濾器的組合使用
- 在js中的使用
- 自定義過濾器
是模塊下面的方法： 模塊名.filter();
操作步驟：
1. 調用模塊里面的 filter() 方法 返回一個函數 其中參數 str 代表定義的變量的值
2. 在模型中定義變量
3. 在視圖中調用自定義的過濾器顯示輸出
AngularJS：ng-repeat指令(1)
ng-repeat 相當於for(var i in arr){} 在控制器中寫數據 使用ng-repeat指令循環到視圖當中。
AngularJS：ng-repeat指令(2)
結合ng-repeat指令與過濾器實現排序與模糊搜索
AngularJS：ng-repeat指令(3) 屬性、自定義循環的開始和結束
屬性：
1. $index: 返回數據的索引 從0開始；
2. $first: 返回布爾值 索引在第一個的為true，其他都是false；
3. $last: 返回布爾值 索引在最后一個的為true，其他都是false；
4. $middle: 返回布爾值 索引在中間的為true，其他都是false；
5. $even: 返回布爾值 索引在偶數位置的為true，其他都是false；
6. $odd: 返回布爾值 索引在基數位置的為true，其他都是false。
實例： 通過在class里面判斷偶數進行各行換色。
自定義循環的開始和結束：
ng-repeat-start ng-repeat-end 在開始和結束中循環一個整體。
AngularJS：事件指令
事件指令：
- ng-click / ng-dblclick 單擊 / 雙擊；
- ng-mousedown / up 鼠標按下 / 抬起；
- ng-mousemove / over / out 鼠標移動 / 移入 / 移出 ;
- ng-keydown / up / press 鍵盤按下 / 抬起 / 按住 ;
- ng-focus / blur 獲得光標 / 失去光標 ;
- ng-submit 提交 ;
- ng-selected 下拉菜單默認被選擇(與之前相比，可以加變量或者函數) ;
- ng-change 內容改變事件經常結合ng-model指令使用 ;
- ng-copy / cut / paste 內容復制 / 剪切 / 粘貼 ;
* 紅色標記指令為angularJS新增事件指令。
實例：
復選框被選中相應的下拉列表也被選中。
復制
AngularJS：input指令
input指令：
- ng-disabled 按鈕是否禁用(結合 $interval服務使用) ;
- ng-readonly 輸入框是否為只讀模式 ;
- ng-checked 復選框是否被選中 ;
- ng-value 表單的值 ;
實例：
按鈕5秒后被釋放。
AngularJS：ng-bind數據顯示相關指令
www.bootcdn.cn/angular.js/1.4.0/ 加速器cdn地址
ng-bind指令：
在頁面有alert() 彈出框時 在點擊彈出框確定前如果未使用 ng-bind相關指令，會將{{....}}顯示出來，解決此問題的辦法就是在視圖當中使用 ng-bind 相關指令：
1. ng-bind=“變量名” 只能輸出一個變量 ；
2. ng-bind-template= “ {{變量名}} {{變量名}} {{變量名}} ” 能輸出多個變量，變量名 外要加 {{}} 符號 ；
3. ng-bind-html= “變量名” 變量名外不需要加{{}} 符號，輸出數據中帶有html標簽的數據(注意點：angularJS 將不常用的方法寫在框架外部，以便使框架更加輕便，要想使用外部方法首先要在模塊中加載此方法才可以使用，ng-bind-html 指令就是被加載到外部的方法)；
4. ng-non-bindable 將變量名原封不動輸出將{{}}符號同時輸出
AngularJS：CSS樣式相關的指令和DOM操作相關的指令
CSS樣式相關的指令：
- ng-cloak 不常用 控制css顯示和隱藏 display:none ;
- ng-class 增加class屬性 格式：ng-class= “{class名：true}”或false ;
- ng-style 設置樣式，格式： ng-style= “{{變量名}}”變量內容寫json格式{color: ‘red’, background: ‘red’} ;
- ng-href 設置超鏈接 格式：ng-href= “{{變量名}}”;
- ng-src 設置圖片src屬性 格式：ng-src= “{{變量名}}”;
- ng-attr-(suffix) 設置屬性 格式：ng-attr-title=“{{變量名}}” / ng-attr-width=“{{變量名}}” / ... (suffix)屬性名;
DOM操作相關的指令：
- ng-show 控制顯示隱藏 返回布爾值 ;
- ng-hide 控制顯示隱藏 返回布爾值 ;
- ng-if DOM節點的添加刪除操作 返回布爾值 true表示創建節點 / false 表示刪除節點；
- ng-switch 不常用：返回布爾值 true 顯示 / false 隱藏 ;
- ng-open 不常用 兼容性不好： html5 open 屬性返回true展開 / false 折疊；
用法： on 是條件
AngularJS：指令擴展
指令擴展：
- ng-init 初始化一個數據變量 在嵌套循環中使用；
用法：在循環中套循環中將索引循環出來使用，不能用</p> 標簽循環。
2. ng-include 加載模板；
用法：加載外部模板，注意點：(1)必須在服務器環境下加載，(2)必須在引號中在加引號變成字符串不然會被理解成變量。
3. ng-model 模型賦值；
ng-model擴展： ng-model-options updateOn: “監控的事件名稱”；
用法： 在輸入框輸完文字失去光標后下面顯示出文字來。
4. ng-controller 綁定控制器；
ng-controller擴展：as面向對象用法：
AngularJS：自定義指令
自定義指令：
與自定義過濾器一樣，都是模塊里面的方法，第一個參數是指令名稱，第二個參數是一個函數方法，返回一個對象格式。
格式：
AngularJS：服務
AngularJS中的服務就是用來處理數據的，相當與MVC中的M(模型)的角色。
1. 學習AngularJS內置的一些服務。
$timeout
$interval 等
要想使用這些服務，第一步需要先注入到控制器里面
2. 自定義服務。
AngularJS：$http服務詳解以及跨域請求的注意事項
$http服務：
$http異步請求服務 get / post / jsonp
jsonp注意事項：
- 如果使用的是angularJS，提供了跨域請求的方法
- 如果沒有使用angularjs，需要自定義跨域請求的方法
- 服務器端一定要支持跨域（jsonp）請求
還有一種更省事的方法：在服務端不做任何限制
練習：
使用angularJS內置$http服務中的jsonp方法完成百度搜索
AngularJS：$location服務以及$anchorScroll服務
$location服務(地址欄中的服務)：
$location服務里面的方法：
- absUrl() : 獲取完成的文件路徑；
- paht()： 路由地址，需要先設置；
- search()： 地址欄參數；
- hash()： 跳轉到id=*** 相當於錨點；
- url()： 獲取文件后面的參數；
三種不常用：
- host()： 獲取主機名；
- prot()： 獲取端口號；
- protocol()： 獲取協議；
$anchorScroll() 服務(結合$location做瞄點功能，實現頁面跳轉)：
實現瞄點頁面內調整功能。$anchorScroll() 解決多次點擊錨點沒有反應的問題。
AngularJS：$cacheFactory緩存服務
$cacheFactory緩存服務：
AngularJS：供應商概念
供應商概念：針對服務的相關初始配置工作(修改初始配置)。通過模塊下面的 config([ ‘服務名稱Provider’]) 進行修改(所有的配置要在config要在最上面定義)：
1. 修改定界符號配置。
2. 修改錨點阻止自動滾動配置。
AngularJS：自定義服務的三種方式以及service的特點
自定義服務的三種方式：
- provider:
-
factory:
service:
AngularJS：自定義服務provider的特點
provider 特點：
增刪改查案例：
provider 特點：
默認不能使用系統內置的服務，但是可以在供應商config里面進行配置，而且只有provider定義的服務才可以使用 .config() ，只能在provider中修改定界符、手動滾動等配置。
AngularJS：總結provider、factory、service的區別
factory特點：
可以使用系統內置服務，也可以使用 .config() 配置一些變量，並且可以使用this代表factory代表供應商，但是不能配置定界符、手動滾動。
service特點：
可以使用系統內置服務，但是不能使用配置 .config()。推薦使用。
AngularJS：service自定義服務實現百度搜索
AngularJS：封裝公共的服務
每個控制器都有可能會使用自定義服務 所以將模塊里面的服務寫到 service.js 里面去，並且將自定義服務的名稱加載到控制器中。
AngularJS：AngularJS的插件應用：
AngularJS：AngularJS中路由介紹以及實現
ng-route：路由插件：
在單頁面應用里面，一定會有很多欄目例如：作品列表、文章列表、個人中心等，我們點擊某個欄目的時候為了用戶體驗更流暢，通常不會讓其直接跳轉到其他網頁，而是通過路由設置。
注意：
現在使用的angular.min.js 的版本是：1.3，使用 ng-route插件的時候，他的版本要低於angular.js 的版本。
AngularJS：給路由設置單獨控制器以及在路由傳遞參數
ng-route 設置單獨控制器：
ng-route 定義控制器：
ng-route 傳遞參數：
- 在視圖層用 / 添加參數：
- 在config配置中用 /：自定義變量名接收參數：
- 在控制器中使用參數通過 $routeParams服務：
結果：
AngularJS：$location服務結合ngRoute實現路由的切換
路由切換：
1. 使用$location.path() 生成路徑，但是生成的路徑后面的參數只能有一個。
2. 接收參數並制定控制器。
3. 默認首頁也要寫上參數。
4. 在控制器里面注入$location
AngularJS：服務內部事件兩種廣播方式
服務內部事件廣播：
在嵌套div標簽 控制器中，給其中一個標簽加了事件，也想讓上面或者下面能夠接收該事件，這時需要事件廣播。
例如：
- 向上廣播：
2.向下廣播，$broadcast，其他都一樣：
AngularJS：事件廣播應用場景
事件廣播： 通常用來監聽路由切換。
方法：
阻止事件廣播，不常用。
AngularJS：animate動畫插件的簡單使用
animate動畫插件的簡單使用：
- 通過CSS3的方式實現動畫效果；
-
通過css指令完成 淡入淡出動畫
- 通過JS實現運動效果，實現更復雜的操作；
AngularJS：支持ng-enter動畫效果的指令
AngularJS：ngAnimate動畫插件的使用
通過JS實現運動效果，實現更復雜的操作：
AngularJS：ngResource數據交互插件
ngResource 數據交互插件：類似於$http服務，基於RESTFul架構插件。
- 簡單的使用：
2. 復雜的使用 結合路由切換讀取不同的數據：
