单个angular页面如何加载多个ng-app应用---------------------学习笔记

最新推荐文章于 2020-07-27 09:24:22 发布

转载最新推荐文章于 2020-07-27 09:24:22 发布 · 705 阅读

本文探讨了Angular中ng-app指令的应用方式及其限制条件。详细解释了如何通过ng-app指令定义作用域边界，并讨论了单个页面中多个ng-app指令的行为特征及手动加载方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单个angular页面能否有两个ng-app？

ng-app是声明angular的作用边界的。

 
 <divng-app="app1"ng-init="func1()"></div>

 
 <divng-app="app2"ng-init="func2()"></div>

只有第一个ng-app会被angular加载，其他的只能手动启动

用 angular.bootstrap 手动加载

 <div ng-app="myApp" ng-controller="myCotrol">
 firstName:<input type="text" ng-model="lastName"><br>
 lastName:<input type="text" ng-model="lastName"><br>
 <br>name is;{{firstName + '' + lastName}}
 </div>
 <div id = 'app2'  ng-init="names=['Jhon','Tom','Jack']" >
     <p>foreach</p>
     <ul>
     <li ng-repeat="x in names" >
         {{x}}
     </li>
     </ul>
 </div>
 
 
 <script>
 var app = angular.module('myApp',[]);
 app.controller('myCotrol',function($scope){
     $scope.xing = "xxxxxx";
     $scope.ming = "yyyyy";
 });
 
 var app2 = angular.module('app2',[]);
 angular.bootstrap(document.getElementById("app2"),['app2']);
 </script>

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让ng-app带有属性值。

<span style="font-size:18px;"><html>
	<body ng-app>
		<div>div1:{{1+3*2}}</div>
		<script src="angular.js"></script>
	</body>
</html></span>

1、不含ng-app，无法自动加载，这个比较好理解。

<span style="font-size:18px;"><html>
	<body>
		<div>div1:{{1+3*2}}</div>
		<script src="angular.js"></script>
	</body>
</html></span>

2、含有2个ng-app，那么只会自动加载第一个，这个也好理解。

<span style="font-size:18px;"><html>
	<body>
		<div ng-app>div1:{{1+3*2}}</div>
		<div ng-app>div2:{{1+3*2}}</div>
		<script src="angular.js"></script>
	</body>
</html></span>

3、ng-app带有属性，不能自动加载

<html>
	<body>
		<div ng-app="app1">div1:{{1+3*2}}</div>
		<script src="angular.js"></script>
	</body>
</html>

4、不带属性的在前，带属性的在后。ng-app标记的模块可以自动加载

<html>
	<body>
        <div ng-app="" ng-init="names=['Jhon','Tom','Jack']">
       <p>foreach</p>
        <ul>
       <li ng-repeat="x in names">
        {{x}}
       </li>
       </ul>
      </div>


         <div ng-app="myApp" ng-controller="myCotrol">
         firstName:<input type="text" ng-model="lastName"><br>
         lastName:<input type="text" ng-model="lastName"><br>
         <br>name is;{{firstName + '' + lastName}}
       </div>
	</body>
</html>

5、带属性的在前，不带属性的在后。第二个ng-app不能被自动加载

<html>
	<body>
		<div ng-app="myApp" ng-controller="myCotrol">
                  firstName:<input type="text" ng-model="lastName"><br>
                  lastName:<input type="text" ng-model="lastName"><br>
                  <br>name is;{{firstName + '' + lastName}}
               </div>
              <div ng-app="" ng-init="names=['Jhon','Tom','Jack']">
              <p>foreach</p>
              <ul>
              <li ng-repeat="x in names">
              {{x}}
              </li>
             </ul>
             </div>
	</body>
</html>