快捷導(dǎo)航

angularjs學(xué)習(xí)筆記之簡單介紹

更新時(shí)間：2015年09月26日 08:57:16 投稿：hebedich

這篇文章主要介紹了angularjs學(xué)習(xí)筆記之簡單介紹的相關(guān)資料,需要的朋友可以參考下

一.angularjs簡介

AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件。它的創(chuàng)新點(diǎn)在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都是通過瀏覽器端的Javascript實(shí)現(xiàn)，這也使得它能夠完美地和任何服務(wù)器端技術(shù)結(jié)合。

說了這么多，估計(jì)你啥都沒有理解。。。對(duì)嗎？別著急，我來說說他的幾個(gè)特點(diǎn)吧：模塊化，數(shù)據(jù)雙向綁定，依賴注入，指令。下面我們就跟著這幾個(gè)特點(diǎn)進(jìn)行學(xué)習(xí)。

二.angularjs基于MVC概念

所謂MVC，就是module（數(shù)據(jù)模型），view（視圖），controller（控制器）

其實(shí)angularjs就是將這三個(gè)模塊相結(jié)合，下面是我畫的一張模型圖，先大致看一下：

三.結(jié)合解釋

上面也提到了，angularjs的特點(diǎn)是：模塊化，依賴注入，雙向綁定和指令?，F(xiàn)在我來結(jié)合上圖跟大家說明一下：

模塊化：上圖中的下面的filter，directive...四個(gè)方塊就是module的四個(gè)代表性的方法（后面會(huì)跟大家一一講解每個(gè)函數(shù)的用法和功能），也可以理解為各自的小模塊，每個(gè)模塊功能不同，但是分工明確，結(jié)構(gòu)清晰，實(shí)現(xiàn)了模塊化。

依賴注入：上面說到的四個(gè)小模塊，看似是獨(dú)立分開的，但是它們兩兩之間都有相互依賴的關(guān)系，可以互相引用，實(shí)現(xiàn)強(qiáng)大的功能（后面會(huì)詳細(xì)介紹如何引用），這就是依賴注入。

指令：從上圖中也可以看出，指令就是圖中的directive方法了。angularjs中有很多自帶的指令，比如ng-app（指定angularjs的作用域）,ng-model（定義一個(gè)數(shù)據(jù)的模型，實(shí)現(xiàn)雙向綁定）,ng-repeat（重復(fù)一個(gè)標(biāo)簽）,ng-change（監(jiān)聽標(biāo)簽的值有沒有變化）等等，而這里的directive就是最重要的功能就是自定義指令（也有教程說是html的擴(kuò)展）。

雙向綁定：雙向綁定就是上圖中的module和view，也就是數(shù)據(jù)和視圖雙向綁定。會(huì)用到剛才提到的ng-model指令。

四.看一個(gè)簡單的雙向綁定的例子。

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

大家可以將上面的代碼拿到瀏覽器運(yùn)行一下（注意引用angularjs的地址），你會(huì)驚奇地發(fā)現(xiàn)，angularjs真的很強(qiáng)大！！

下面簡單給大家講解一下上面代碼中出現(xiàn)的難懂的地方：

ng-app 指定應(yīng)用的作用范圍，這里表示，整個(gè)html代碼都能識(shí)別angularjs。
ng-model給元素綁定數(shù)據(jù)模型名稱text，input的輸入值會(huì)存到這個(gè)模型中。
{{text}}這是angularjs的一種表達(dá)式的寫法，也就是中間的text是一個(gè)變量它與上面的模型名稱相對(duì)應(yīng)，能夠?qū)崟r(shí)監(jiān)聽input值的變化，即時(shí)更新視圖展示

哈哈，angularjs還是挺簡單的吧，希望這個(gè)小筆記能夠引起大家對(duì)angularjs的興趣，后面我還會(huì)繼續(xù)更新angularjs的學(xué)習(xí)筆記。希望對(duì)大家有幫助。如果對(duì)于上面的筆記有不懂的地方，盡管問我，我肯定會(huì)給大家解答的。祝大家生活愉快！

您可能感興趣的文章: