[转载]angularJS启动多个ng-app

最新推荐文章于 2024-10-18 17:51:23 发布

weixin_30538029

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量53

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/VAllen/articles/AngularJS-start-Apps.html

版权

ng-app是angulajs模板引擎当中的一个十分重要的标签，从“app"这个字眼就不难看出其含义，在我理解为一个模块或者页面中的一个应用模型，在一个使用angularjs框架的页面中，很可能使用多个模块，原因是不同模块的业务逻辑不同，代码在理论上就不应该耦合在一起这样不利于维护。

下面的几行代码展示了一种angularjs启动多个模块的demo.
PS：重点在标红的代码段

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <title></title>
 5     <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 6 </head>
 7 <body >
 8     <div id="Lilei"  ng-controller="Textcontroller">
 9         <p>{{content.message}}</p>
10     </div>
11     <div id="Hanmeimei" ng-controller="Textcontroller">
12         <p>{{content.message}}</p>
13     </div>
14 </body>
15 </html>

 1 <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
 2 <script>
 3     var myapp1mod = angular.module('Lilei',[]);
 4     myapp1mod.controller('Textcontroller',function($scope){
 5         var content= {};
 6         content.message = "Hello Lilei";
 7         $scope.content= content;
 8     });
 9 
10     var myapp2mod = angular.module('Hanmeimei',[]);
11     myapp2mod.controller('Textcontroller',function($scope){
12         var content= {};
13         content.message = "Hello Hanmeimei";
14         $scope.content= content;
15     });
16 
17     angular.bootstrap(angular.element("#Lilei"),["Lilei"]);
18     angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);
19 </script>