angular使用bootstrap方法手動啟動的實例代碼
更新時間：2017年07月18日 08:24:32 作者：shidaping
本篇文章主要介紹了angular使用bootstrap方法手動啟動的實例代碼，具有一定的參考價值，有興趣的可以了解一下
要啟動一個angular應(yīng)用，可以使用ng-app指令，也可以調(diào)用bootstrap方法手動啟動。先看一下angular的bootstrap方法。
angular.bootstrap(element, [modules], [config]);
element(必需)。要啟動angular的根節(jié)點，一般為document，也可以是其他的的html的dom。
modules(數(shù)組，可選)。依賴的模塊。
conifg(object,可選)。配置項，目前只有strictDi一個可配置項，默認為false,是否開啟輔助debug。
看例子。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
{{myString}}
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.myString='hello world';
}])
angular.bootstrap(document,['app'],{strictDi: true});
</script>
</body>
</html>
需要注意的是angular.bootstrap必須是在element參數(shù)所指向的dom樹加載完畢后才能調(diào)用，所以通常我們會在$(document).ready()后執(zhí)行。此處因為我們的script是放在body尾部，所以不存在問題。
實例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myctrl">
{{name}}
<button ng-click="start()">點擊引導(dǎo)啟動</button>
</div>
</div>
<div id="fir">
<div ng-controller="myctrl">
{{name}}
</div>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope) {
$scope.name="tom";
$scope.start=function (){
var _f=document.getElementById("fir");
angular.bootstrap(_f,["myapp2"])
}
})
var app2=angular.module("myapp2",[]);
app2.controller("myctrl",function($scope) {
$scope.name="jquer";
})
</script>
</html>
初始狀態(tài)：
點擊按鈕之后：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本篇文章主要介紹了angular4實現(xiàn)tab欄切換的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
在Angular中,NgZone是一個服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧2024-01-01
Directive的概念在Angular 1.x就存在了，我對它的認識比較模糊，所以直接通過一些例子來說明。Angular提供的內(nèi)置執(zhí)行有很多，這次使用兩個：ngFor、ngIf。
2016-08-08 
AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能示例
這篇文章主要介紹了AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能,涉及AngularJS指令、事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2017-05-05 
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進階技巧上的編程建議,傾力推薦!需要的朋友可以參考下
2015-06-06 
本文主要介紹了angular十大常見問題，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03 
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05 
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
本文主要介紹AngularJs bootstrap搭載前臺框架基礎(chǔ)頁面的建設(shè)，這里整理餓了相關(guān)資料及實現(xiàn)實例代碼，有興趣的小伙伴可以參考下
2016-09-09 
這篇文章主要介紹了AngularJS 過濾與排序，這里整理了詳細的資料及簡單實例代碼，有需要的小伙伴可以參考下
2016-09-09