AngularJs bootstrap詳解及示例代碼

更新時間：2016年09月01日 11:42:30 作者：Lcllao

本文主要講解AngularJs bootstrap，這里整理了詳細(xì)的資料及簡單示例代碼幫助大家學(xué)習(xí)或者參考，有需要的小伙伴看下

AngularJs學(xué)習(xí)筆記系列第一篇，希望我可以堅持寫下去。本文內(nèi)容主要來自 http://docs.angularjs.org/guide/ 文檔的內(nèi)容，但也加入些許自己的理解與嘗試結(jié)果。

一、總括

本文用于解釋Angular初始化的過程，以及如何在你有需要的時候?qū)ngular進(jìn)行手工初始化。

二、Angular <script> 標(biāo)簽

本例用于展示如何通過推薦的路徑整合Angular，實現(xiàn)自動初始化。

 <!doctype html>

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

 <body>

 ...

 <script src="angular.js">

 </body>

 </html>

將sciprt標(biāo)簽放置于頁面底部。這樣做能避免因為加載angular.js而阻擋HTML的加載，從而降低應(yīng)用的加載時間。我們可以在http://code.angularjs.org中獲取到最新版本的angularJs。出于安全考慮，切勿在產(chǎn)品中直接引用這個地址來加載腳本。但如果僅僅是研究學(xué)習(xí)使用的話，直接連接也無妨。

選擇：angular-[version].js 是方便閱讀的一個版本，適合日常開發(fā)、調(diào)試使用。

選擇：angular-[version].min.js 是壓縮、混淆后的版本，適合最終產(chǎn)品使用。

放置”ng-app”到應(yīng)用的根節(jié)點中，如果你想讓angular自動啟動你的應(yīng)用，通?？梢苑胖糜?lt;html>標(biāo)簽中。

如果我們需要使用老派風(fēng)格的directive語法”ng:”，那么我們需要加入一個xml-namespace到html標(biāo)簽中以“取悅”IE。（這個是一個歷史原因，我們也不推薦使用ng:）

三、自動初始化

Angular會在DOMContentLoaded事件中自動初始化，Angular會找出由你通過ng-app這個directive指定的應(yīng)用根節(jié)點。如果找到，Angular會做以下事情：

加載與module相關(guān)的directive。

創(chuàng)建應(yīng)用相關(guān)的injector（依賴管理器）。

以ng-app指定根節(jié)點，開始對DOM進(jìn)行相關(guān)“編譯”工作。換言之，可以將頁面的其中一部分（非<html>）作為根節(jié)點，從而限制angular的作用范圍。

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>Bootstrap-auto</title>
 <style type="text/css">
  .ng-cloak {
   display: none;
  }
 </style>
</head>
<body>
 這里是ng-app外面的~~{{1+2}}
 <div ng-app class="ng-cloak">這里是ng-app里面~~~{{1+3*2}}</div>
 <script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>

注：里面的”ng-cloak”，這個是用于在angular.js編譯完成之前（對！沒錯！是編譯完成之前，不是angularjs加載完成之前。所以，如果想很好地避免這個情況，最好的辦法是優(yōu)化應(yīng)用的加載流程，或者結(jié)合css對未編譯的模版進(jìn)行處理。而由于那萬惡的ie6、7不支持屬性選擇器，所以最好使用class=”ng-cloak”的方式。編譯完成后，這個class或?qū)傩詴粍h除。）隱藏模版，避免在頁面顯示原模版。

四、手工初始化

如果我們想進(jìn)一步控制初始化進(jìn)程(例如你需要通過script loader加載angular.js或者在angular編譯頁面前做一些操作)，那么我們可以用一個手工調(diào)用的啟動方法去代替。

以下例子等同于使用ng-app這個directive：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>Bootstrap-manual</title>
 <style type="text/css">
  .ng-cloak {
   display: none;
  }
 </style>
</head>
<body>
 這里是ng-app外面的~~{{1+2}}
 <div id="rootOfApp" class="ng-cloak">這里是ng-app里面~~~{{1+3*2}}</div>
 <script src="../angular-1.0.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  angular.element(document).ready(function() {
   angular.bootstrap(angular.element(document.getElementById("rootOfApp")));
  });
 </script>
</body>
</html>

就是說，我們的代碼可以按照以下步驟編寫：

1. 在頁面和其他代碼加載完成后，找到應(yīng)用模版的根節(jié)點；

2. 調(diào)用angular.bootstrap，讓angular去將模版編譯為一個可執(zhí)行的，雙向綁定的應(yīng)用！

后續(xù)繼續(xù)補(bǔ)充相關(guān)文章，謝謝大家對本站的支持！

相關(guān)文章：

                                 AngularJs bootstrap搭載前臺框架——js控制部分
                                 AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
                                 AngularJs bootstrap搭載前臺框架——準(zhǔn)備工作
                                 AngularJs bootstrap詳解及示例代碼

您可能感興趣的文章: