AngularJS 玩弄手札 對 REST 用武器 - $resource

本故事純屬虛構，與一切真實人物、團體、故事無關。

摳頂人都知道 摳頂有許多原則

有時候人在摳頂身不由己 沒原則沒節操 又豈是少有之事

但是君子有所為有所不為 即便再沒原則沒節操 也不能忘記下面這個原則

KISS原則

師父常常跟我這麼說：

要把程式寫的複雜 很簡單 隨便TM怎麼寫 都很複雜 保證你的絕世武功絕不會被偷 包括未來的自己

但是要把程式寫的簡單 很困難 要怎樣寫 才能旁邊這些山頂洞人能一目了然 甚至讓未來的自己讚賞一下前人的偉大

Keep It Simple, Stupid

不怕神一般的需求 只怕豬一般的同事

這便是師父傳授我野球拳的最後一重

從此之後 我便把師父的諄諄教誨謹記在心 只要是 不夠 KISS 的 CODE 都是我的仇敵

而今天要被開刀的 就是這位在虎山被大蟲咬 然後結識又結識 Mr.Q 的朋友

Web API in Web Form 之 SPA 明知山有虎 偏向虎山行 上篇

AngularJS in Web Form 之 SPA 明知山有虎 偏向虎山行 下篇

AngularJS 玩弄手札 Mr.Q 非關 Jolin

這位朋友有什麼毛病呢？

他沒什麼毛病 程式能跑也能跳

但是 各位 不夠 KISS 呀

$q 先生這貨很神 果斷牛逼 山頂洞人們十分佩服 信奉其為神 天天三牲蔬果膜拜

那糟糕了 這群山頂洞人 完全不知道在衝三小 那豈不是我要 handle 所有 CRUD

那可不行 對付戰車有穿甲彈 對付這幫山頂洞人 我得找找 對 REST 用武器 好讓我奴役他們 handle 所有 CRUD

今日主角 燈燈燈 ~ 對 REST 用武器 - $resource

老歪文：Mapping an Angular Resource Service to a Web API

首先大斬 roleService.js 56 => 25 行

再來斬 rolesController 115 => 98 行

Web API 跟著改一些

飯粒檔

AngularJS in Web Form 之 SPA 明知山有虎 偏向虎山行 下篇

在上篇我們搞定了 Web API

但是 Web API 只是個負責提供資料查詢的角色

SPA (single page application) 顧名思義 一頁打天下

其中心思想自然落在 JavaScript 上頭

J蛞蝓是神兵 但是要用來 hold住 SPA 的小宇宙 略顯吃力

回顧上篇的 JavaScript DOM事件(click) → AJAX → callback → 更新DOM

這整串的流程都寫在一起

這樣跟把所有的程式碼寫在頁面.cs檔的一個 click 事件中 是差不多的意思

義大利麵式的 code 難以擴充維護

我願意相信團隊成員都有強大的 coding 能力 及 良好的代碼習慣 並且遵守一切共能訂定的規範......

那我就太傻太天真了

看清事實吧 我們需要一些 強大 簡單 美好的 框架 來拯救我們不堪一擊的 測試 跟 需求變更

因此 JavaScript 的 mv* framework 開始風行

但是另一項災難就是 這種 mv* framework 似乎各大行家都要搞一套出來證明自己風騷

除了常見的四天王之外

　　Backbone.js

　　Knockout.js

　　Ember.js

　　Angular.js

還可能有些聽都沒聽過的...

12种JavaScript MVC框架之比较

該怎麼選擇?到底哪個最好?有種永遠學不完的感覺...

其實很好挑 順從人類的性本能直覺 就跟挑OO一樣想跟誰OO就挑誰

挑你愛的 挑你順眼的 挑你爽的 挑你一看見它就衝動的

就算是 mv* framework 永遠會推陳出新 只要有愛就沒問題對吧

以上閒聊以下正題

正題就是繼上回玩過 Knockout 之後 這回我又搞上 Angular 啦

沒辦法 誰叫男人就是喜新厭舊的動物

馬上把上篇的東東 改寫成 Angular

但是只改寫太無趣 且無法彰顯 Angular 的強大之處

首先先從 Web API 下手 我們再增加一個 RoleDetail 類 讓它跟 Role 類 有主表明細的關係

然後修改一下 Web API 讓使用 id 的 GET 方法 傳回 RoleDetail

POST PUT 跟 Delete 則增加對 RoleDetail 的處理

POST 跟 PUT 所需的傳入參數 可能是我比較笨的緣故試不出來怎麼傳兩個類別

但是在建立一個 DTO 包含這兩個類別 卻行得通 好吧 就這麼辦吧

HTML 變這樣 ...

JS 變這樣 ...

欲知更多細節 請洽 http://docs.angularjs.org/api/

哈哈 不是我(就是想)想偷懶 而是這篇就說得太明白的話 後面沒東西好玩了

況且這麼多的 framework 先感受他的風格 再去了解細節也不遲 不要想 用直覺去感受

定番截圖

飯粒檔：http://www.mediafire.com/download/8jkajx99i2192jn/testAPI.zip

Web API in Web Form 之 SPA 明知山有虎 偏向虎山行 上篇

休息人人愛 REST也是

我亂講的 是不是人人愛我不知 至少是最近的顯學

而 ASP.NET Web API 則是微軟用他來證明自己也很潮 很RESTful

第一次參見 Web API 是在 MVC 4 上

他們相性很合直接使用無大礙

Web Form 則沒那麼好的待遇 誰叫微軟也是比較寵么子

同是自家 沒有不能用的道理 只是需要一些手段

就讓咱們來瞧瞧虎山之途

一隻老虎:是否2012

如果是 2012 的話 在加入新項目 可以直接選 Web APT 控制器類別

如果沒有 就直接建一般的類別 然後繼承 ApiController (需要將 System.Web.Http 加入參考)

類別名稱務必叫做 xxxController 預設命名多個 1 是陷阱

隨附範例代碼

設定 Routes

因為配合 MVC 所以它也是靠 Routes 來辨識 API 的路徑的

請在 Global.asax 設定以下東東 (需要將 System.Net.Http 跟 System.Web.Http.WebHost 加入參考)

需要 Json.NET

輸入 http://localhost:22354/api/Roles 如果能看到 JSON 的話代表我們通過第一階段

如果報錯 無法載入檔案或組件 'Newtonsoft.Json... 的話

沒有錯 我們需要Json.NET

定番 NuGet 一下搞定

接下來來看看怎麼玩 CRUD

首先需要一個 Role 類

再來當然是修改 RolesController 使他可以 CRUD 剛剛的 Role類

這裡先以 靜態的 List 來模仿 DB

接下來需要一個頁面 因為是 SPA 所以用一般 html 也沒所謂

寫些按鈕搭 JQuery 來測試 Get Post Put Delete

HTML:

JS:

截圖