VOOZH about

URL: https://read01.com/oL7nQNK.html

⇱ AngularJS自學之路——知識點記錄 - 壹讀


Sunday, Apr 12, 2026

AngularJS自學之路——知識點記錄

2016/08/07 來源:CSDN博客
Web前端(106)

AngularJS(以下知識點摘抄自《AngularJS權威教程》一書。)

1、ng-app指令標記了AngularJS腳本的作用域;

2、AngularJS應用引導過程有3個重要點:

1)注入器(injector)將用於創建此應用程式的依賴注入(dependency injection);

2)注入器將會創建根作用域作為我們應用模型的範圍;

3)AngularJS將會連結根作用域中的DOM,從用ngApp標記的HTML標籤開始,逐步處理DOM中指令和綁定。

3、在AngularJS中,一個視圖是模型通過HTML、模板渲染之後的映射。

4、當應用啟動之後,會有一個根作用域被創建出來,而控制器的作用域是根作用域的一個典型後繼。

5、AngularJS的開發團隊將其描述為一種構建動態Web應用的結構化框架。

6、任何一個獨立視圖組件中的值都是動態替換的。

7、自動數據綁定使我們可以將視圖理解為模型狀態的映射。

8、AngularJS會記錄數據模型所包含的數據在任何特定時間點的值,而不是原始值。當AngularJS認為某個值可能發生變化時,它會運行自己的事件循環來檢查這個值是否變「髒」。如果該值從上次事件循環運行之後發生變化,則該值被認為是「髒」值。這也是Angular可以跟蹤和響應應用變化的方式。

這個事件循環會調用$digest循環。這個過程被稱為髒檢查。

9、為了表示內部和內置的庫函數,Angular使用$預定義對象。只要遇到$符號,你都可以只把它看作一個Angular對象。

10、數據模型對象(model object)是指$scope對象。

11、DOM元素上的ng-controller聲明所有被它包含的元素都屬於某個控制器。

12、通常被認為,在視圖中通過對象的屬性而非對象本身來進行引用綁定,是Angular中的最佳實踐。

13、AngularJS允許我們使用angular.module方法來聲明模塊,這個方法能夠接受兩個參數,第一個是模塊的名稱,第二個是依賴列表,也就是可以被注入到模板中的對象列表。

調用這個方法時如果只傳遞一個參數,就可以用它來引用模塊。

14、$scope對象是定義應用業務邏輯、控制器方法和視圖屬性的地方。

15、作用域提供了監視數據模型變化的能力。它允許開發者使用其中的apply機制,將數據模型的變化在整個應用範圍內進行通知。

16、將應用的業務邏輯都放在控制器中,而將相關數據都放在控制器的作用域中,這是非常完美的架構。

案例:

demo-1.0.html 數據綁定和第一個AngularJS Web應用

demo-1.1.html 數據綁定的最佳實踐

—— 2016/08/04

17、作用域有以下的基本功能:

1)提供觀察者以監視數據模型的變化;

2)可以將數據模型的變化通知給整個應用,甚至是系統外的組件;

3)可以進行嵌套,隔離業務功能和數據;

4)給表達式提供運算時所需的執行環境。

18、使用ng-controller指令可以將一個控制器對象附加到DOM元素上。

19、ng-controller指令為這個DOM元素創建了一個新的$scope,並將它嵌套在$rootScope中。

20、作用域的表達式就是賦值給作用域對象的變量。

21、$scope對象的生命周期處理有四個不同階段:1)創建;2)連結;3)更新);4)銷毀。(P35

22、指令通常不會創建自己的$scope,但也有例外。比如:ng-controllerng-repeat指令會創建自己的子作用域並將它們附加到DOM元素上。

23、控制器在AngularJS中的作用是增強視圖。

24、AngularJS中的控制器是一個函數,用來向視圖的作用域中添加額外的功能。

25、將控制器命名為[Name]Controller而不是[Name]Ctrl是一個最佳實踐。

26、ng-click指令將瀏覽器中的mouseup事件,同設置在DOM元素上事件處理程序事件進行綁定。

27、用內置指令ng-click可以將按鈕、連結等其他任何DOM元素同點擊事件進行綁定。

28、控制器可以將與一個獨立視圖相關的業務邏輯封裝在一個獨立的容器中。儘可能地精簡控制器是很好的做法。作為AngularJS開發者,使用依賴注入來訪問服務可以實現這個目的。

29、AngularJS允許在$scope上設置包括對象在內的任何類型的數據,並且在視圖中還可以展示對象的屬性。

30、$scope對象用來從數據模型向視圖傳遞信息。

—— 2016/08/05

31、AngularJS通過作用域將視圖、控制器和指令隔離開來。

32、AngularJS應用的任何一個部分,無論它渲染在哪個上下文中,都有父級作用域存在。對於ng-app所處的層級來講,它的父級作用域就是$roorScope

33、在指令內部創建的作用域被稱作孤立作用域。

34、除了孤立作用域外,所有的作用域都通過原型繼承而來,也就是說它們都可以訪問父級作用域。

35、默認情況下,AngularJS在當前作用域中無法找到某個屬性時,便會在父級作用域中查找。如果AngularJS找不到對應的屬性,會順著父級作用域一直向上尋找,直到抵達$rootScope為止。如果在$rootScope中也找不到,程序會繼續運行,但視圖無法更新。

36、控制器應該儘可能保持短小精悍,而在控制器中進行DOM操作和數據操作則是一個不好的實踐。

37、設計良好的應用會將複雜的邏輯放到指令和服務中。

38、當用$watch進行監聽時,AngularJS會對表達式或函數進行運算。

39、表達式和eval(javascript)非常類似,但由於表達式由AngularJS來處理,它們有以下顯著不同的特性:

1)所有的表達式都在其所屬的作用域內部執行,並有訪問本地$scope的權限;

2)如果表達式發生了TypeErrorReferenceError並不會拋出異常;

3)不允許使用任何流程控制功能(條件控制,例如if/else);

4)可以接受過濾器和過濾器鏈。

40、AngularJS通過$parse這個內部服務來進行表達式運算,這個服務能夠訪問當前所處的作用域。

41、將$parse服務注入到控制器中,然後調用它就可以實現手動解析表達式。

42、要在字符串模板中做插值操作,需要在你的對象中注入$interpolate服務。

43、$watch函數會監視$scope上的某個屬性。只要屬性發生變化就會調用對應的函數。可以使用$watch屬性在$scope上某個屬性發生變化時直接運行一個自定義函數。

案例:

demo-1.2.html 解析 AngularJS表達式

demo-1.3.html 插入字符串

您可能感興趣
免責聲明:本文內容來源于CSDN博客,文章觀點不代表壹讀立場,如若侵犯到您的權益,或涉不實謠言,敬請向我們提出檢舉
最新文章 / 服務條款 / 私隱保護 / DMCA / 聯絡我們

壹讀/READ01.COM