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 ...
随机推荐
- Xamarin XAML语言教程基本视图ContentViewg构架范围框架
Xamarin XAML语言教程基本视图ContentViewg构架范围框架 ContentView视图基本上有三个作用,下面依次介绍. (1)范围框架:ContentView视图可以构建一个范围框架 ...
- 将html文档转成pdf
(1)使用场景:在项目中使用到了合同,只有在合同的头部,是不相同的.在合同的主体部分都是相同的,因此就把他放到了模板(html文件)里面. 在用户线上签约完成之后,可以将pdf版的合同下载. (2)需 ...
- ToggleButton控件,Switch控件
(一) 1.效果图 2. activity_main.xml <?xml version="1.0" encoding="utf-8"?> & ...
- jQuery判断一个元素是否为另一个元素的子元素
判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 判断 ...
- Ubuntu 16.04屏幕阅读Screen Reader导致快捷键失灵的问题解决
开启和关闭快捷键:[Alt]+[Win]+[S] 如果关了之后开机还自动启动时,那么直接把它卸载: sudo apt-get remove gnome-orca killall orca 参考: ht ...
- WCF服务全局统一异常处理机制
转载:http://www.csframework.com/archive/1/arc-1-20150109-2193.htm 服务端增加WCF服务全局异常处理机制,任一WCF服务或接口方式出现异常, ...
- android中使用gdbserver调试c程序
先废话两句,这篇文章可能有所缺陷,因为我并没有条件去测试动态库的调试.(主要是因为是自己的手机不想乱放各种so) 所以我只能说有空的话我会去进行下测试,这里就先这样了. 1.测试代码gdb-test. ...
- 集合视图UICollectionView 介绍及其示例程序
UICollectionView是一种新的数据展示方式,简单来说可以把它理解成多列的UITableView.如果你用过iBooks的话,可 能你还对书架布局有一定印象,一个虚拟书架上放着你下载和购买的 ...
- vertica数据库怎么查看连接数是否已经达到最大值
- Oracle Process Cloud流程云实践
本篇适合对Oracle Unified BPM有一定基础的人参考,本篇也是参考Oracle A-team John Featherly的文章进行的实践. 1. 流程创建 打开cloud.o ...