AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法

更新時間：2017年01月04日 11:59:09 作者：aitangyong

這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法,結合實例形式分析了ng-app自動加載我們自定義的模塊作為根模塊的操作步驟與實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了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()可以手動加載模塊，如果我們自己調用這個函數(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的加載，我們沒有必要多此一舉，再次顯示調用angular.bootstrap來加載。也可以看得出：angular框架，一個模塊只允許加載一次。ng-app用來自動加載模塊，bootstrap用來手動加載模塊。

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章: