众所周知：

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. wwwscan网站目录文件批量扫描工具

    准备一个比赛样题里面给的一个扫描的工具: 不知道怎么用就上网百度了一下果然有关于这个软件的两篇介绍(感觉写的很好),第一篇介绍的应该和我的工具一样,也给了例子(现在Google不能访问了)和参数介绍, ...

  2. Android Studio查找功能（搜索功能）

    F3 向下查找关键字出现位置 Shift+F3 向上一个关键字出现位置 2.在当前工程内查找文本[Ctrl+Shift+F] 先会弹出一个对话框,直接点击[find],开始在整个工程内查找该字符串   ...

  3. MySql笔记之数据表

    数据表:行称为记录  列称为字段 用来存储数据 一.数据类型 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 在我们存储不同类型的数据时,为了 ...

  4. 模板—数据结构—LCT

    模板—数据结构—LCT Code: #include <cstdio> #include <algorithm> using namespace std; #define N ...

  5. AtCoder - 2061 Tree Restoring

    Problem Statement Aoki loves numerical sequences and trees. One day, Takahashi gave him an integer s ...

  6. POJ 2315：Football Game（博弈论）

    [题目链接] http://poj.org/problem?id=2315 [题目大意] 两名球员轮流从N个球中挑出不多于M个射门,每个球半径都是R,离球门S. 每次只能踢出L以内的距离.进最后一个球 ...

  7. 【计算几何】URAL - 2101 - Knight's Shield

    Little Peter Ivanov likes to play knights. Or musketeers. Or samurai. It depends on his mood. For pa ...

  8. RabbitMQ技术详解（转）

    RabbitMQ是什么 定义 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python.Ruby..NET.Java.JMS.C.PHP.Action ...

  9. zk删除node模式

    检查状态 状态描述指定的znode的元数据.它包含时间戳,版本号,ACL,数据长度和子znode等细项. 语法 stat /path 示例 stat /FirstZnode 输出 [zk: local ...

  10. 一些WCF DS 的资料（参考）

    0.WCF DS 官方博客:http://blogs.msdn.com/b/astoriateam 1. 官方博客: 如何使用WCF DS5   由于V5 的程序集单独出来了!     (How to ...