AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼
對于一般的使用者來說,AngularJS的ng-app都是手動(dòng)綁定到某個(gè)dom元素。但是在一些應(yīng)用中,這樣就顯得很不方便了。
綁定初始化
通過綁定來進(jìn)行angular的初始化,會(huì)把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)行后,會(huì)顯示hello,angular!
手動(dòng)初始化
Angular中也提供了手動(dòng)綁定的api——bootstrap,它的使用方式如下:
angular.bootstrap(element, [modules], [config]);
其中第一個(gè)參數(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只會(huì)綁定第一次加載的對象。
后面重復(fù)的綁定或者其他對象的綁定,都會(huì)在控制臺(tái)輸出錯(cuò)誤提示。
以上就是對AngularJS bootstrap 的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
AngularJS動(dòng)態(tài)生成div的ID源碼解析
這篇文章主要介紹了基于AngularJS動(dòng)態(tài)生成div的ID,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,對angularjs動(dòng)態(tài)生成div的id相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
AngularJS基礎(chǔ) ng-srcset 指令簡單示例
本文主要介紹AngularJS ng-srcset 指令,這里對ng-srcset 指令做了詳細(xì)的資料整理,附有代碼示例,有需要的小伙伴可以參考下2016-08-08
Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12
angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
這篇文章給大家講解四種組件類型,非常不錯(cuò),具有參考借鑒價(jià)值,對angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧2017-02-02
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯:$watch,$apply,$digest它們是如何工作的呢?這里我想回答這些問題,其實(shí)它們在官方的文檔里都已經(jīng)回答了,但是我還是想把它們結(jié)合在一起來講2015-10-10
angular內(nèi)置provider之$compileProvider詳解
下面小編就為大家?guī)硪黄猘ngular內(nèi)置provider之$compileProvider詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11

