為什么要用AngularJs？

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

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

　　在我們使用了angularJS之后就不要再去使用jQuery了，因為angularJS不會存在一句對dom節點的操作。

?

angularJS的原理：

angular的實現機制是由其內部的三個對象來完成的：$watch,$digest,$apply

其中：

**$watch**:監聽對象，所有綁定在頁面上的數據和屬性都會添加到監聽對象

**$digest**:循環對象，負責逐一循環$watch對象，觀察原來的值和現在的值有沒有發生變化，如果發生變化就給變化的對象做個標記，再去循環，直至沒有變化時將變化的節點渲染到頁面上。但是由于可能存在無限循環，所有我們可以設置循環次數不超過10次，以避免循環次數過多影響性能下降。

**$apply**:配置angular的上下文環境

?

angular最大的缺點就是性能

###$scope

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

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

?在Angular中最好將Dom節點替換掉，利用數據綁定的方式來進行DOM操作

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

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

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

####過濾器
內置過濾器：

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

內置九個過濾器：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表示降序排列

?

####指令
內置指令：
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、表單相關指令
下面這些都是通過數據影響視圖的單向訪問，頁面上不能通過選擇來改變數據；如果要雙向就要通過ng-model
ng-checked:在checkbox和radio中值為true/false,可以表示是否選中;
ng-selected:在下拉框中true/false
ng-disabled:true表示不能選，false表示能選
ng-multi：表示多選
ng-readyonly:表示只讀狀態

注意：視圖影響數據可以理解為在html里可以通過ng-model改變html里面標簽的屬性值

3、事件綁定相關指令
ng-click
????ng-click="show()"
????$scope.show = function(){}
ng-src指令也要寫{{}}雙花括號
????img src="{{src}}"//但這種寫法瀏覽器會報錯,因為靜態頁面在最先加載的時候系統會請求路徑，但請求不了；但圖片會顯示是因為在加載angular的文件的時候會顯示；所以這種寫法會影響性能
????img ng-src = "{{src}}"//兩種寫法都會顯示圖片，這種寫法瀏覽器在最先加載的時候不能識別，就不會請求后面的路徑
????$scope.src = ;

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

?

##angularJS的自定義

自己了解啦~

angularJS的用處：

angularJS常用在webapp等單頁應用

它的數據綁定都

轉載于:https://www.cnblogs.com/guoxianjunweb/p/angularJS.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。