AngularJS bootstrap啟動詳解及實(shí)例代碼
更新時間：2016年09月14日 15:22:24 作者：xingoo
這篇文章主要介紹了AngularJS bootstrap啟動的知識，這里整理了相關(guān)資料及簡單實(shí)例代碼，,需要的朋友可以參考下
對于一般的使用者來說，AngularJS的ng-app都是手動綁定到某個dom元素。但是在一些應(yīng)用中，這樣就顯得很不方便了。
綁定初始化
通過綁定來進(jìn)行angular的初始化，會把js代碼侵入到html中，但是對于新手使用來說，還是足夠了！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{ hello }}
</div>
<script type="text/javascript">
var myModule = angular.module("myApp",[]);
myModule.controller("myCtrl",function($scope){
$scope.hello = "hello,angular!";
});
</script>
</body>
</html>
運(yùn)行后，會顯示hello,angular!
手動初始化
Angular中也提供了手動綁定的api——bootstrap，它的使用方式如下：
angular.bootstrap(element, [modules], [config]);
其中第一個參數(shù)element:是綁定ng-app的dom元素；
modules：綁定的模塊名字
config：附加的配置
簡單的看一下代碼：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
<div ng-controller="myCtrl">
{{ hello }}
</div>
<script type="text/javascript">
var app = angular.module("bootstrapTest",[]);
app.controller("myCtrl",function($scope){
$scope.hello = "hello,angular from bootstrap";
});
// angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
angular.bootstrap(document,['bootstrapTest']);
</script>
</body>
</html>
值得注意的是：
angular.bootstrap只會綁定第一次加載的對象。
后面重復(fù)的綁定或者其他對象的綁定，都會在控制臺輸出錯誤提示。
以上就是對AngularJS bootstrap 的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對本站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了基于AngularJS動態(tài)生成div的ID,本文介紹的非常詳細(xì)，具有參考借鑒價值，對angularjs動態(tài)生成div的id相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08
AngularJS基礎(chǔ) ng-srcset 指令簡單示例
本文主要介紹AngularJS ng-srcset 指令,這里對ng-srcset 指令做了詳細(xì)的資料整理，附有代碼示例，有需要的小伙伴可以參考下2016-08-08
Angular應(yīng)用程序在首次加載根組件時會在瀏覽器的顯示一個loading...動畫，下面這篇文章主要給大家介紹了關(guān)于Angular4如何自定義首屏加載動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12
這篇文章給大家講解四種組件類型，非常不錯，具有參考借鑒價值，對angular 動態(tài)組件類型感興趣的朋友參考下吧2017-02-02
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實(shí)它們在官方的文檔里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講2015-10-10
angular內(nèi)置provider之$compileProvider詳解
下面小編就為大家?guī)硪黄猘ngular內(nèi)置provider之$compileProvider詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。本文重點(diǎn)給大家介紹AngularJs頁面篩選標(biāo)簽小功能，非常不錯，需要的朋友可以參考下2016-08-08
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11