AngularJS中多个ng-app（手动加载模块）

1.当有多个ng-app时：（首先是要加载angularJS）

<div ng-app="">
　　<p>姓名：<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
　　<p> {{name}} </p>
</div>
<div ng-app="">
　　<p>年龄：<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
　　<p> {{age}} </p>
</div>

结果如下：

解析：AngularJs默认只加载一个ng-app。

 

2.假设多个ng-app具有不同的名字：

<div ng-app="name">
　　<p>姓名：<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
　　<p> {{name}} </p>
</div>
<div ng-app="age">
　　<p>年龄：<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
　　<p> {{age}} </p>
</div>

结果如下：

3.那么如何一个页面有多个ng-app：

<div ng-app="name">
　　<p>姓名：<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
　　<p> {{name}} </p>
</div>
<div id="A2" ng-app="age">
　　<p>年龄：<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
　　<p> {{age}} </p>
</div>
<script type="text/javascript">
　　var app1 = angular.module("name",[]);
　　var app2 = angular.module("age",[]);
 
　　//手动加载模块
　　var ageDom = document.getElementById('A2');
　　angular.bootstrap(ageDom, ['age']);
</script>

 

总结：

（1）ng-app 指令定义一个 AngularJS 应用程序。

（2）ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

（3）ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

        <p> {{age}} </p> 可以写成 <p ng-bind="age"> </p>

（4）ng-init 指令初始化 AngularJS 应用程序变量。

<div ng-app="name" ng-init="name='hello'">
　　<p>姓名：<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
　　<p> {{name}} </p>
</div>
<div id="A2" ng-app="age" >
　　<p>年龄：<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
　　<p ng-bind="age"> </p>
</div>
<script type="text/javascript">
　　var app1 = angular.module("name",[]);
　　var app2 = angular.module("age",[]); 
　　//手动加载模块
　　var ageDom = document.getElementById('A2');
　　angular.bootstrap(ageDom, ['age']);
</script>