AngularJS 1.x版本 學習教程
AngularJScss
被Google收購了，而且應用到Google的不少產品中html
Google有一個產品，寫了17000多行代碼，使用AngularJS改版以後，代碼1500行代碼html5
應用場景：angularjs
- 先後端相分離的應用 HTML JS（PHP）
- CRUD類型的應用（Create、Read、Update、Delete）
- SPA（Single Page App：單頁面應用）
AngularJS特性一：MVC模式
AngularJS 第一大特性採用MVC模式設計：使數據分離更加便於維護與修改。json
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. 複雜的使用 結合路由切換讀取不一樣的數據：
- 1. angularJS 1.x 基礎 教程 總結
- 2. AngularJS 1.x 思惟索引
- 3. AngularJS 1.x 簡單使用
- 4. GEF學習教程1-Unplugged版
- 5. 新手該學習Python2.x版本仍是3.x版本
- 6. Angularjs-基礎教程（1）
- 7. Golang 1.x版本泛型編程
- 8. 創建ionic 1.X 版本工程
- 9. 10個學習AngularJS的最佳教程
- 10. AngularJS學習筆記1——什麼是AngularJS？
- 更多相關文章...
- • MySQL的版本以及版本號 - MySQL教程
- • SVN 版本回退 - SVN 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西