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="https://www.cnblogs.com/engpj/archive/2023/01/13/angular.min.js"></script>
其中，src 屬性為待匯入的AngularJS檔案，
第一個AngularJS應用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<script src="https://www.cnblogs.com/engpj/archive/2023/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541961.html
標籤：其他
上一篇：JavaScript 二分查找