angularjs學習筆記之簡單介紹_AngularJS
- WBOY原創
- 2016-05-16 15:38:021005瀏覽
一.angularjs簡介
AngularJS 是為動態WEB應用設計的結構架構。它能讓你使用HTML作為模板語言，透過擴充HTML的語法，讓你能更清楚、簡潔地建構你的應用元件。它的創新點在於，利用 資料綁定 和 依賴注入，它使你不用再寫大量的程式碼了。這些都是透過瀏覽器端的Javascript實現，這也使得它能夠完美地和任何伺服器端技術結合。
說了這麼多，估計你啥都沒理解。 。 。對嗎？別急，我來說說他的幾個特點：模組化，資料雙向綁定，依賴注入，指令。下面我們就跟著這幾個特點來學習。
二.angularjs基於MVC概念
所謂MVC，就是module（資料模型），view（視圖），controller（控制器）
其實angularjs就是將這三個模組結合，以下是我畫的一張模型圖，大致先看一下：
三.結合解釋
上面也提到了，angularjs的特徵是：模組化，依賴注入，雙向綁定和指令。現在我來結合上圖跟大家說明一下：
模組化：上圖中的下面的filter，directive...四個方塊就是module的四個代表性的方法（後面會跟大家一一講解每個函數的用法和功能），也可以理解為各自的小模組，每個模組功能不同，但是分工明確，結構清晰，實現了模組化。
依賴注入：上面說到的四個小模組，看似獨立分開的，但是它們兩兩之間都有相互依賴的關係，可以互相引用，實現強大的功能（後面會詳細介紹如何引用），這就是依賴注入。
指令：從上圖也可以看出，指令就是圖中的directive方法了。 angularjs中有很多自帶的指令，例如ng-app（指定angularjs的作用域）,ng-model（定義一個資料的模型，實現雙向綁定）,ng-repeat（重複一個標籤）,ng-change（監聽標籤的值有沒有變化）等等，而這裡的directive就是最重要的功能就是自訂指令（也有教學說是html的擴充）。
雙向綁定：雙向綁定是上圖中的module和view，也就是資料和視圖雙向綁定。會用到剛才提到的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的位址），你會驚訝地發現，angularjs真的很強大！ ！
以下簡單跟大家講解上面程式碼中出現的難懂的地方：
ng-app 指定應用的作用範圍，這裡表示，整個html程式碼都能辨識angularjs。
ng-model給元素綁定資料模型名稱text，input的輸入值會存到這個模型。
{{text}}這是angularjs的一種表達式的寫法，也就是中間的text是一個變數它與上面的模型名稱相對應，能夠即時監聽input值的變化，即時更新視圖展示
哈哈，angularjs還是挺簡單的吧，希望這個小筆記能夠引起大家對angularjs的興趣，後面我還會繼續更新angularjs的學習筆記。希望對大家有幫助。如果對於上面的筆記有不懂的地方，儘管問我，我一定會給大家解答的。祝大家生活愉快！