之前我們看到使用ng-app指令,可以實現(xiàn)模塊的自動加載?,F(xiàn)在我們看下,angular中如何手動加載模塊。需要使用到angular.bootstrap這個函數(shù)。
<html> <head> <script src="angular.js"></script> <script> // 創(chuàng)建moudle1 var rootMoudle = angular.module('moudle1', []); rootMoudle.controller("controller1",function($scope){$scope.name="aty"}); // 創(chuàng)建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>
IE運行這個網(wǎng)頁,發(fā)現(xiàn)變量能夠被angular框架正確解析;F12發(fā)現(xiàn)控制臺也沒有報錯誤。到這里為止,我們知道了如何加載angular的模塊,也明白了手動加載和自動加載的區(qū)別。接下來,我們就可以去繼續(xù)學(xué)習(xí)angularjs框架的其他知識。
聯(lián)系客服