使用angular.bootstrap完成模块的手动加载

最新推荐文章于 2020-12-29 08:12:08 发布

斗者_2013

最新推荐文章于 2020-12-29 08:12:08 发布

阅读量1.2k

点赞数

文章标签： angularjs 手动加载

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

之前我们看到使用ng-app指令，可以实现模块的自动加载。现在我们看下，angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。

[html]view plaincopy 
   
 <html>  
       
     <head>  
         <script src="angular.js"></script>  
         <script>  
           
         // 创建moudle1  
         var rootMoudle = angular.module('moudle1', []);  
         rootMoudle.controller("controller1",function($scope){$scope.name="aty"});  
           
         // 创建moudle2  
         var m2 = angular.module('moudle2', []);  
         m2.controller("controller2",function($scope){$scope.name="aty"});  
           
           
         // 页面加载完成后,再加载模块  
         angular.element(document).ready(function() {  
             angular.bootstrap(document.getElementById("div1"),["moudle1"]);  
             angular.bootstrap(document.getElementById("div2"),["moudle2"]);  
         });  
           
     </script>  
       
     <head>  
     <body>  
         <div id="div1"  ng-controller="controller1">div1:{{name}}</div>  
         <div id="div2"  ng-controller="controller2">div2:{{name}}</div>  
     </body>  
       
 </html>  