DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AngularJS初始化過程分析(引導程序)
AngularJS初始化過程分析(引導程序)
編輯:關於JavaScript     

概覽

這一節解釋了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,因為它會暴露你的站點的安全隱患。如果只是實驗性質的開發,那鏈接到我們的站點沒有什麼問題。

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

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

代碼如下:
<html ng-app>

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

代碼如下:
<html xmlns:ng="http://angularjs.org">

自動初始化

AngularJS會在DOMContentLoaded事件觸發時執行,並通過ng-app指令 尋找你的應用根作用域。如果 ng-app指令找到了,那麼AngularJS將會:

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

代碼如下:
<!doctype html>
<html ng-app="optionalModuleName">
    <body>
        I can add: {{ 1+2 }}.
        <script src="angular.js"></script>
    </body>
</html>

手動初始化

如果你需要主動控制一下初始化的過程,你可以使用手動執行引導程序的方法。比如當你使用“腳本加載器(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模板的根節點——通常就是文檔的根節點。
2.調用 api/angular.bootstrap將模板編譯成可執行的、數據雙向綁定的應用程序。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved