天天看點
傳回

AngularJS自學之路——知識點記錄（一）

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應用

<span style="font-size:18px;"><!DOCTYPE html>
<html  ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>資料綁定和第一個AngularJS Web應用</title>
</head>
<body>
	
	<div ng-controller="MyCtrl">
		<h1>{{ clock }}</h1>
	</div>



	<script src="assets/angularjs/angular-1.3.0.js"></script>
	<script>
		var myApp = angular.module('MyApp', []);
		myApp.controller('MyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
			var updateClock = function() {
				$scope.clock = new Date();
				$timeout(function() {
					updateClock();
				}, 1000);
			}

			updateClock();
		}]);
	</script>
</body>
</html></span>

demo-1.1.html 資料綁定的最佳實踐

<span style="font-size:18px;"><!DOCTYPE html>
<html  ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>資料綁定的最佳實踐</title>
</head>
<body>
	
	<div ng-controller="MyCtrl">
		<h1>{{ clock.now }}</h1>
	</div>

	<script src="assets/angularjs/angular-1.3.0.js"></script>
	<script>
		var myApp = angular.module('MyApp', []);
		myApp.controller('MyCtrl', ['$scope', function($scope) {
			$scope.clock = {
				now: new Date()
			};

			var updateClock = function() {
				$scope.clock.now = new Date();
			};

			setInterval(function() {
				$scope.$apply(updateClock);
			}, 1000);
		}]);
	</script>
</body>
</html></span>

—— 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-controller和ng-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）如果表達式發生了TypeError和ReferenceError并不會抛出異常；

3）不允許使用任何流程控制功能（條件控制，例如if/else）；

4）可以接受過濾器和過濾器鍊。

40、AngularJS通過$parse這個内部服務來進行表達式運算，這個服務能夠通路目前所處的作用域。

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

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

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

案例：

demo-1.2.html 解析 AngularJS表達式

<span style="font-size:18px;"><!DOCTYPE html>
<html  ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>解析 AngularJS表達式</title>
</head>
<body>
	<div ng-controller="MyController">
		<input type="text" ng-model="expr" placeholder="Enter an expression">
		<h2>{{parseValue}}</h2>
	</div>
	<script src="assets/angularjs/angular-1.3.0.js"></script>
	<script>
		var myApp = angular.module('MyApp', []);
		myApp.controller('MyController', ['$scope', '$parse', function($scope, $parse) {
			$scope.world = 'This is my world.';
			$scope.$watch('expr', function(newVal, oldVal, scope) {
				console.log(newVal, oldVal, scope);
				if(newVal != oldVal) {
					// 用該表達式設定parseFun
					var parseFun = $parse(newVal);
					console.log(parseFun);
					// 擷取經過解析後表達式的值
					$scope.parseValue = parseFun(scope);
				}
			})
		}]);
	</script>
</body>
</html></span>

demo-1.3.html 插入字元串

<span style="font-size:18px;"><!DOCTYPE html>
<html  ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>插值字元串</title>
</head>
<body>
	<div ng-controller="MyController">
		<input type="email" ng-model="to" placeholder="Recipient"><br/><br/>
		<textarea ng-model="emailBody" cols="30" rows="10"></textarea>
		<pre>{{previewText}}</pre>
	</div>
	<script src="assets/angularjs/angular-1.3.0.js"></script>
	<script>
		var myApp = angular.module('MyApp', []);
		myApp.controller('MyController', ['$scope', '$interpolate', function($scope, $interpolate) {
			$scope.to = '[email protected]';
      		$scope.emailBody = 'Hello {{ to }},\n\nMy name is Ari too!';

      		// 在{{previewText}}内部的文本中可以将{{to}}當做一個變量來使用，并對文本的變化進行實時更新

			$scope.$watch('emailBody', function(body) {
				if(body) {
					var template = $interpolate(body);
					$scope.previewText = template({to: $scope.to});
				}
			})
		}])
	</script>
</body>
</html></span>

—— 2016/08/06

web前端 angularjs Angular
上一篇: BootStrap中小圖示在web項目中不能正常顯示
下一篇: SQL注入--二次注入原理案例(sqli-lab-less-24)

繼續閱讀