AngularJs學(xué)習(xí)筆記--bootstrap

昵稱10504424 2012-09-10

展開全文

AngularJs學(xué)習(xí)筆記--bootstrap

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

一、總括

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

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

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

 <!doctype html>

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

 <body>

  ...

 <script src="angular.js">

 </body>

 </html>

將sciprt標(biāo)簽放置于頁面底部。這樣做能避免因為加載angular.js而阻擋HTML的加載，從而降低應(yīng)用的加載時間。我們可以在http://code.中獲取到最新版本的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)用，通?？梢苑胖糜?/SPAN><html>標(biāo)簽中。

<html ng-app>

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

<html xmlns:ng="http://">

三、自動初始化

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>