angular學(xué)習(xí)總結(jié)

1、Angularjs學(xué)習(xí)總結(jié)初識angularJsAngularJS是一款開源JavaScript庫，由Google維護(hù)，用來協(xié)助單一頁面應(yīng)用程序運(yùn)行的。它的目標(biāo)是通過MVC模式（MVC）功能增強(qiáng)基于瀏覽器的應(yīng)用，使開發(fā)和測試變得更加容易。AngularJS是創(chuàng)建在這樣的信念上的：即聲明式編程應(yīng)該用于構(gòu)建用戶界面以及編寫軟件構(gòu)建，而命令式編程非常適合來表示業(yè)務(wù)邏輯。1框架采用并擴(kuò)展了傳統(tǒng)HTML，通過雙向的數(shù)據(jù)綁定來適應(yīng)動態(tài)內(nèi)容，雙向的數(shù)據(jù)綁定允許模型和視圖之間的自動同步。因此，AngularJS使得對DOM的操作不再重要并提升了可測試性。設(shè)計(jì)目標(biāo)：· 將應(yīng)用邏輯與對DOM的操作解耦。

2、這會提高代碼的可測試性。· 將應(yīng)用程序的測試看的跟應(yīng)用程序的編寫一樣重要。代碼的構(gòu)成方式對測試的難度有巨大的影響。· 將應(yīng)用程序的客戶端與服務(wù)器端解耦。這允許客戶端和服務(wù)器端的開發(fā)可以齊頭并進(jìn)，并且讓雙方的復(fù)用成為可能。· 指導(dǎo)開發(fā)者完成構(gòu)建應(yīng)用程序的整個(gè)歷程：從用戶界面的設(shè)計(jì)，到編寫業(yè)務(wù)邏輯，再到測試。Angular遵循軟件工程的MVC模式，并鼓勵(lì)展現(xiàn)，數(shù)據(jù)，和邏輯組件之間的松耦合。通過依賴注入（dependency injection），Angular為客戶端的Web應(yīng)用帶來了傳統(tǒng)服務(wù)端的服務(wù)，例如獨(dú)立于視圖的控制。因此，后端減少了許多負(fù)擔(dān)，產(chǎn)生了更輕的Web

3、應(yīng)用。Angular常用指令及屬性1. ng-appangular的入口，告訴angular 這里面的代碼都由angular接手。2. ng-bind2.1 簡要說明效果等同于 ；但是 在未加載完成時(shí)會顯示出代碼，很丑，而ng-bind在未加載完成時(shí)不會顯示出來，較為美觀2.2等效語法2.2 適用場景首頁2.3 效果圖3. Scope3.1簡要說明3.2常用屬性· $id, 通過nextUid方法來生成一個(gè)唯一的標(biāo)識· $phase, 這是一個(gè)狀態(tài)標(biāo)識,一般在dirty check時(shí)用到，表明現(xiàn)在在哪個(gè)階段· $parent, 代表自己的上級scope屬性

4、3; $watchers, 保存scope變量當(dāng)前所有的監(jiān)控?cái)?shù)據(jù),是一個(gè)數(shù)組· $nextSibling, 下一個(gè)兄弟scope屬性· $prevSibling, 前一個(gè)兄弟scope屬性· $childHead, 第一個(gè)子級scope屬性· $childTail, 最后一個(gè)子級scope屬性· $destroyed, 表示是否被銷毀· $asyncQueue, 代表異步操作的數(shù)組· $postDigestQueue, 代表一個(gè)在dirty check之后執(zhí)行的數(shù)組· $listeners, 代表scope變量當(dāng)前

5、所有的監(jiān)聽數(shù)據(jù),是一個(gè)數(shù)組· $listenerCount, 暫無· $isolateBindings, 暫無3.3event事件3.3.1 $emit只能向parent controller傳遞event與data，將事件向上傳播到所有子作用域，包括自己。自己的理解：獲取父作用域里定義的事件，并觸發(fā)。3.3.2 $broadcast只能向child controller傳遞event與data，事件向下傳播到所有子作用域，包括自己。自己的理解：獲取子作用域里定義的事件，并觸發(fā)。3.3.3$on用于接收event與data。自己的理解：自定義事件，不會主動觸發(fā)。4. ng-

6、repeat4.1簡要說明循環(huán)體的渲染指令。4.2常用屬性5. ng-include5.1簡要說明在一個(gè)頁面里引用另一個(gè)頁面，有點(diǎn)像jsp:include。5.2兩種寫法6. directive指令6.1 restrict6.2 template6.3 replace6.4 templateUrlPs:實(shí)測本機(jī)上的chrome加上該命令還是無法加載，chrome版本：50.0.2661.102 m6.5 transclude6.6 priority && terminal6.7 link&&compile6.7.1 使用時(shí)機(jī)6.7.2 complie解析6.7.

7、3 complie例子6.7.4 link解析6.7.5 link例子（簡寫）6.8 controller && controllerAs && require6.9 scope7. constant && value && run7.1constant解析7.2 value解析7.3 run解析7.4例子8.$state8.1 方法8.1.1go('page', params: 'data': null)8.1.1.1方法詳解該方法是ui-router下面跳轉(zhuǎn)頁面的方法，和href差不多，但是他可

8、以帶參數(shù)，參數(shù)獲取：控制器注入$stateParams之后可以通過$stateParams.data來獲取data。8.1.1.2參數(shù)詳解page：需要跳轉(zhuǎn)的頁面；params：需要傳遞的參數(shù)。8.1.2 reload()$state.reload()方法只刷新路由部分，與瀏覽器的刷新按鈕功能是不一樣的。8.1.3 get()8.2屬性8.2.1 current代表的當(dāng)前路由信息，例：8.2.2 params8.3事件8.3.1 $stateChangeError狀態(tài)改變錯(cuò)誤8.3.2 $stateChangeStart狀態(tài)開始改變8.3.3 $stateChangeSuccess狀態(tài)改變成功

9、8.3.4 $stateNotFound沒有找到狀態(tài)Angular常用方法1. foreach2.element2.1 簡要說明返回jquery對象。2.2 主要方法addClass()-為每個(gè)匹配的元素添加指定的樣式類名after()-在匹配元素集合中的每個(gè)元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點(diǎn)append()-在每個(gè)匹配元素里面的末尾處插入?yún)?shù)內(nèi)容attr() - 獲取匹配的元素集合中的第一個(gè)元素的屬性的值bind() - 為一個(gè)元素綁定一個(gè)事件處理程序children() - 獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選clone()-創(chuàng)建一個(gè)匹配的元素集合的深度拷貝副本c

10、ontents()-獲得匹配元素集合中每個(gè)元素的子元素，包括文字和注釋節(jié)點(diǎn)css() - 獲取匹配元素集合中的第一個(gè)元素的樣式屬性的值data()-在匹配元素上存儲任意相關(guān)數(shù)據(jù)detach()-從DOM中去掉所有匹配的元素empty()-從DOM中移除集合中匹配元素的所有子節(jié)點(diǎn)eq()-減少匹配元素的集合為指定的索引的哪一個(gè)元素find() - 通過一個(gè)選擇器，jQuery對象，或元素過濾，得到當(dāng)前匹配的元素集合中每個(gè)元素的后代hasClass()-確定任何一個(gè)匹配元素是否有被分配給定的（樣式）類html()-獲取集合中第一個(gè)匹配元素的HTML內(nèi)容next() - 取得匹配的元素集合中每一個(gè)元

11、素緊鄰的后面同輩元素的元素集合。如果提供一個(gè)選擇器，那么只有緊跟著的兄弟元素滿足選擇器時(shí)，才會返回此元素on() - 在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)off() - 移除一個(gè)事件處理函數(shù)one() - 為元素的事件添加處理函數(shù)。處理函數(shù)在每個(gè)元素上每種事件類型最多執(zhí)行一次parent() - 取得匹配元素集合中，每個(gè)元素的父元素，可以提供一個(gè)可選的選擇器prepend()-將參數(shù)內(nèi)容插入到每個(gè)匹配元素的前面（元素內(nèi)部）prop()-獲取匹配的元素集中第一個(gè)元素的屬性（property）值ready()-當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來執(zhí)行remove()-將匹配元素集合從DOM中刪除

12、。（同時(shí)移除元素上的事件及 jQuery 數(shù)據(jù)。）removeAttr()-為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）removeClass()-移除集合中每個(gè)匹配元素上一個(gè)，多個(gè)或全部樣式removeData()-在元素上移除綁定的數(shù)據(jù)replaceWith()-用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合text()-得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代toggleClass()-在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類triggerHandler() -為一個(gè)事件執(zhí)行附加到元素的所有處理程序unbind() - 從元素上刪除一個(gè)以前附加事件處理程序val()-獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值wrap()-在每個(gè)匹配的元素外層包上一個(gè)html元素經(jīng)驗(yàn)1. 多controller嵌套多controller嵌套時(shí)，子controller可以訪問父controller的變量等，與js一致