深入AngularJs(2)

1.AngularJS

默認在一個html界面中只啓動一個 ng-app 模塊,而且是界面中第一次出現的那個使用 ng-app 聲明的模塊.

且使用ng-app,頁面加載時會這樣處理:

angular找到ng-app標記後,首先加載與module相關的directive
創建應用相關的injector(依賴管理器)
開始對ng-app爲根節點的DOM“編譯”

2、angular.bootstrap方法可以理解爲省去查找ng-app的過程,傳給bootstrap的參數一個爲DOM對象,另一個爲模塊名數組

3.the code following

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <div ng-app='myApp' ng-controller='myCtrl'>
    	<input type="text" ng-model='first'><br/>
    	<input type="text" ng-model='last'><br/>
    	{{first + '  '+last}}
    </div>
    <!-- active more ng-app by yourself-->
    <div id="test" ng-controller='test-con'>
        <input type="text" ng-model='content.message'>
    	<p>{{content.message}}</p>
    </div>
	<script src='angular.js'></script>
	<script>
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope){
			$scope.first = 'wang';
			$scope.last = 'luffy';
		});
		var myapp = angular.module('test',[]);
		myapp.controller('test-con',function($scope){
			var content = {};
			content.message='hello world';
			$scope.content = content;
		});
		//add
		angular.element(document).ready(
			function(){
				angular.bootstrap(document.getElementById('test'),['test']);
			});
	</script>
</body>
</html>
也可以直接angular.bootstrap(document.getElementById('test'),['test']);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章