快捷導(dǎo)航

angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼

更新時(shí)間：2017年07月18日 08:24:32 作者：shidaping

本篇文章主要介紹了angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

要啟動(dòng)一個(gè)angular應(yīng)用，可以使用ng-app指令，也可以調(diào)用bootstrap方法手動(dòng)啟動(dòng)。先看一下angular的bootstrap方法。

angular.bootstrap(element, [modules], [config]);

element(必需)。要啟動(dòng)angular的根節(jié)點(diǎn)，一般為document，也可以是其他的的html的dom。

modules(數(shù)組，可選)。依賴的模塊。

conifg(object,可選)。配置項(xiàng)，目前只有strictDi一個(gè)可配置項(xiàng)，默認(rèn)為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)用，所以通常我們會(huì)在$(document).ready()后執(zhí)行。此處因?yàn)槲覀兊膕cript是放在body尾部，所以不存在問題。

實(shí)例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()">點(diǎn)擊引導(dǎo)啟動(dòng)</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)：

點(diǎn)擊按鈕之后：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼

相關(guān)文章

Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果
這篇文章主要介紹了Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果的相關(guān)資料，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-04-04
Angular異步執(zhí)行學(xué)習(xí)之zone.js使用
這篇文章主要為大家介紹了Angular異步執(zhí)行學(xué)習(xí)之zone.js使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹
angularJS中的ng-show、ng-hide、ng-if指令都可以用來控制dom元素的顯示或隱藏。那么這篇文章就給大家主要介紹了Angular.js中ng-if、ng-show和ng-hide的區(qū)別，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法
這篇文章主要介紹了AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法,結(jié)合實(shí)例形式分析AngularJS下拉滾動(dòng)插件ngInfiniteScroll的下載、功能、屬性及相關(guān)使用方法,需要的朋友可以參考下
2016-12-12
angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
AngularJS入門心得之directive和controller通信過程
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來通過本文給大家介紹AngularJS入門心得之directive和controller通信過程，對angularjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
Angular.js去除頁面中顯示的空行方法示例
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-03-03
基于AngularJS的簡單使用詳解
下面小編就為大家?guī)硪黄贏ngularJS的簡單使用詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
詳解Angular路由之子路由
本文將介紹Angular子路由的用法，對此感興趣的同學(xué)，可以參考下
2021-05-05
angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09