众所周知：

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。

只有被具有ng-app属性的DOM元素包含的元素才会受angularJS影响

使用ng-app声明Angular的边界，你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块，可以是整个HTML，也可以是某个div

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用，一个页面会自动加载第一个ng-app。

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。

一个ng-app可以有多个controller，$scope的范围局限于每一个controller中。

$rootScope是所有$scope对象的最上层

ng-app 声 明 所 有 被 它 包 含 的 元 素 都 属 于 AngularJS 应 用 ，

DOM 元 素 上 的ng-controller声明所有被它包含的元素都属于某个控制器

问题来了：

我就是想要多个ng-app，虽然这样做不知道有什么用？？？

有例子如下：

<!DOCTYPE html>

<html>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

<body>

<div id="app1" ng-app="App1">

<span  ng-controller="myCtrl" ng-init="firstName='John' ; lastName='DoeDoe'">{{ firstName + " " + lastName }}</span>

<br>

<span  ng-controller="yourCtrl">{{ secondName + " " + thirdName}}</span>

</div>

<br>

<div id="app2" ng-app="App2" ng-controller="yourCtrl">

{{ secondName + " " + thirdName }}

</div>

<script>

var app = angular.module("App1", []);

app.controller("myCtrl", function($scope) {

//    $scope.lastName = "Doe";

});

app.controller("yourCtrl", function($scope) {

    $scope.secondName = "小米1";

    $scope.thirdName = "大米1";

});

var app1 = angular.module('App2', []);

app1.controller("yourCtrl", function($scope) {

$scope.secondName = "小米4";

$scope.thirdName = "小米5";

});

//默认加载app1,通过下面的代码显示启动app2,但是必须写在app2申明之后

angular.bootstrap(document.getElementById("app2"), ['App2']);

</script>

</body>

</html>

AngularJs学习笔记（1）——ng-app的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  5. AngularJs学习笔记--Dependency Injection（DI，依赖注入）

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  10. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. CF 1005A Tanya and Stairways 【STL】

    Little girl Tanya climbs the stairs inside a multi-storey building. Every time Tanya climbs a stairw ...

  2. 模板—字符串—Manacher

    模板—字符串—Manacher Code: #include <cstdio> #include <cstring> #include <algorithm> us ...

  3. Linux内核ROP姿势详解(二)

    /* 很棒的文章,在freebuf上发现了这篇文章上部分的翻译,但作者貌似弃坑了,顺手把下半部分也翻译了,原文见文尾链接 --by JDchen */ 介绍 在文章第一部分,我们演示了如何找到有用的R ...

  4. IDL软件初步了解

    软件名称:IDL(交互式数据语言Interactive Data Language) 软件类别:是国产软件,语言类,数据分析类,数据可视化类 语言类别:解释型 作用:可以进行数据处理的可视化等,在大数 ...

  5. [LOJ#2540][PKUWC2018]随机算法(概率DP)

    场上数据很水,比较暴力的做法都可以过90分以上,下面说几个做法. 1. 暴力枚举所有最大独立集,对每个独立集分别DP.复杂度玄学,但是由于最大独立集并不多,所以可以拿90. 2. dp[S][k]表示 ...

  6. Exercise02_07

    import javax.swing.JOptionPane; public class Years { public static void main(String[] args){ String ...

  7. AngularJS的加载执行过程

    1. HTML页面的加载,这会触发加载页面包含的所有JS (包括 AngularJS) 2. AngularJS启动,搜寻所有的指令(directive) 3. 找到ng-app,搜寻其指定的模块(M ...

  8. xib中Autolayout的使用

    压缩包下载链接:http://share.weiyun.com/ceb6107857789ae3ec08d4a83269713d (密码:Kd33)

  9. C#正则表达式开源工具

    先交代一下背景,最近工作中经常用到正则表达式,而正则表达式这个东西我个人觉得很鸡肋,不用吧,有些功能实现起来会很麻烦.用吧,又不是说工作中经常用到,只是有时候有些需要求用到而已.但是正则表达式只要一段 ...

  10. JQuery给动态HTML绑定事件

    说明:涉及到事件委托原理,这里不深究了. 直接使用live或者delegate去实现.网上说on也可以,没测试过. 注意:live在新版的JQuery已经取消.on在比较新的版本才支持. 参考: ht ...