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

2019-11-20 13:47:55

字體：大中小

來源：轉載

供稿：網友

概覽

這一節解釋了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> 標簽中。

復制代碼代碼如下:

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

復制代碼代碼如下:

自動初始化

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將模板編譯成可執行的、數據雙向綁定的應用程序。

上一篇：AngularJS HTML編譯器介紹

下一篇：什么是 AngularJS？AngularJS簡介