Angularjs——初識AngularJS

大雄的叮噹貓發表於2023-01-13
AngularJS

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>

相關文章