欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs bootstrap詳解及示例代碼

 更新時(shí)間：2016年09月01日 11:42:30   作者：Lcllao  
本文主要講解AngularJs bootstrap，這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼幫助大家學(xué)習(xí)或者參考，有需要的小伙伴看下

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

一、總括

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

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

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

 <!doctype html>

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

 <body>

 ...

 <script src="angular.js">

 </body>

 </html>

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

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

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

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

<html ng-app>

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

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

三、自動(dòng)初始化

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

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

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

以ng-app指定根節(jié)點(diǎn)，開(kāi)始對(duì)DOM進(jìn)行相關(guān)“編譯”工作。換言之，可以將頁(yè)面的其中一部分（非<html>）作為根節(jié)點(diǎn)，從而限制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”，這個(gè)是用于在angular.js編譯完成之前（對(duì)！沒(méi)錯(cuò)！是編譯完成之前，不是angularjs加載完成之前。所以，如果想很好地避免這個(gè)情況，最好的辦法是優(yōu)化應(yīng)用的加載流程，或者結(jié)合css對(duì)未編譯的模版進(jìn)行處理。而由于那萬(wàn)惡的ie6、7不支持屬性選擇器，所以最好使用class=”ng-cloak”的方式。編譯完成后，這個(gè)class或?qū)傩詴?huì)被刪除。）隱藏模版，避免在頁(yè)面顯示原模版。

四、手工初始化

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

以下例子等同于使用ng-app這個(gè)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>

就是說(shuō)，我們的代碼可以按照以下步驟編寫(xiě)：

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

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

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

              相關(guān)文章：

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

相關(guān)文章

最新評(píng)論