AngularJS

什麼是AngularJS?

  • AngularJS ，屬於一種 MVC 框架
  • AngularJS 通过新的属性和表达式扩展了 HTML。
  • AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）
  • AngularJS 是一个 JavaScript 框架。它可通过script标签添加到 HTML 页面。
  • AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
  • 優點:
    • 宣告式語法 (Directives)
    • 雙向資料繫結 (Two Way Data-Binding)
      • 不用再寫類似這樣的程式碼：$("#demo1").val($("#value").val())
    • 相依性注入 (Dependency Injection)
    • 關注點分離等特性

AngularJS 一個 Client 端的 Framework，由 Google 所打造的前端 Javascript 框架

它直接延伸了現有的 HTML 架構，並且透過宣告式語法 (Directives) 直接延伸了 HTML 能力，將許多 AngularJS 自定的 HTML 屬性自然的融入 HTML 之中，並且賦予它新的意義，也讓原本單純的 HTML 有了全新生命，

AngularJS 的框架屬於 MVC 設計模式，也將 控制器 (Controller) 與 檢視 (Views) 間切割的非常乾淨

對於 AngularJS 來說目的就是為了解決 CRUD（新增、刪除、查詢、修改） 這類型的應用程式

AngularJS 能做什麼?

  • AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

與JQuery框架比較

在 jQuery 中提供許多 API 來讓你可以隨心所欲的操控 DOM，所以兩種框架的學習路線絕對是不相同的

對於習慣操控 DOM 物件的開發人員來說，在 AngularJS 中也提供了一個 jqLite 的套件，這個套件包含了基本的 DOM 操作的 API，不過 AngularJS 和 jQuery 也不是水火不容，只是比較兩者之間比較沒默契很難一起搭配運作而已，另外如果你習慣用 Bootstrap 的套件來設計你的 UI 也可以參考這個套件 AngularStrap

示範資料繫結 (Data Binding)

在 AngularJS 裡，所有在 View 與 Controller 之間，都是透過 Model 來做資料傳遞，無論你在 View 這端透過表單元素修改了內容，或是在 Controller 這端修改了 Model 內容，兩邊都會即時發生變化，因為在 AngularJS 框架中會監控 (watch) Model 物件的任何變化，並隨時反映到 View 上面。以下是雙向資料繫結的示意圖：

透過後端的REST服務(Representational State Transfer，具象狀態傳輸)處理業務邏輯。

MVC部分在Client中運行。

AngularJS應用

分成以下幾個應用模式

[單頁應用(SPA)]

Single-Page Application(SPA)，單頁應用。

AngularJS最常使用的模式。

特色：

  • 只有一個HTML頁面
  • 應用內容在這個頁面動態增減
  • 相較於一般取得新頁面，加載的內容較少(只要載view部分)
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta charset="UTF-8">
  <title>Main</title>
  <script src="/js/libs/angular.min.js"></script>
  <script src="/js/libs/angular-route.min.js"></script>
  <script src="/js/libs/angular-resource.min.js"></script>
  <script src="/js/libs/angular-cookie.js"></script>

  <script src="/js/app.js"></script>
  <script src="/js/controller.js"></script>
  <script src="/js/service.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

[引導應用]

[依賴注入]

參考

results matching ""

    No results matching ""