AngularJs學習筆記--bootstrap

時間 2019-11-09

標籤 angularjs 學習筆記 bootstrap 欄目 AngularJS 简体版

原文原文鏈接

1、總括javascript

本文用於解釋Angular初始化的過程，以及如何在你有須要的時候對Angular進行手工初始化。css

2、Angular <script> 標籤html

本例用於展現如何經過推薦的路徑整合Angular，實現自動初始化。java

<!doctype html>

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

 <body>

  ...

 <script src="angular.js">

 </body>

 </html>

將sciprt標籤放置於頁面底部。這樣作能避免由於加載angular.js而阻擋HTML的加載，從而下降應用的加載時間。咱們能夠在http://code.angularjs.org中獲取到最新版本的angularJs。出於安全考慮，切勿在產品中直接引用這個地址來加載腳本。但若是僅僅是研究學習使用的話，直接鏈接也無妨。angularjs

選擇：angular-[version].js 是方便閱讀的一個版本，適合平常開發、調試使用。bootstrap
選擇：angular-[version].min.js 是壓縮、混淆後的版本，適合最終產品使用。安全

放置」ng-app」到應用的根節點中，若是你想讓angular自動啓動你的應用，一般能夠放置於<html>標籤中。app

<html ng-app>

若是咱們須要使用老派風格的directive語法」ng:」，那麼咱們須要加入一個xml-namespace到html標籤中以「取悅」IE。（這個是一個歷史緣由，咱們也不推薦使用ng:）學習

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

3、自動初始化優化

Angular會在DOMContentLoaded事件中自動初始化，Angular會找出由你經過ng-app這個directive指定的應用根節點。若是找到，Angular會作如下事情：

加載與module相關的directive。
建立應用相關的injector（依賴管理器）。
以ng-app指定根節點，開始對DOM進行相關「編譯」工做。換言之，能夠將頁面的其中一部分（非<html>）做爲根節點，從而限制angular的做用範圍。

<!DOCTYPE HTML>
<html>
<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>這裏是ng-app裏面~~~{{1+3*2}}</div>
    <script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>

注：裏面的」ng-cloak」，這個是用於在angular.js編譯完成以前（對！沒錯！是編譯完成以前，不是angularjs加載完成以前。因此，若是想很好地避免這個狀況，最好的辦法是優化應用的加載流程，或者結合css對未編譯的模版進行處理。而因爲那萬惡的ie6、7不支持屬性選擇器，因此最好使用class=」ng-cloak」的方式。編譯完成後，這個class或屬性會被刪除。）隱藏模版，避免在頁面顯示原模版。

4、手工初始化

若是咱們想進一步控制初始化進程(例如你須要經過script loader加載angular.js或者在angular編譯頁面前作一些操做)，那麼咱們能夠用一個手工調用的啓動方法去代替。

如下例子等同於使用ng-app這個directive：

<!DOCTYPE HTML>
<html>
<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">這裏是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. 在頁面和其餘代碼加載完成後，找到應用模版的根節點；

2. 調用angular.bootstrap，讓angular去將模版編譯爲一個可執行的，雙向綁定的應用！這裏的angular.bootstrap(element,[ modules])是一個編譯命令，[modules]貌似不用寫，這個問題隨後會更新