angular有哪些牛逼特性呢？

1、模板機(jī)制
2、雙向數(shù)據(jù)綁定
3、模塊
4、指令
5、依賴注入
6、路由
7、過濾器

AngularJs核心特性

1、MVVM雙向數(shù)據(jù)綁定（Model-View-viewModel）model變化，view也變化
2、模板，將html文件解析到DOM中
3、模塊化與依賴注入
4、指令可以用來創(chuàng)建自定義標(biāo)簽，也可以用來裝飾元素或者操作DOM屬性

angular的路由和機(jī)制

angular路由功能是純前端的解決方案，與我們熟悉的后臺路由不太一樣，后臺路由，通過不用的url會路由到不同的控制器上（controller），再渲染(render)到頁面(HTML)。AngularJS的前端路由，需求提前對指定的(ng-app)，定義路由規(guī)則 (routeProvider)，然后通過不同的URL，告訴(ng-app)加載哪個頁面(HTML)，再渲染到(ng-app)視圖(ng- view)中。

angular的前端路由，雖然url輸入不一樣，頁面展示不一樣，其實(shí)完成單頁（ng-app）視圖(ng-view)的局部刷新，這樣看來，AngularJs做單頁應(yīng)用就有點(diǎn)標(biāo)配的感覺

Angular指令

ng-init：初始化變量
在屬性值中用=符號為變量值，用戶；隔開，并且不能使用var

ng-app：定義項(xiàng)目容器元素
可以有屬性值，此時要在js中定義這個項(xiàng)目
如果沒有屬性值，可以直接在視圖中使用了

ng-model：雙向綁定

ng-bind：插值的另一種寫法
頁面渲染時看不到插值符號

ng-controller：定義控制的

Angular.module 獲取應(yīng)用程序的
第一個參數(shù)表示app名稱
第二個參數(shù)表示依賴集合
注意：即使沒有依賴也要寫上空數(shù)組

controller 定義控制器的
第一個參數(shù)表示控制器的名稱
第一個參數(shù)表示工廠方法
默認(rèn)沒有參數(shù)的
作用域是一個空對象
用參數(shù)注入技術(shù)引入作用域服務(wù)
$scope

參數(shù)注入
使用什么服務(wù)注入什么服務(wù)
注意事項(xiàng)：
服務(wù)名字不能寫錯

事件
定義ng-事件名稱 = “callback”
與vue事件比較
不同點(diǎn)
1、定義方式
angular ng- 指令定義的
vue v-on 指令定義的

2、回調(diào)函數(shù)
angular 必須有參數(shù)集合（）
vue 可以不加參數(shù)集合（）

3、定義回調(diào)函數(shù)
angular 在作用域中定義
vue 在methods 中定義

4、回調(diào)函數(shù)參數(shù)
angular 與調(diào)用時候參數(shù)一致
vue 如果沒有參數(shù)集合，默認(rèn)一個參數(shù)就是事件對象

5、回調(diào)函數(shù)作用域
angular $scope
vue vue實(shí)例化對象

6、更改數(shù)據(jù)
angular 更改數(shù)據(jù)的兩種方式
this
$scope
vue 只能通過this
相同點(diǎn)：都可以通過server傳遞時間對象參數(shù)

顯隱元素：
ng-show：顯示元素
ng-hide：隱藏元素
他們實(shí)現(xiàn)原理都是通過設(shè)置class實(shí)現(xiàn)的
vue中ng-show是通過style行內(nèi)樣式中的display樣式設(shè)置的

插值表達(dá)式
在angular插值表達(dá)式不僅僅可以寫在插值符號中，還可以寫在ng-bind中

過濾器
json：將對象轉(zhuǎn)正json字符串
currency 過濾器
轉(zhuǎn)換價(jià)格
第一個參數(shù)表示前面表示符號
第二個參數(shù)表示保留小數(shù)位數(shù)
最后一位四舍五入

Date 過濾器
格式化日期
y 表示年
M 表示月
d 表示天
E 表示星期
h 表示12進(jìn)制的小時
H 表示24進(jìn)制的小時
s 表示秒
m 表示分
sss 表示毫秒

Filter 過濾器
過濾集合數(shù)據(jù)的
參數(shù)可以是字符串，此時會根據(jù)這個字符串進(jìn)行過濾
參數(shù)可以是變量，此時會根據(jù)這個變量的值進(jìn)行過濾
參數(shù)可以是函數(shù)，此時會根據(jù)這個函數(shù)執(zhí)行結(jié)果進(jìn)行過濾，函數(shù)不能執(zhí)行，執(zhí)行的話會根據(jù)執(zhí)行的結(jié)果的值進(jìn)行過濾。
這個過濾器在ng-bind指令中使用會有問題

字符串過濾器
uppercase 將字符串轉(zhuǎn)換成大寫的
lowercase 將字符串轉(zhuǎn)換成小寫的
limitTo 截取字符串
第一個參數(shù)表示截取的長度
第二個參數(shù)表示截取的位置
相當(dāng)于subStr
這個過濾器可以截取數(shù)組

Number 過濾器
科學(xué)計(jì)數(shù)法：沒三位加一個
參數(shù)表示保留小數(shù)的位數(shù)
最后一位會進(jìn)行四舍五入

orderBy 過濾器
對集合數(shù)據(jù)的排序
第一個參數(shù)表示排序的字段
如果字段值是數(shù)字，將比較數(shù)字的大小
如果字段只是字符串，將比較字符對應(yīng)的編碼
第二個參數(shù)表示是否倒序
True 倒序
false 正序（默認(rèn)值）

自定義過濾器
應(yīng)用程序有個filter方法，用來定義過濾器
兩個參數(shù)
第一個參數(shù)表示過濾器的名稱
第二個參數(shù)表示過濾器的工廠方法
只執(zhí)行一次
作用域空對象
沒有參數(shù)
必須有返回值就是過濾函數(shù)
第一個參數(shù)表示處理的數(shù)據(jù)
從第二個參數(shù)開始表示過濾器傳遞的參數(shù)
作用域是全局作用域
返回的值就是處理后的結(jié)果

與vue比較
Filter方法第二參數(shù)
參數(shù)
angular 沒有參數(shù)
vue 就是處理的數(shù)據(jù)以及傳遞的參數(shù)

作用域
angular 空對象
vue vue實(shí)例化對象

返回值
angular 過濾器函數(shù)
vue 處理的結(jié)果

在angular中可以是用多個過濾器
就要使用多個過濾器符號|
此時前一個過濾器輸出將作為

臟值檢測

就是表單驗(yàn)證
要為表單元素添加name屬性，angular會根據(jù)這個屬性在作用域中創(chuàng)建一個變量
四個屬性

$dirty 是否輸入
True 表示修改過
False 表示沒有修改過

$pristine 是否未輸入過
True 表示沒有修改過
False 修改過

$valid 是否合法
True 合法
False 不合法

$invalid 是否非法
True 非法
False 合法

表單元素 form 元素的name的屬性值對應(yīng)的變量里面是四個屬性
$dirty 所有表單子元素有沒有全部輸入過
$valid 所有子元素全部合法

驗(yàn)證指令
1、必填項(xiàng)
Required和ng-required
相同點(diǎn)
1 都是在初始化時候驗(yàn)證了
2 做必填項(xiàng)驗(yàn)證
不同點(diǎn)
1 required是h5屬性會被瀏覽識別 ng-required是angular提供的
2 required不用設(shè)置值 ng-required 必須設(shè)置值

2 長度驗(yàn)證
Maxlength Minlength ng-maxlength ng-minlength
相同點(diǎn)
1 輸入時進(jìn)行驗(yàn)證
2 都是驗(yàn)證長度
不同點(diǎn)
1Maxlength Minlength 是h5屬性，瀏覽器識別ng-maxlength ng-minlength angular指令

3 正則驗(yàn)證
pattern 和 ng-pattern
相同點(diǎn)
1 輸入時驗(yàn)證
2 都做正則驗(yàn)證
不同點(diǎn)
1 pattern 是h5提供的屬性 ng-pattern是angular提供的
2 pattern 是正則的內(nèi)容 ng-pattern是完整的正則表達(dá)式
ng-disabled表示表單元素是否可用
True表示禁用
False表示可用
ng-readyonly 表示表單元素是否只讀的
True 表示只讀
False 表示可以輸入

ng-disabled

angular 提供一個控制表單是否使用的指令叫做ng-disabled
如果屬性值是true 表示禁止
如果屬性值是false 表示啟用
我們可以通過切換他的值可以動態(tài)的控制他們

ng-checked指令

選框元素是否被選中
true 表示選中
false 表示沒被選中

ng-change事件

在輸入的內(nèi)容改變時觸發(fā)
無法訪問事件對象的
并且這個事件要依賴于 ng-model指令

ng-submit

表單提交事件
這個事件要綁定給form元素
觸發(fā)的這個事件元素確定form元素內(nèi)容submit類型元素

run方法

在應(yīng)用程序創(chuàng)建以后開始執(zhí)行一個方法，在這個方法中可以訪問全局變量
因此在這個方法中我們可以定義全局作用域信息
想使用跟作用域，，我們必須注入跟作用域服務(wù)
在這個方法中不能使用控制器作用，但是在控制器中可以使用跟作用域
跟作用域叫$rootScope
$element服務(wù)，獲取容器元素，是一個jqlite對象，可以像jq那樣使用，設(shè)置樣式，捕獲子元素，鏈?zhǔn)秸{(diào)用等等

angular的作用域是基于原型式繼承的，因此子作用域中沒有該數(shù)據(jù)，會順著原型鏈往上找，找到對應(yīng)的數(shù)據(jù)。一旦某個父作用域更改了原型鏈上的數(shù)據(jù)，此時子作用域就睡使用該數(shù)據(jù)，不會在向上去查找了。（就進(jìn)原則）

在作用域中，我們可以通過
$$prevsibing訪問上一個作用域
$$nextsibing訪問下一個作用域
在工作中不建議我們這樣，因?yàn)樗麑⒆饔糜蝰詈显谝黄鹆?br> 但是我們可以通過$parent,訪問父作用域，這是可以的
我們在作用域中可以通過原型鏈訪問父作用域中的數(shù)據(jù)，因此就不在使用$parent
如果子作用域中已經(jīng)定義了數(shù)據(jù)，在修改父級作用域中相同名稱數(shù)據(jù)時候，不會影響子作用域

ng-href 指令

為a標(biāo)簽提供的一個指令，這個指令可以動態(tài)的渲染a標(biāo)簽的href屬性
避免在渲染a標(biāo)簽的時候，href不存在打開錯誤的頁面
動態(tài)添加href屬性，因此在沒有添加該屬性之前不會有a連接特性的

ng-src指令

動態(tài)創(chuàng)建src屬性的，提高用戶體驗(yàn)，否則會根據(jù)插入符號請求一張錯誤的圖片地址（裂圖）
注意 ng-href與ng-src指令，都是一個指令，但是他們屬性值都是一個字符串，所以我們要使用插值符號
這個兩個指令要使用數(shù)據(jù)通過插值符號{{}}

創(chuàng)建類

vue中有三中
class = '{{}}'
v-bind:class='{}'
v-bind:class='[]'

angualr也支持，并且，數(shù)組成員以及對象成員可以包含多個類
ng-class動態(tài)綁定類
值可以是字符串（可以包含空格，此時是多個類）
值可以是變量（變量的值可以是空格，此時是多個類）
值可以是對象（對象的屬性名稱可以包含空格，此時一個屬性名成表示多個類名）
屬性值是一個布爾值
true表示保留這個類
false表示刪除這個類
值可以是數(shù)組（數(shù)組成員可以包含空格，此時一個成員代表多個類）
在使用對象或者數(shù)組的時候，我們盡量一個成員，一個屬性代表一個類，這樣每個類都是可控的，否則多個類耦合在一起是不可控的

ng-style指令

動態(tài)創(chuàng)建樣式的，但是跟vue有些不同
angular中ng-style屬性值只能有兩種情況
一種值是對象
屬性名稱（key）是css樣式名稱
屬性值（value）是css樣式值
一種值是變量，變量的值就是一個對象
屬性名稱（key）是css樣式名稱
屬性值（value）是css樣式值

ng-if

模板判斷指令
值為true顯示
值為false隱藏
angular中ng-if指令控制的元素顯示位置是通過注釋確定的
當(dāng)我們?yōu)橐粋€元素添加一個ng-fi指令的時候，會創(chuàng)建一個相對應(yīng)的注釋

ng-swith

跟js中swith語句很象，多分枝控制模板創(chuàng)建
angular根據(jù)case創(chuàng)建一個ng-swith-when指令
根據(jù)default創(chuàng)建了一個ng-swicth-when指令
ng-switch通過on屬性來添加一個判斷的條件

ng-repeat 指令

相當(dāng)于vue中v-for指令
語法ng-repeat='item in data'
是用來循環(huán)創(chuàng)建模板的
提供了6個臨時變量
$index: 循環(huán)的索引值
$first: 是否第一次循環(huán)
$last: 是否是最后一次循環(huán)
$middle: 除了第一次和最后一次循環(huán)
$odd: 奇數(shù)次循環(huán) （視圖中對應(yīng)偶數(shù)次）
$even: 偶數(shù)次循環(huán) （視圖中對應(yīng)奇數(shù)次）
后五個指令的值都是布爾值

ng-include

異步加載模板指令
在頁面中，我們可以通過異步請求來加載一個模板
他的值是一個js環(huán)境，我們是可以用變量
如果這個指令具有控制元素的使用，此時將作為控制內(nèi)的模板，該控制器定義的的數(shù)據(jù)可以在該模板中使用