AngularJs学习笔记(1)——ng-app
众所周知:
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的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Dependency Injection(DI,依赖注入)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
随机推荐
- 如何通过chrome的开发者工具查找新浪评论数据在哪个文件
1.打开开发者工具(ctrl+shift+i) 2.打开搜索(Esc) 示例:http://comment5.news.sina.com.cn/page/info?format=js&chan ...
- 树状数组优化DP 【模拟赛】删区间
哇,难受得一匹. 看到题的一瞬间竟然只想到了\(n^3\)的区间\(DP\) 一.\(40pts\) 设\(f[i][j]\)代表删去\(i\)到\(j\)这一段区间的最小代价和. 然后直接写普通的区 ...
- 读《thinking in java》第一遍笔记
1.System.out.println(variable)为什么会调用重写的toString方法? 根据我搜到的信息结合源代码,得到以下结论,如有误请告知. 首先我们看一下println方法的源代码 ...
- hadoop遇到的问题(汇总)
1. 如果Map和reduce的输出不一致,需要显示的设置Map的输出,没有根据参数进行推导的原因是类型擦除 combiner是在copy数据到机器之前可以进行的一些数据的合并,这和数据有关,不是所有 ...
- 21、Flask实战第21天:常用的Flask钩子函数
在Flask中钩子函数是使用特定的装饰器装饰的函数.为什么叫钩子函数呢?是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码.那么这种函数就叫做钩子函数. before_first_req ...
- ubuntu16.04怎么设置宽带连接
第一步,安装pppoecof 打开终端,输入命令sudo apt-get install pppoeconf 安装成功之后,开始手动配置. 第二步,配置连接 打开终端,输入命令pppoeconf 接下 ...
- 【动态规划】Gym - 100923A - Por Costel and Azerah
azerah.in / azerah.out Por Costel the Pig has received a royal invitation to the palace of the Egg-E ...
- [ARC087D]FT Robot
题目大意: 一个机器人按照给定的一系列指令进行运动. 总共有两种指令: T:向某个方向旋转90度. F:向当前所朝的方向走一个单位长度. 一开始机器人站在原点,且朝向x的正半轴方向,问机器人是否可能会 ...
- 1.1(java学习笔记) 面向过程与面向对象
面向过程思考时,我们会先思考具体的步骤,第一步走什么,第二步做什么. 比如电脑新建文件夹,第一步:打开电脑 第二步:按下鼠标右键. 第三步:找到新建选项 第四步:点击新建选项下的文件夹 c语言是典型的 ...
- JavaSE目录
常识,环境变量,注释 标示符,常量,进制转换,类型转换,位运算符,语句 数组,函数 面向对象 多线程 String 包装类 集合 其他对象 IO流,IO流--FileReader&&F ...