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 ...
随机推荐
- Codeforces 811 B. Vladik and Complicated Book
B. Vladik and Complicated Book time limit per test 2 seconds memory limit per test 256 megabytes i ...
- HDU 6216 A Cubic number and A Cubic Number【数学思维+枚举/二分】
Problem Description A cubic number is the result of using a whole number in a multiplication three t ...
- [BZOJ 2006] 超级钢琴
Link: https://www.lydsy.com/JudgeOnline/problem.php?id=2006 Algorithm: 对于此类区间最值类问题,我们可以通过控制一端不变来寻找当前 ...
- Djanog|requirements.txt生成
Django | requirement.txt 生成 pip django 1 pip 通常我们熟悉使用的都是 pip, 这个工具确实方便项目管理依赖包.当想把当前项目依赖的包的名称和版本导入指 ...
- tomcat访问（access）日志配置、记录Post请求参数(转)
一.配置与说明 tomcat访问日志格式配置,在config/server.xml里Host标签下加上 <Valve className="org.apache.catalina.va ...
- CentOS 6.9下的Setup工具（用于管理服务/防火墙/网络配置/验证服务）
说明:Setup工具套件好像是CentOS下特有的用于管理服务/防火墙/网络配置等,其实就是基于命令行模式界面的GUI工具.唯一特点就是方便. 安装: #安装Setup命令工具 yum -y inst ...
- windows SFC(System File Checker) 命令的使用
SFC(System File Checker)可以扫描所有受保护的系统文件的完整性,并使用正确的 Microsoft 版本替换. 步骤:点击开始,输入cmd: 右键,以管理员身份运行 输入sfc/s ...
- javascript(JQuery)元素操作
html代码如下: <div id="picK"> <ul> <li style="float:left;width:90px;" ...
- final修饰符的三种使用场景
final有三种使用场景,各自是修饰变量.方法和类.不管哪种修饰.一旦声明为final类型.你将不能改变这个引用了,编译器会检查代码,假设你试图再次初始化,编译器会报错.以下我来详细说说每一种修饰场景 ...
- DICOM中几个判断图像方向的tag
在DICOM标准里,有三个TAG与成像的方向相关. 参考来源:Kitware关于DICOM方向的说明 http://public.kitware.com/IGSTKWIKI/index.php/DIC ...