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