本文實例分析了AngularJS使用angular.bootstrap完成模塊手動加載的方法。分享給大家供大家參考,具體如下:
之前我們看到使用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>IE運行這個網頁,發現變量能夠被angular框架正確解析;F12發現控制臺也沒有報錯誤。到這里為止,我們知道了如何加載angular的模塊,也明白了手動加載和自動加載的區別。接下來,我們就可以去繼續學習AngularJS框架的其他知識。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答