AngularJS使用angular.bootstrap完成模塊手動加載的方法分析

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

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

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

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

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

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

您可能感興趣的文章:

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