AngularJS初始化過程分析(引導(dǎo)程序)

更新時(shí)間：2014年12月06日 17:15:04 投稿：junjie

這篇文章主要介紹了AngularJS初始化過程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下

概覽

這一節(jié)解釋了AngularJS初始化的過程，以及需要的時(shí)候你該如何修改AngularJS的初始化。

AngularJS的 <script> 標(biāo)簽

這個(gè)示例展示了我們推薦的整合AngularJS的方法，它被稱之為“自動(dòng)初始化”。

復(fù)制代碼代碼如下:

<!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)沒有什么問題。

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)簽中。

復(fù)制代碼代碼如下:

3.如果你想使用舊版的指令語(yǔ)法：ng:，那還需要將xml-namespace寫在<html>中才能使AngularJS在IE下正常工作。(這樣做是因?yàn)橐恍v史原因, 我們不推薦繼續(xù)使用ng:的語(yǔ)法。)

復(fù)制代碼代碼如下:

自動(dòng)初始化

AngularJS會(huì)在DOMContentLoaded事件觸發(fā)時(shí)執(zhí)行，并通過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)用。

復(fù)制代碼代碼如下:

<!doctype html>

<html ng-app="optionalModuleName">

    <body>

        I can add: {{ 1+2 }}.

        <script src="angular.js"></script>

    </body>

</html>

手動(dòng)初始化

如果你需要主動(dòng)控制一下初始化的過程，你可以使用手動(dòng)執(zhí)行引導(dǎo)程序的方法。比如當(dāng)你使用“腳本加載器(script loader)”，或者需要在AngularJS編譯頁(yè)面之前做一些操作，你就會(huì)用到它了。

下面的例子演示了手動(dòng)初始化AngularJS的方法。它的效果等同于使用ng-app指令。

復(fù)制代碼代碼如下:

<!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)用程序。

您可能感興趣的文章: