默认在一个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']);