快捷導(dǎo)航

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

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

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

本文實(shí)例講述了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法。分享給大家供大家參考，具體如下：

接著前面那篇《AngularJS使用ng-app自動(dòng)加載bootstrap框架問(wèn)題分析》，現(xiàn)在我們看下如何使用帶屬性值的ng-app命令，讓ng-app自動(dòng)加載我們自定義的模塊作為根模塊。

<!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)建了一個(gè)自定義的模塊，我們并沒(méi)有顯示加載。但是通過(guò)運(yùn)行效果可以看出：ng-app這個(gè)指令自動(dòng)加載了我們自定義的rootMoudle。我們知道，使用angular.bootstrap()可以手動(dòng)加載模塊，如果我們自己調(diào)用這個(gè)函數(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"});
    //頁(yè)面加載完成后,加載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運(yùn)行這個(gè)網(wǎng)頁(yè)，用F12觀察控制臺(tái)報(bào)錯(cuò)：

SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="ng-scope ng-binding" id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">'

這就是說(shuō)：ng-app已經(jīng)自動(dòng)完成了rootMoudle的加載，我們沒(méi)有必要多此一舉，再次顯示調(diào)用angular.bootstrap來(lái)加載。也可以看得出：angular框架，一個(gè)模塊只允許加載一次。ng-app用來(lái)自動(dòng)加載模塊，bootstrap用來(lái)手動(dòng)加載模塊。

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

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: