首頁 > 開發者 > JavaScript
AngularJS初始化過程分析(引導程式)，angularjs初始化
概覽
這一節解釋了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將模板編譯成可執行檔、資料雙向繫結的應用程式。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
