Angularjs——初識AngularJS

介紹AngularJS入門的基礎(chǔ)知識。

AngularJS——初識AngularJS

AngularJS是什么

AngularJS是Google開源的一款前端JS結(jié)構(gòu)化框架，它通過對前端開發(fā)進行分層，極好地規(guī)范了前端開發(fā)的風(fēng)格——它將前端開發(fā)分為Controller層、Service層、DAO層和Model層。其中，Model對象與HTML頁面（視圖）上HTML元素進行雙向綁定，開發(fā)者可通過Controller調(diào)用Service、DAO與后端交互，獲取后端數(shù)據(jù)之后，只要修改其中Model對象的值，視圖頁面也會隨之動態(tài)改變。這個設(shè)計架構(gòu)層次非常清晰，而且具有一定的“強制性”，整個前端團隊一旦采用AngularJS框架，那么整個前端開發(fā)風(fēng)格會變得簡單、清晰，所有團隊成員都能采用一致的開發(fā)風(fēng)格，這也是AngularJS的魅力所在。

AngularJS創(chuàng)始人的自述

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

AngularJS特性(優(yōu)點)

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

與jQuery的比較

jQuery

JS函數(shù)庫；
封裝簡化DOM操作。

AngularJS

JS結(jié)構(gòu)化框架；
主體不再是DOM，而是頁面中的動態(tài)數(shù)據(jù)。

AngularJS的應(yīng)用

構(gòu)建單頁面（single page application，SPA）Web應(yīng)用或Web APP應(yīng)用。

單頁面應(yīng)用（single page application）

定義

將所有的活動局限于一個頁面，瀏覽器一開始就加載網(wǎng)頁所有內(nèi)容，當(dāng)頁面中有部分?jǐn)?shù)據(jù)發(fā)生了變化，不會刷新整個頁面，而是局部刷新（利用的Ajax技術(shù)）。

優(yōu)點

用戶體驗好，內(nèi)容的改變不需要重新加載整個頁面；
適合前后端分離開發(fā)，服務(wù)器只出數(shù)據(jù)，減輕了服務(wù)器壓力。

缺點

首屏加載速度慢；
不利于SEO優(yōu)化。

AngularJS的組成

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

下載AngularJS

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

注意

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

版本選擇

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

安裝AngularJS

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

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

其中，src 屬性為待導(dǎo)入的AngularJS文件。

第一個AngularJS應(yīng)用

<!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>您輸入的內(nèi)容是：<span>{{mymodel}}</span></p>
  </body>
</html>

posted @ 2023-01-13 12:28 大雄的叮當(dāng)貓閱讀(564) 評論(7) 收藏舉報

刷新頁面返回頂部