AngularJS學習之路--入門篇

前言--什麼是 AngularJS？

AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
AngularJS 把應用程序數據綁定到 HTML 元素。
AngularJS 可以克隆和重複 HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背後"添加代碼。
AngularJS 支持輸入驗證。

Note:

下載鏈接：https://code.angularjs.org/（博主首推）

http://angularjs.org

https://github.com/angular/angular.js(AngularJs GitHub)

1.0 AngularJS歷史

AngularJS 是比較新的技術，版本 1.0 是在 2012 年發佈的。
AngularJS 是由 Google 的員工 Miško Hevery 從 2009 年開始着手開發。
這是一個非常好的構想，該項目目前已由 Google 正式支持，有一個全職的開發團隊繼續開發和維護這個庫。

1.1 簡介

a). AngularJS是由谷歌開發出來的，它是爲了克服HTML在構建應用上的不足而設計的。
b). AngularJS通過使用我們稱爲標識符(directives)的結構，讓瀏覽器能夠識別新的語法。例如：
（1）使用雙大括號{{}}語法進行數據綁定；
（2）使用DOM控制結構來實現迭代或者隱藏DOM片段；
（3）支持表單和表單的驗證；
（4）能將邏輯代碼關聯到相關的DOM元素上；
（5）能將HTML分組成可重用的組件
c). AngularJS可以認爲是一個MVC模式的框架Model-View-Controller)，其中M代碼scope,V代表Html展示元素，

C代表Controller.你也可以將它看成是一個MVVW模式的框架（Model-View-ViewModel），其中其中M代碼scope中的數據,

V代表Html展示元素，VW代表scope.AngularJS和Jquery的設計思想完成不同

e). AngularJS 通過新的屬性和表達式擴展了 HTML。AngularJS 可以構建一個單一頁面應用程序（SPAs：Single Page Applications）。

f).AngularJS 是一個 JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁 面。AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
g). AngularJS 擴展了 HTML，AngularJS通過 ng-directives(指令)擴展了 HTML。

1.2主要特性

a).數據綁定
能夠幫助避免書寫大量的初始代碼從而節約開發時間（通過 表達式 綁定數據到 HTML）。

b). 模板
在AngularJS中，一個模板就是一個HTML文件
c). MVC
MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西；

AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Model-View-ViewModel)。

d). 依賴注入（Dependency Injection，即DI）
AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
e). Directives（指令）
指令可以用來創建自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。

1.3 實例 (由於這是入門篇，所以代碼以圖片的形式展現，並在其中加入了講解)

a). 簡單實例

最後的運行效果是：實時顯示你在文本框的輸入信息

b).AngularJS表達式實例

c).AngularJS應用實例

運行效果圖如下：

在文本框中輸入文字，會實時顯示輸入信心

入門就先說到這吧，如果博文中有什麼錯誤或者不解的地方，歡迎大家留言指出，謝謝大家！