快捷導(dǎo)航

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

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

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

一.angularjs簡介

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

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

二.angularjs基于MVC概念

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

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

三.結(jié)合解釋

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

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

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

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

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

四.看一個簡單的雙向綁定的例子。

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>

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

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

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

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

您可能感興趣的文章: