angular簡(jiǎn)介
- jQuery ：庫
- 封裝了一些常用的方法忽舟，我們主動(dòng)的調(diào)用這些方法
-- 提高了代碼的利用蛹屿，以及代碼后期的維護(hù)
- Angular: 前端框架
- 框架提供了一些結(jié)構(gòu)或者模式酸些，
- 我們是根據(jù)框架提供的結(jié)構(gòu)或者模式去書寫代碼
- 由框架幫助我們?nèi)?zhí)行相應(yīng)的操作歇拆。
什么是angular
- 1、一款非常優(yōu)秀的前端高級(jí) JS 框架脓魏。
- 2创夜、有了這一類框架就可以輕松構(gòu)建 SPA（single page application） 應(yīng)用程序杭跪。
- 3、其核心就是通過指令擴(kuò)展了 HTML驰吓，通過表達(dá)式綁定數(shù)據(jù)到 HTML涧尿。
- 4、Angular不推崇DOM操作檬贰，也就是說在NG中幾乎找不到任何的DOM操作姑廉。
Angular 的核心特性
指令
MVC
模塊化 angular.module()
雙向數(shù)據(jù)綁定
指令
- angular中以ng-開頭的屬性叫作指令
- ng-app 告訴angular來管理html代碼，管理ng-app所在元素及其子元素翁涤。
- ng-click 用來注冊(cè)點(diǎn)擊事件,
var add = document.getElementById('add');
add.onclick=function(){
val = (val-0)+1; // num.value = (num.value - 0) +1
}
$scope.add = {
$scope.num = ($scope.num - 0 )+ 1;
} - ng-model：var num = document.getElementById('num').value
- ng-init :進(jìn)行初始化操作: ng-init="user.name='小明'"
模塊(module)
- angular.module('myApp',[])
第一個(gè)參數(shù)是模塊的名字
第二個(gè)參數(shù)是一個(gè)數(shù)組桥言，數(shù)組的元素是該模塊所依賴其他模塊的名字
注意,即使不依賴任何模塊，也需要給第二個(gè)參數(shù)傳遞一個(gè)空數(shù)組
否則angular.module('myApp')就是去獲取名為myApp的模塊對(duì)象
控制器(controller)
- angular.module('myApp',[]).controller('demoController',function($scope){})
第一個(gè)參數(shù)葵礼，是控制器的名字
第二個(gè)參數(shù)号阿，是一個(gè)回調(diào)函數(shù)，在回調(diào)函數(shù)里寫我們想要的js代碼鸳粉。
雙向數(shù)據(jù)綁定
- 數(shù)據(jù)模型的值發(fā)生改變扔涧，就會(huì)導(dǎo)致頁面值的改變.
頁面值的改變，就會(huì)導(dǎo)致數(shù)據(jù)模型值的改變，這各種相互影響的關(guān)系就是雙向數(shù)據(jù)綁定枯夜。 - ng-model 的使用
MVC 思想
- M:Model 模型 :數(shù)據(jù)存儲(chǔ)弯汰，一些業(yè)務(wù)邏輯
- V:View 視圖 ：就是用來展示數(shù)據(jù)
- C:Controller 控制器: 調(diào)度業(yè)務(wù)邏輯
常用指令
-
ng-bind
- 用來解決表達(dá)式閃爍問題
-
<p ng-bind="數(shù)據(jù)模型"></p>
注意：只能夠在雙標(biāo)簽中使用ng-bind指令
-
ng-cloak
- 用來解決表達(dá)式閃爍問題
<p class="ng-cloak">{{name}}</p>- 利用angular在加載會(huì)移除頁面上所以名為ng-cloak的樣式名的特性。
-
ngSanitize模塊
npm install angular-sanitize- 使用的是ng-bind-html指令來渲染數(shù)據(jù)模型湖雹。
-
ng-repeat
可以用來循環(huán)輸出數(shù)組
寫在哪個(gè)元素上就是循環(huán)哪個(gè)元素咏闪。
-
語法：類似于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對(duì)
-
ng-repeat 在遍歷里會(huì)暴露一些數(shù)據(jù)模型,
- $even:提供了一個(gè)布爾值，當(dāng)為true時(shí)表示當(dāng)前數(shù)據(jù)是第偶數(shù)條數(shù)據(jù),從索引0開始計(jì)算
- $odd:提供了一個(gè)布爾值摔吏，當(dāng)為true時(shí)表示當(dāng)前數(shù)據(jù)是第奇數(shù)條數(shù)據(jù),從索引0開始計(jì)算
- $first,$last ,$middle
ng-class:
-
從多種樣式中選擇一個(gè)樣式
- 語法：類似于從一個(gè)key,value對(duì)象中獲取其中一個(gè)屬性的值
- ng-class="{'A':'red','B':'blue','C':'green'}"
-
從多種樣式中選擇多個(gè)
- 語法：也是寫一個(gè)key,value對(duì)象鸽嫂，這里的key是我們提供的類樣式名，value是一個(gè)布爾值舔腾，為true時(shí)對(duì)應(yīng)的key會(huì)被作為樣式名加入到class中
ng-hide/ng-show
- ng-hide：需要一個(gè)布爾值：當(dāng)為true時(shí)為隱藏當(dāng)前元素
- ng-show: 需要一個(gè)布爾值：當(dāng)為true時(shí)為顯示當(dāng)前元素
ng-if:需要一個(gè)布爾值：當(dāng)為true時(shí)為顯示當(dāng)前元素
為false時(shí)是刪除當(dāng)前元素
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：失去焦點(diǎn)
- ng-focus：獲得焦點(diǎn)
- ng-change：改變事件
- ng-copy：復(fù)制事件
- ng-click： ng-click="add()"
- ng-dblclick：雙擊事件
- ng-submit： 表單提交事件
