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>

AngularJS中多个ng-app(手动加载模块)的更多相关文章

  1. AngularJS之手动加载模块app和controller

    使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...

  2. Linux中实现在系统启动时自动加载模块

    下面是以前学习Linux时写的,后来仔细研究rc.sysinit后发现,只需要修改下列地方就可以了,不必这么麻烦的: rc.sysinit中有这样的一段代码: # Load other user-de ...

  3. angularjs 手动加载

    利用ng-app可以完成自动加载,如果不利用ng-app.那么使用bootstrarp实现手动加载模块 <html> <head> <script src="a ...

  4. 使用angular.bootstrap() 完成模块的手动加载

    之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...

  5. opensuse 系统启动自动加载模块

    在/etc/modules-load.d目录下面加入想要自动加载的模块,例如自动加载raw模块 创建raw.conf文件,在文件中写入raw. 重启系统就可以了. 手动加载模块方法: modprobe ...

  6. angularjs自动加载和手动加载

    (一)自动加载 ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说 ...

  7. TP中手动加载类库

    加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...

  8. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  9. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

随机推荐

  1. undefined reference to `libiconv_open 无法编译PHP

    解决方法:#wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz#tar -zxvf libiconv-1.13.1.tar. ...

  2. iOS - + initialize 与 +load

    一.+ initialize 方法和+load 调用时机 首先说一下 + initialize 方法:苹果官方对这个方法有这样的一段描述:这个方法会在 第一次初始化这个类之前 被调用,我们用它来初始化 ...

  3. 在命令行下使用perl

    http://blog.sina.com.cn/s/blog_4af3f0d20100g9oz.html aaa@domain.com  2aaa@domain.com 111bbb@home.com ...

  4. CSS之元素选择器

    1.后代元素选择器 div p 以空格分隔,表示div的所有后代p元素 2.子元素选择器 div > p 以大于号分隔,表示div的直接子元素 3.相邻兄弟选择器 div  + p 选择紧接在d ...

  5. 解决界面有搜索栏时,点击TableView的空白界面,键盘不消失的问题

    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(h ...

  6. java web filter 学习(2)

    本文主要对filter的基本使用进行了讲解,其中涉及到了 filter是什么 一个filter处理一个jsp 多个filter处理一个jsp filter是什么 Filter 是java下的一种过滤器 ...

  7. Swift: 比较Swift中闭包传值、OC中的Block传值

    一.介绍 开发者对匿名函数应该很清楚,其实它就是一个没有名字的函数或者方法,给人直观的感觉就是只能看到参数和返回值.在iOS开发中中,它又有自己的称呼,在OC中叫Block代码块,在Swift中叫闭包 ...

  8. iOS XCode启用/关闭Clang Warnings

    前言:warnings是编码中很重要的一个环节,编译器给出合理的warning能帮助开发者找到自己代码的问题,防止很多bug产生.  默认用XCode创建一个工程,会自动开启一些重要的warnings ...

  9. java.sql.Connection解决插入数据库中文乱码问题

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public clas ...

  10. linux上监控tomcat down掉后自动重启tomcat

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...