Angularjs——初識AngularJS

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

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>

相關文章