AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法分析

更新時(shí)間：2017年01月19日 10:38:16 作者：aitangyong

這篇文章主要介紹了AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法,結(jié)合實(shí)例形式分析了angular.bootstrap函數(shù)手動(dòng)加載模塊的步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例分析了AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法。分享給大家供大家參考，具體如下：

之前我們看到使用ng-app指令，可以實(shí)現(xiàn)模塊的自動(dòng)加載。現(xiàn)在我們看下，angular中如何手動(dòng)加載模塊。需要使用到angular.bootstrap這個(gè)函數(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"});
    // 頁(yè)面加載完成后,再加載模塊
    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運(yùn)行這個(gè)網(wǎng)頁(yè)，發(fā)現(xiàn)變量能夠被angular框架正確解析；F12發(fā)現(xiàn)控制臺(tái)也沒(méi)有報(bào)錯(cuò)誤。到這里為止，我們知道了如何加載angular的模塊，也明白了手動(dòng)加載和自動(dòng)加載的區(qū)別。接下來(lái)，我們就可以去繼續(xù)學(xué)習(xí)AngularJS框架的其他知識(shí)。

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

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

您可能感興趣的文章:

相關(guān)文章

Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。
2016-10-10
Angular 多模塊項(xiàng)目構(gòu)建過(guò)程
這篇文章主要介紹了Angular 多模塊項(xiàng)目構(gòu)建過(guò)程，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
這篇文章主要介紹了后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-07-07
詳解angular筆記路由之a(chǎn)ngular-router
本篇文章主要介紹了詳解angular筆記路由之a(chǎn)ngular-router，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Angular?項(xiàng)目路徑添加指定的訪問(wèn)前綴
這篇文章主要為大家介紹了Angular?項(xiàng)目路徑添加指定的訪問(wèn)前綴方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
angularJS?實(shí)現(xiàn)長(zhǎng)按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法
這篇文章主要為大家介紹了angularJS實(shí)現(xiàn)長(zhǎng)按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼
本篇文章主要介紹了用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
監(jiān)聽(tīng)angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(shù)據(jù)渲染的時(shí)候經(jīng)常會(huì)遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這篇文章主要介紹了監(jiān)聽(tīng)angularJs列表數(shù)據(jù)是否渲染完畢的方法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
Angular通過(guò)指令動(dòng)態(tài)添加組件問(wèn)題
這篇文章主要介紹了Angular通過(guò)指令動(dòng)態(tài)添加組件問(wèn)題,文中通過(guò)寫一個(gè)小組件來(lái)簡(jiǎn)單總結(jié)下，需要的朋友可以參考下
2018-07-07