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

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

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

概覽

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

AngularJS的 <script> 標簽

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

復制代碼代碼如下:

<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

    <body>

        ...

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

    </body>

</html>

formatDate

1.將上面代碼中的script標簽放在頁面的底部。將script標簽放在底部縮短應用加載的時間，因為這樣HTML的加載不會被angular.js腳本的加載阻塞。你可以從http://code.angularjs.org獲得最新的版本。請不要在你的代碼里面引用這個URL，因為它會暴露你的站點的安全隱患。如果只是實驗性質的開發(fā)，那鏈接到我們的站點沒有什么問題。

1).angular-[version].js 是具有可讀性的版本, 適合開發(fā)和調試。
2).angular-[version].min.js 是壓縮和混淆后的版本, 適合部署到成型產品中。

2.請將ng-app指令放到你的應用的標簽根節(jié)點中, 如果你想要AngularJS自動執(zhí)行整個<html>程序就把它放在 <html> 標簽中。

復制代碼代碼如下:

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

復制代碼代碼如下:

自動初始化

AngularJS會在DOMContentLoaded事件觸發(fā)時執(zhí)行，并通過ng-app指令尋找你的應用根作用域。如果 ng-app指令找到了，那么AngularJS將會：

1.載入和指令內容相關的模塊。
2.創(chuàng)建一個應用的“注入器(injector)”。
3.已擁有ng-app 指令的標簽為根節(jié)點來編譯其中的DOM。這使得你可以只指定DOM中的一部分作為你的AngularJS應用。

復制代碼代碼如下:

<!doctype html>

<html ng-app="optionalModuleName">

    <body>

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

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

    </body>

</html>

手動初始化

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

下面的例子演示了手動初始化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.等頁面和所有的腳本加載完之后，找到HTML模板的根節(jié)點——通常就是文檔的根節(jié)點。
2.調用 api/angular.bootstrap將模板編譯成可執(zhí)行的、數(shù)據(jù)雙向綁定的應用程序。

您可能感興趣的文章: