AngularJS 教學 - Java RESTful 範例

在 AngularJS 教學 - $resource service 詳細介紹到如何使用 ngResource 的 $resource service 進行後端的 RESTful 溝通

所以我花點時間打算寫一些 AngularJS RESTful 一個完整的前後端範例

可能想到要用 Java 和 Node.js 作為範例後端吧，所以本篇先提供以 Java 為後端的範例程式吧


以下我用 Todo 作為範例，整個程式我並不會介紹太多，基本的可以先看 AngularJS 教學 - $resource service

先列出專案目錄結構

AngularJS 教學 - $resource service

這篇要來介紹一下 AngularJS 提供的一個 Service，就是 $resource

$resource 讓你能夠容易地和後端的 RESTful Service 做溝通，以便建構出一個 CRUD 的應用

而 $resource 也是建構在 $http 之上，其中 $http 提供了 AngularJS 一個執行 Ajax 的方式

如果對 $http 不熟的可以看 AngularJS 教學 - Ajax、AngularJS 教學 - Ajax(1)

接下來就開始介紹   如何利用 $resource 來與 RESTful Service 溝通


1.準備 angular-resource.js
首先要使用 $resource，需要先額外引入 angular-resource.js 到你的 HTML 內

因為 $resource 並不在原本 AngularJS 核心的 JS 檔案內，所以才需要額外引入 JS 檔

2.一個 Todo REST 範例

URL	Method	Body	Result
/todos	GET	Nothing	Get all Todos
/todos	POST	Todo JSON String	Add a Todo
/todos/:id	GET	Nothing	Get a Todo by id
/todos/:id	PUT	Todo JSON String	Update a Todo
/todos/:id	DELETE	Nothing	Delete a Todo

Passive View vs Supervising Controller

在 MVP (Model View Presenter) 設計模式 中有詳細介紹了什麼是 MVP 設計模式

這篇簡單介紹一下 MVP 中可以運用的兩種變型，分別是 Passive View 與 Supervising Controller

如果想要對這兩種設計模式想更進一步了解可以看看 Martin Fowler大師的介紹

Supervising Controller 、 Passive View

Passive View(PV) 從字面上來看就是"被動的視圖"，簡單說就是 View 只負責顯示，

並由 Controller 或是 Presenter 負責處理使用者的動作 (action)，也就是 View 都是被動的

只能透過 Controller 或是 Presenter 給的命令 (command) 來做事情

採用 PV 的好處是可以讓你容易獨立的測試 Controller 或是 Presenter，而且不需依賴任何 UI 測試框架

但我認為這前提是你的 View 與 Presenter 或是 Controller 的關係要盡量是鬆散耦合的

也就是說當有任何的使用者互動，View 都是發出事件(Event)給 Controller 或是 Presenter

來處理，且送出去的資料盡量都不要跟 View 有任何一點關係

MVP (Model View Presenter) 設計模式

在 GUI 的架構開發中，最顯為人知就是 MVC (Model View Controller) 了

而 MVP (Model View Presenter) 模式也類似於 MVC，從下圖我們可以看到 MVP 與 MVC 的區別

上圖參考於 http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/

AngularJS 教學 - Ajax(1)

上一篇 簡單介紹了 AngularJS 使用 Ajax 的方式 接下來繼續介紹一些 AngularJS 常用的 Ajax 設定

AngularJS 利用 $http 這個 Service 物件做為 Ajax 的一個管道

但是在多數複雜的應用中，我們的 Ajax 請求或回傳可能稍微複雜需要設定一些額外的參數

譬如說 HTTP 的請求表頭、HTTP 的 method(POST、PUT、DELET)之類的

所以以下列出幾個比較常用到的參數設定

首先在上一篇看過一個簡單的 Ajax 方式，如下：

$http.get("todos.json").success(function (data) {

    return data;

});

如果要加上額外的設定，可以類似這樣：

var config = {
    //你的設定參數在這
};

$http.post("/todos", config).success(function (data) {

    return data;

});