概覽
這一節(jié)解釋了AngularJS初始化的過(guò)程,以及需要的時(shí)候你該如何修改AngularJS的初始化。
AngularJS的 <script> 標(biāo)簽
這個(gè)示例展示了我們推薦的整合AngularJS的方法,它被稱之為“自動(dòng)初始化”。
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js"><script>
</body>
</html>
formatDate
1.將上面代碼中的script標(biāo)簽放在頁(yè)面的底部。將script標(biāo)簽放在底部縮短應(yīng)用加載的時(shí)間,因?yàn)檫@樣HTML的加載不會(huì)被angular.js腳本的加載阻塞。你可以從http://code.angularjs.org獲得最新的版本。請(qǐng)不要在你的代碼里面引用這個(gè)URL,因?yàn)樗鼤?huì)暴露你的站點(diǎn)的安全隱患。如果只是實(shí)驗(yàn)性質(zhì)的開發(fā),那鏈接到我們的站點(diǎn)沒(méi)有什么問(wèn)題。
1).angular-[version].js 是具有可讀性的版本, 適合開發(fā)和調(diào)試。
2).angular-[version].min.js 是壓縮和混淆后的版本, 適合部署到成型產(chǎn)品中。
2.請(qǐng)將ng-app指令 放到你的應(yīng)用的標(biāo)簽根節(jié)點(diǎn)中, 如果你想要AngularJS自動(dòng)執(zhí)行整個(gè)<html>程序就把它放在 <html> 標(biāo)簽中。
<html ng-app>
3.如果你想使用舊版的指令語(yǔ)法:ng:,那還需要將xml-namespace寫在<html>中 才能使AngularJS在IE下正常工作。(這樣做是因?yàn)橐恍v史原因, 我們不推薦繼續(xù)使用ng:的語(yǔ)法。)
<html xmlns:ng="http://angularjs.org">
自動(dòng)初始化
AngularJS會(huì)在DOMContentLoaded事件觸發(fā)時(shí)執(zhí)行,并通過(guò)ng-app指令 尋找你的應(yīng)用根作用域。如果 ng-app指令找到了,那么AngularJS將會(huì):
1.載入和 指令 內(nèi)容相關(guān)的模塊。
2.創(chuàng)建一個(gè)應(yīng)用的“注入器(injector)”。
3.已擁有ng-app 指令 的標(biāo)簽為根節(jié)點(diǎn)來(lái)編譯其中的DOM。這使得你可以只指定DOM中的一部分作為你的AngularJS應(yīng)用。
<!doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>
手動(dòng)初始化
如果你需要主動(dòng)控制一下初始化的過(guò)程,你可以使用手動(dòng)執(zhí)行引導(dǎo)程序的方法。比如當(dāng)你使用“腳本加載器(script loader)”,或者需要在AngularJS編譯頁(yè)面之前做一些操作,你就會(huì)用到它了。
下面的例子演示了手動(dòng)初始化AngularJS的方法。它的效果等同于使用ng-app指令 。
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
下面是一些你的代碼必須遵守的順序:
1.等頁(yè)面和所有的腳本加載完之后,找到HTML模板的根節(jié)點(diǎn)——通常就是文檔的根節(jié)點(diǎn)。
2.調(diào)用 api/angular.bootstrap將模板編譯成可執(zhí)行的、數(shù)據(jù)雙向綁定的應(yīng)用程序。