之前我們看到使用ng-app指令,可以實現模塊的自動加載。現在我們看下,angular中如何手動加載模塊。需要使用到angular.bootstrap這個函數。
<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>