小編給大家分享一下angular如何使用bootstrap方法手動啟動,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為輝南企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站,輝南網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
要啟動一個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一個可配置項,默認(rèn)為false,是否開啟輔助debug。
看例子。
<!DOCTYPE html> <html> <head> <title></title> <script src="//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):
點擊按鈕之后:
以上是“angular如何使用bootstrap方法手動啟動”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
標(biāo)題名稱:angular如何使用bootstrap方法手動啟動
路徑分享:http://bm7419.com/article28/pcicjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、建站公司、微信小程序、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)