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