1. 程式人生 > >使用AngularJS實現的前後端分離的資料互動過程

使用AngularJS實現的前後端分離的資料互動過程

一. AngularJS簡介

  1. AngularJS是什麼

    AngularJS是一個開源Web應用程式框架。最初是由MISKO Hevery和Adam Abrons於2009年開發,現在是由谷歌維護。

  2. AngularJS的特性

    1. AngularJS是一個功能強大的基於JavaScript開發框架用於建立富網際網路應用(RIA)。
    2. AngularJS為開發者提供的選項(使用JavaScript)在一個乾淨的MVC(模型-檢視-控制器)的方式來編寫客戶端應用程式。
    3. AngularJS寫的應用都是跨瀏覽器相容。AngularJS使用JavaScript程式碼自動處理適應每種瀏覽器。
    4. AngularJS是開源的,完全免費的,並且由數千名世界各地的開發者開發維護。它是根據Apache許可證2.0版許可釋出。
      總體來說,AngularJS是一個用來構建大型應用,高效能的Web應用程式的框架,同時使它們易於維護。
  3. AngularJS的核心特徵

    1. 資料繫結: 模型和檢視元件之間的資料自動同步。
    2. 適用範圍: 這些物件參考模型。它們充當控制器和檢視之間的膠水。
    3. 控制器: 這些Javascript函式繫結到特定的範圍。
    4. 服務: AngularJS配有多個內建服務,例如$http可作為一個XMLHttpRequest請求。這些單一物件在應用程式只例項化一次。
    5. 過濾器: 從一個數組的條目中選擇一個子集,並返回一個新的陣列。
    6. 指令: 指令是關於DOM元素標記(如元素,屬性,CSS等等)。這些可以被用來建立作為新的,自定義部件的自定義HTML標籤。AngularJS設有內建指令(如:ngBind,ngModel...)
    7. 模板:這些符合從控制器和模型資訊的呈現的檢視。這些可以是單個檔案(如index.html),或使用“諧音”在一個頁面多個檢視。
    8. 路由: 它是切換檢視的概念。
    9. 模型檢視: MVC是一個設計模式將應用劃分為不同的部分(稱為模型,檢視和控制器),每個都有不同的職責。
    10. 深層連結: 深層連結,可以使應用程式狀態進行編碼在URL中而能夠新增到書籤。應用程式可從URL恢復到相同的狀態。
    11. 依賴注入: AngularJS有一個內建的依賴注入子系統,開發人員通過使應用程式從而更易於開發,理解和測試。

二. 場景簡介

  1. 後端全是REST風格API;
  2. 前端通過AngularJS實現;

三. 前後端互動過程

  1. 前端通過AngularJS的路由功能來區分不同的邏輯頁面並將不同的頁面繫結到對應的控制器上;
  2. 控制器負責將相應的資料和方法繫結到頁面元素並執行相應的操作(包括factory方法的呼叫);
  3. 工廠方法主要用來動態獲取(REST)頁面的資料,即請求server端的路由(比如:overview/overview),呼叫相應的路由函式獲取資料;
  4. factory方法通過依賴注入到相應的控制器中。