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>

如下图:

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

猜你喜欢

转载自blog.csdn.net/lplife/article/details/81112326
今日推荐