AngularJS使用angular.bootstrap完成模塊手動加載的方法分析
本文實(shí)例分析了AngularJS使用angular.bootstrap完成模塊手動加載的方法。分享給大家供大家參考，具體如下：
之前我們看到使用ng-app指令，可以實(shí)現(xiàn)模塊的自動加載?，F(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運(yùn)行這個網(wǎng)頁，發(fā)現(xiàn)變量能夠被angular框架正確解析；F12發(fā)現(xiàn)控制臺也沒有報錯誤。到這里為止，我們知道了如何加載angular的模塊，也明白了手動加載和自動加載的區(qū)別。接下來，我們就可以去繼續(xù)學(xué)習(xí)AngularJS框架的其他知識。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- AngularJS $injector 依賴注入詳解
- AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
- 深入解析AngularJS框架中$scope的作用與生命周期
- angularJS 中$scope方法使用指南
- AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
- AngularJs中 ng-repeat指令中實(shí)現(xiàn)含有自定義指令的動態(tài)html的方法
- AngularJS的依賴注入實(shí)例分析(使用module和injector)
- AngularJS 使用ng-repeat報錯 [ngRepeat:dupes]
- AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- AngularJS中的緩存使用
- AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
相關(guān)文章
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。2016-10-10
這篇文章主要介紹了Angular 多模塊項(xiàng)目構(gòu)建過程，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下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，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了Angular?項(xiàng)目路徑添加指定的訪問前綴方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
angularJS?實(shí)現(xiàn)長按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法
這篇文章主要為大家介紹了angularJS實(shí)現(xiàn)長按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
AngularJS實(shí)現(xiàn)動態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼
本篇文章主要介紹了用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼，非常具有實(shí)用價值，需要的朋友可以參考下2017-05-05
監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(shù)據(jù)渲染的時候經(jīng)常會遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例，非常具有實(shí)用價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Angular通過指令動態(tài)添加組件問題,文中通過寫一個小組件來簡單總結(jié)下，需要的朋友可以參考下2018-07-07