AngularJS——初識AngularJS

AngularJS是什麼

AngularJS是Google開源的一款前端JS結構化框架，它通過對前端開發進行分層，極好地規範了前端開發的風格——它將前端開發分為Controller層、Service層、DAO層和Model層。其中，Model對象與HTML頁面（視圖）上HTML元素進行雙向綁定，開發者可通過Controller調用Service、DAO與後端交互，獲取後端數據之後，只要修改其中Model對象的值，視圖頁面也會隨之動態改變。這個設計架構層次非常清晰，而且具有一定的“強制性”，整個前端團隊一旦採用AngularJS框架，那麼整個前端開發風格會變得簡單、清晰，所有團隊成員都能採用一致的開發風格，這也是AngularJS的魅力所在。

AngularJS創始人的自述

“AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的偽靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。”

AngularJS特性(優點)

雙向數據綁定；
聲明式依賴注入；
解耦應用邏輯、數據模型和視圖；
完善的頁面指令；
定製表單驗證；
Ajax封裝。

與jQuery的比較

jQuery

JS函數庫；
封裝簡化DOM操作。

AngularJS

JS結構化框架；
主體不再是DOM，而是頁面中的動態數據。

AngularJS的應用

構建單頁面（single page application，SPA）Web應用或Web APP應用。

單頁面應用（single page application）

定義

將所有的活動侷限於一個頁面，瀏覽器一開始就加載網頁所有內容，當頁面中有部分數據發生了變化，不會刷新整個頁面，而是局部刷新（利用的Ajax技術）。

優點

用户體驗好，內容的改變不需要重新加載整個頁面；
適合前後端分離開發，服務器只出數據，減輕了服務器壓力。

缺點

首屏加載速度慢；
不利於SEO優化。

AngularJS的組成

ng-app : 該指令用於設置AngularJS應用。例如為＜body.../＞元素增加了ng-app屬性，這意味着所有AngularJS應用處於＜body.../＞元素內。在＜body.../＞元素內可使用其他AngularJS指令，也可使用{{}}來輸出表達式。
ng-model : 該指令用於執行“雙向綁定”，所謂雙向綁定指的是將HTML輸入元素的值與AngularJS應用的某個變量進行綁定。完成“雙向綁定”之後，當HTML輸入元素的值發生改變時，AngularJS應用中綁定的變量的值也會隨之改變；反過來，當程序修改AngularJS應用的變量的值時，HTML輸入元素的值也會隨之改變。
ng-bind : 該指令用於綁定ng-model的數據。

下載AngularJS

AngularJS也是一個純粹的JavaScript庫，下載AngularJS與下載其它JavaScript庫一樣，打開鏈接後，選中相應的版本下載即可。下載鏈接

注意

AngularJS是AngularJS 1.X，並不是Angular 2.X（Angular 2沒有JS後綴）；
AngularJS 1.X是真正輕量級JavaScript框架，比較適合熟悉JavaScript的前端開發者；
Angular 2.X使用的是TypeScript腳本，其開發高度依賴Node.js。

版本選擇

angular.min.js：該版本是去除註釋後的AngularJS庫，文件體積較小，開發實際項目時推薦使用該版本。
angular.js：該版本的AngularJS庫沒有壓縮，而且保留了註釋。學習AngularJS及有興趣研究AngularJS源代碼的讀者可以使用該版本。
angular-xxx.min.js：AngularJS為特定功能提供的支持庫。比如angular-animate.min.js就是AngularJS的動畫支持庫；angular-cookies.min.js就是AngularJS的Cookie訪問支持庫。
angular-xxx.js：與對應的angular-xxx-min.js庫的功能相同，只是保留了註釋，沒有壓縮。

安裝AngularJS

AngularJS庫的安裝很簡單，只要在HTML頁面中導入AngularJS的JavaScript文件即可。

<script type="text/javascript" src="angular.min.js"></script>

其中，src 屬性為待導入的AngularJS文件。

第一個AngularJS應用

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <script src="../../js/angular-1.2.29/angular.js"></script>
    <title>第一個程序</title>
  </head>
  <body ng-app>
    <input type="text" ng-model="mymodel" />
    <p>您輸入的內容是：<span>{{mymodel}}</span></p>
  </body>
</html>