一般angular单个页面只能加载一个ng-app，一个页面会自动加载第一个ng-app，其它ng-app不会被加载。如果想加载多个ng-app就需要使用angular.bootstrap去加载后面的ng-app@H_502_2@ 相关问题： @H_502_2@ 单个angular页面能否有两个ng-app 开源中国社区 @H_502_2@ http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page
手动初始化angular.bootstrap详细说明@H_502_2@ angular.bootstrap(element,[modules],[config]);@H_502_2@ 其中第一个参数element:是绑定ng-app的dom元素；@H_502_2@ modules：绑定的模块名字@H_502_2@ config：附加的配置@H_502_2@ 代码：
<html>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
<div ng-controller="myCtrl">
{{ hello }}
</div>
<script type="text/javascript">
var app = angular.module("bootstrapTest",[]);
app.controller("myCtrl",function($scope){
$scope.hello = "hello,angular from bootstrap";
});
// angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
angular.bootstrap(document,['bootstrapTest']);
</script>
</body>
</html>
@H_502_2@ 值得注意的是：@H_502_2@ 1、angular.bootstrap只会绑定第一次加载的对象。@H_502_2@ 2、后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。@H_502_2@ 3、一个ng-app可以有多个controller。@H_502_2@ 4、.$scope的范围局限于每一个controller中。@H_502_2@ 5、$rootScope 可作用于整个应用中。是各个 controller中scope 的桥梁。用rootscope定义的值，可以在各个controller 中使用。
@H_502_2@
完整实例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<div id="myApp2" ng-app="myApp2" ng-controller="myCtrl">
<h1>myApp2 姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<div id="myApp3" ng-app="myApp3" ng-controller="myCtrl">
<h1>myApp3 姓氏为 {{lastname}} 家族成员:</h1>
<input type="button" value="rootScope共享" ng-click="say()"></input>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$rootScope) {
$scope.names = ["Emil","Tobias","Linus"];
//$rootScope.lastname = "Refsnes";
});
var app2 = angular.module('myApp2',[]);
app2.controller('myCtrl',$rootScope) {
$scope.names = ["Emil2","Tobias2","Linus2"];
$rootScope.lastname = "Refsnes--2";
});
var app3 = angular.module('myApp3',[]);
app3.controller('myCtrl',$rootScope) {
$rootScope.lastname = "Refsnes--3";
$rootScope.say = function(){
$rootScope.lastname = "Refsnes---";
}
});
//手动加载myApp2 ng-app
angular.bootstrap(document.getElementById("myApp2"),['myApp2']);
angular.bootstrap(document.getElementById("myApp3"),['myApp3']);
</script>
</body>
</html>
