為什么要用AngularJs？

要了解為什么使用AngularJS首先就要接受它的思想：

　　首先，angularJS借助了傳統(tǒng)MVC的架構(gòu)模式(model模型 ?view視圖 ?controller控制器)；通過控制器來改變視圖，再由視圖來改變數(shù)據(jù)模型；它在借鑒MVC的方法中用的很好，讓我們使用起來很方便，它的架構(gòu)模式與其說是傳統(tǒng)的MVC，倒不如說是MVW（whatever 任意），也可以說是MVVM。

　　在我們使用了angularJS之后就不要再去使用jQuery了，因?yàn)閍ngularJS不會存在一句對dom節(jié)點(diǎn)的操作。

?

angularJS的原理：

angular的實(shí)現(xiàn)機(jī)制是由其內(nèi)部的三個(gè)對象來完成的：$watch,$digest,$apply

其中：

**$watch**:監(jiān)聽對象，所有綁定在頁面上的數(shù)據(jù)和屬性都會添加到監(jiān)聽對象

**$digest**:循環(huán)對象，負(fù)責(zé)逐一循環(huán)$watch對象，觀察原來的值和現(xiàn)在的值有沒有發(fā)生變化，如果發(fā)生變化就給變化的對象做個(gè)標(biāo)記，再去循環(huán)，直至沒有變化時(shí)將變化的節(jié)點(diǎn)渲染到頁面上。但是由于可能存在無限循環(huán)，所有我們可以設(shè)置循環(huán)次數(shù)不超過10次，以避免循環(huán)次數(shù)過多影響性能下降。

**$apply**:配置angular的上下文環(huán)境

?

angular最大的缺點(diǎn)就是性能

###$scope

?angular都是通過$scope來操作的
$rootScope父對象，他作用的范圍是div范圍外；下面可以加$scope子對象，他作用的范圍是定義的那個(gè)div里的子作用域內(nèi)
通過js代碼來獲取$scope對象

<div nag-controller="MainController">//可以內(nèi)嵌nag-controller,<p>{{name}}</p></div><script>angular.module("mainApp",[])//沒有引用也要寫個(gè)中括號mainApp.controller("MainController",function(必須寫$scope)
{$scope.name="張飛"});//視圖影響數(shù)據(jù)，單向綁定</script>

?在Angular中最好將Dom節(jié)點(diǎn)替換掉，利用數(shù)據(jù)綁定的方式來進(jìn)行DOM操作

Angular優(yōu)點(diǎn)：簡化代碼操作，比原生操作簡單；
Angular缺點(diǎn)：我們在對性能要求高的時(shí)候，由于他會隱藏DOM操作，所以在我們需要手動操作DOM的時(shí)候就不適應(yīng)，比如一些游戲；但做移動端、webApp/webPage這些都可以使用Angular

ng-repeat指令：重復(fù)；指令就不需要雙花括號

Angular特性：1、雙向綁定??2、模板??3、MVC
??4、服務(wù)和依賴注入：被動的獲取，聲明式，不關(guān)心過程，只重視結(jié)果，被動獲取可以把創(chuàng)造他的地方和使用的地方所分離開；但依賴注入的$scope名字不能亂寫
??5、指令：ng開頭的，不僅僅是屬性，也可以是標(biāo)簽，自定義指令后面要講
??6、過濾器
??7、Ajax
??8、表達(dá)式：{{}}，可以在表達(dá)式里面進(jìn)行算術(shù)運(yùn)算、比較運(yùn)算(返回布爾值),但不能調(diào)用函數(shù)

####過濾器
內(nèi)置過濾器：

{{250 | currency}}//變成貨幣的樣式 {{250 | currency：‘￥’}}//人民幣的樣式

內(nèi)置九個(gè)過濾器：currency,data,,filter(匹配字符串)，orderBy(排序):'age',（還有些我忘啦~）

$scope.now = new Date();{{now | data:'yyyy/MM/dd HH:mm:ss'}}{{studes | filter:'劉'}}//可以做搜索用{{stu in students | orderBy:'age'}}//將age升序顯示，-age表示降序排列

?

####指令
內(nèi)置指令：
1、樣式指令
**ng-class**:用來給元素綁定指令

<style>.redText{color:red}</style><p ng-class="{redText:isRed}">hello!</p>$scope = false/true;true就顯示，false不顯示

ng-show:顯示true/false
ng-hide:隱藏
ng-style:樣式，json格式{}，也可以寫在$scope里，然后引用???????????????到ng-style="";

2、表單相關(guān)指令
下面這些都是通過數(shù)據(jù)影響視圖的單向訪問，頁面上不能通過選擇來改變數(shù)據(jù)；如果要雙向就要通過ng-model
ng-checked:在checkbox和radio中值為true/false,可以表示是否選中;
ng-selected:在下拉框中true/false
ng-disabled:true表示不能選，false表示能選
ng-multi：表示多選
ng-readyonly:表示只讀狀態(tài)

注意：視圖影響數(shù)據(jù)可以理解為在html里可以通過ng-model改變html里面標(biāo)簽的屬性值

3、事件綁定相關(guān)指令
ng-click
????ng-click="show()"
????$scope.show = function(){}
ng-src指令也要寫{{}}雙花括號
????img src="{{src}}"//但這種寫法瀏覽器會報(bào)錯(cuò),因?yàn)殪o態(tài)頁面在最先加載的時(shí)候系統(tǒng)會請求路徑，但請求不了；但圖片會顯示是因?yàn)樵诩虞dangular的文件的時(shí)候會顯示；所以這種寫法會影響性能
????img ng-src = "{{src}}"//兩種寫法都會顯示圖片，這種寫法瀏覽器在最先加載的時(shí)候不能識別，就不會請求后面的路徑
????$scope.src = ;

注意：為了避免用戶在加載時(shí)有一閃一閃的效果，就將angular的文件發(fā)在</head>前面，大部分問題能解決，但如果網(wǎng)速慢的話還是會出現(xiàn)空白再顯示的情況

?

##angularJS的自定義

自己了解啦~

angularJS的用處：

angularJS常用在webapp等單頁應(yīng)用

它的數(shù)據(jù)綁定都

轉(zhuǎn)載于:https://www.cnblogs.com/guoxianjunweb/p/angularJS.html

總結(jié)

以上是生活随笔為你收集整理的常用前端框架Angular和React的一些认识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。