Angular VS jQuery
-
jQuery:庫
- 封裝了一些常用的方法幽纷，我們主動調(diào)用這些方法
-
Angular:框架
- 框架提供了一些結(jié)構(gòu)或者模式博敬，
- 我們按照框架提供的規(guī)則去寫代碼
- 然后由框架自己去執(zhí)行相應(yīng)的操作
思想上:
jQuery: 提高了dom操作的開發(fā)效率偏窝。
Angular: 不提倡dom操作，幾乎沒有dom操作(底層還是操作的dom)
+ angular中操作domangular.element(),叫做jqLite
angular.element
- 輕量級的jQuery,
注意：在獲取dom對象時傳入的參數(shù)是一個原生dom對象
復(fù)習(xí)并總結(jié)Angular開發(fā)流程
0.通過npm/bower/暴力的方式/cdn 拿到想到angular.js文件伦意。
1.在HTML代碼中引入angular.js這個文件
2.在HTML代碼上加上ng-app指令硼补，告訴angular來管理我們的代碼，這個指令只能使用一次
3.在JS代碼中通過angular.module('模塊名',[])創(chuàng)建一個模塊离钝，然后在HTML中的ng-app指令指定一下模塊名'ng-app="模塊名"'
- 在JS代碼中創(chuàng)建控制器
xxx.controller('控制器的名字',function(){}),在HTML代碼中通過ng-controller指令由我們當前的控制器來管理數(shù)據(jù)模型ng-controller="控制器的名字" - 建模（根據(jù)頁面原型抽象出數(shù)據(jù)模型）, 最終得到視圖模型(ViewModel)
- 通過
$scope來暴露頁面上所需要使用的一些數(shù)據(jù) - 在HTML代碼中通過
ng-model/ng-click/{{}}將剛剛暴露的數(shù)據(jù)綁定到頁面上去 - 在JS中寫一些具體業(yè)務(wù)相關(guān)的代碼
復(fù)習(xí)MVC
- MVC是一種設(shè)計思想,它是約定了程序的結(jié)構(gòu)應(yīng)該是怎么奈辰。
- 每一個組成原件都會有一個明確的職責(zé)乱豆。
- 提高代碼的結(jié)構(gòu)和可維護性(代碼的執(zhí)行效率肯定是不會提高的，10行代碼论泛，會分到10個不同的方法蛹屿。);
$scope
- 視圖和控制器之間的數(shù)據(jù)橋梁
- 用于在視圖和控制器之間傳遞數(shù)據(jù)
- 用來暴露數(shù)據(jù)模型（數(shù)據(jù)，行為）
ViewModel
- $scope 實際上就是MVVM中所謂的VM（視圖模型）
- 正是因為$scope在Angular中大量使用甚至蓋過了C（控制器）的概念坟瓢，所以很多人（包括我）把Angular稱之為MVVM框架
- 這一點倒是無所謂折联，具體看怎么用罷了
模塊
模塊的創(chuàng)建
通過
anuglar.mdoule()方法來創(chuàng)建模塊.
*注意,如果傳入兩個參數(shù)就是去創(chuàng)建模塊识颊，如果只傳入第一個參數(shù)，就會變成獲取模塊清笨。*
模塊的劃分式
1.根據(jù)項目中具體的功能去劃分模塊
2.根據(jù)具體的文件功能的類型去劃分模塊
控制器的創(chuàng)建方式
傳統(tǒng)的方式創(chuàng)建控制器(不推薦使用這種方式)
// 通過全局函數(shù)來創(chuàng)建控制器
// angular會把我們創(chuàng)建的全局函數(shù)作為控制器使用
function demoController($scope){
$scope.name='小明';
}
面向?qū)ο蟮姆绞絼?chuàng)建控制器
<div ng-controller="demoController as obj ">
{{obj.name}}
{{age}}
</div>
<!-- 1.引入angular.js文件 -->
<script src="node_modules/angular/angular.js"></script>
<script>
// 3.創(chuàng)建模塊
var app =angular.module('myApp',[]);
// 4.創(chuàng)建控制器
app.controller('demoController',function($scope){
// 可以當作構(gòu)造函數(shù)來使用
this.name="小明";
$scope.age=12;
})
</script>
安全的創(chuàng)建控制器的方式
- 原因：angular在控制器的回調(diào)函數(shù)中是通過參數(shù)名來傳遞參數(shù)的抠艾。
- 通過將第二個參數(shù)改為數(shù)據(jù)組：數(shù)據(jù)的最后一個參數(shù)還是原來的fucntion,數(shù)據(jù)前的參數(shù)是我們想要anuglar傳遞的參數(shù)的字符串形式奠伪，fucntion里的參數(shù)需要與數(shù)組前面的元素一對應(yīng)首懈。
app.controller('demoController',['$scope','$log',function($scope,$log){}])
依賴注入的原理
- 核心是toString()
- 獲取函數(shù)形參的方式
指令
在 AngularJS 中將前綴為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素調(diào)用方法究履、定義行為綁定數(shù)據(jù)等
簡單說：當一個 Angular 應(yīng)用啟動，Angular 就會遍歷 DOM 樹來解析 HTML藐俺，根據(jù)指令不同泥彤，完成不同操作
-
ng-bind
- 用來解決表達式閃爍問題
-
<p ng-bind="數(shù)據(jù)模型"></p>
注意：只能夠在雙標簽中使用ng-bind指令
-
ng-cloak
- 用來解決表達式閃爍問題
<p class="ng-cloak">{{name}}</p>- 利用angular在加載會移除頁面上所以名為ng-cloak的樣式名的特性吟吝。
-
ngSanitize模塊
npm install angular-sanitize- 使用的是ng-bind-html指令來渲染數(shù)據(jù)模型。
-
ng-repeat
可以用來循環(huán)輸出數(shù)組
寫在哪個元素上就是循環(huán)哪個元素浙宜。
-
語法：類似于forin 循環(huán)
<div ng-repeat="item in data ">{{item}}</div>
+ track by $index 解決數(shù)組中數(shù)據(jù)有重得的問題
+<li ng-repeat="item in tesData track by $index"></li> 還可以用來渲染key,value對
-
ng-repeat 在遍歷里會暴露一些數(shù)據(jù)模型,
- $even:提供了一個布爾值，當為true時表示當前數(shù)據(jù)是第偶數(shù)條數(shù)據(jù),從索引0開始計算
- $odd:提供了一個布爾值同仆，當為true時表示當前數(shù)據(jù)是第奇數(shù)條數(shù)據(jù),從索引0開始計算
- $first,$last ,$middle
ng-class:
-
從多種樣式中選擇一個樣式
- 語法：類似于從一個key,value對象中獲取其中一個屬性的值
- ng-class="{'A':'red','B':'blue','C':'green'}"
-
從多種樣式中選擇多個
- 語法：也是寫一個key,value對象俗批，這里的key是我們提供的類樣式名市怎，value是一個布爾值，為true時對應(yīng)的key會被作為樣式名加入到class中
ng-hide/ng-show
- ng-hide：需要一個布爾值：當為true時為隱藏當前元素
- ng-show: 需要一個布爾值：當為true時為顯示當前元素
ng-if:需要一個布爾值：當為true時為顯示當前元素
為false時是刪除當前元素
ng-switch:與ng-switch-when同用臭觉，類似與js中的switch case
<div ng-switch="name">
<div ng-switch-when="小明">我是小明</div>
<div ng-switch-when="小紅">我是小紅</div>
<div ng-switch-when="小月">我是小月</div>
</div>
其他常用指令
- ng-checked：
- 單選/復(fù)選是否選中,是單向數(shù)據(jù)綁定
- ng-selected：
- 是否選中
- ng-disabled：
- 是否禁用
- ng-readonly：
- 是否只讀
常用事件指令
不同于以上的功能性指令蝠筑，Angular還定義了一些用于和事件綁定的指令：
- ng-blur：失去焦點
- ng-focus：獲得焦點
- ng-change：改變事件
- ng-copy：復(fù)制事件
- ng-click： ng-click="add()"
- ng-dblclick：雙擊事件
- ng-submit： 表單提交事件
指令的標準使用方式
data-xxx,在使用angular指令時揩懒，只需要在原先的指令前加上data-前綴。
x-
