ng-app-指令

最新推荐文章于 2021-07-09 16:38:39 发布

LPLIFE

最新推荐文章于 2021-07-09 16:38:39 发布

阅读量5k

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/LPLIFE/article/details/81112326

版权

angularjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

如下图：