AngularJs学习笔记（1）——ng-app

最新推荐文章于 2024-06-28 16:20:01 发布

dingsi7709

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lyd2016/p/7156315.html

版权

众所周知：

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>

转载于:https://www.cnblogs.com/lyd2016/p/7156315.html

dingsi7709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs学习笔记（1）——ng-app

众所周知：ng-app指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。只有被具有ng-app属性的DOM元素包含的元素才会受angularJS影响使用ng-app声明Angular的边界，你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块，可以是整个HTML，也可以是某个divHTM...
复制链接

扫一扫