ng-app-指令

ng-app:这个指令用于告诉angularJS应用当前这个元素是根元素

所有的angularJS应用都必须要有一个根元素

HTML文档只允许有一个ng-app指令,如果有多个ng-app指令,则只有第一个会被使用,后面的都会被忽略掉。

语法:

<element ng-app="modulename">

在 ng-app 根元素上的内容可以包含 AngularJS 代码
</element>

 其中:

modulename:指定应用模块的名称

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--
     ng-app指令用于高速AngularJS应用当前这个元素是根元素
     所有angularJS应用都必须要有一个根元素
     HTML文档中只允许一个ng-app指令,如果有多个ng-app指令,则只有第一个会被使用
-->
  <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>  
<!-- 下面这个ng-app指令是无法被正常渲染出来的,
     如果被放在第一位就会被渲染出来,因为HTML文档中只允许有一个ng-app指令
-->
<div ng-app="myApp2" ng-controller="myCtrl2">
    {{ firstName + " " + lastName }}
    </div>
<script>
var app = angular.module("myApp", []);
var app2 = angular.module("myApp2", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "李";
    $scope.lastName = "白";
});
app2.controller("myCtrl2",function($scope){
    $scope.firstName = "l";
    $scope.lastName = "p";
})
</script>

</body>
</html>

 

如下图:

第二个指定的“根元素“无法显示,正所谓根元素,“根的意义”在此。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值