本文實例講述了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法。分享給大家供大家參考，具體如下：
接著前面那篇《AngularJS使用ng-app自動加載bootstrap框架問題分析》，現(xiàn)在我們看下如何使用帶屬性值的ng-app命令，讓ng-app自動加載我們自定義的模塊作為根模塊。
<!DOCTYPE html><html> <head> <script src="angular.js"></script> <script> var rootMoudle = angular.module('rootMoudle', []); rootMoudle.controller("rootControl",function($scope){$scope.name="aty"}); </script> <head> <body> <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div> </body></html>可以看到，我們使用了angular.module()函數(shù)，創(chuàng)建了一個自定義的模塊，我們并沒有顯示加載。但是通過運行效果可以看出：ng-app這個指令自動加載了我們自定義的rootMoudle。我們知道，使用angular.bootstrap()可以手動加載模塊，如果我們自己調(diào)用這個函數(shù)是什么效果呢？
<html> <head> <script src="angular-1.2.2/angular.js"></script> <script> var rootMoudle = angular.module('rootMoudle', []); rootMoudle.controller("rootControl",function($scope){$scope.name="aty"}); //頁面加載完成后,加載rootMoudle angular.element(document).ready(function(){ angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']); }); </script> <head> <body> <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div> </body></html>用IE運行這個網(wǎng)頁，用F12觀察控制臺報錯：
SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="ng-scope ng-binding" id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">'
這就是說：ng-app已經(jīng)自動完成了rootMoudle的加載，我們沒有必要多此一舉，再次顯示調(diào)用angular.bootstrap來加載。也可以看得出：angular框架，一個模塊只允許加載一次。ng-app用來自動加載模塊，bootstrap用來手動加載模塊。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
