深入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']);

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