chsakell分享了前端使用AngularJS,後端使用ASP.NET Web API的購物車案例，非常精彩，這裡這裡記錄下對此項目的了解。
文章：
http://chsakell.com/2015/01/31/angularjs-feat-web-api/
http://chsakell.com/2015/03/07/angularjs-feat-web-api-enable-session-state/
源碼：
https://github.com/chsakell/webapiangularjssecurity
本系列共三篇，本篇是第二篇。
<a href="http://www.cnblogs.com/darrenji/p/4959623.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(1)--後端</a>
<a href="http://www.cnblogs.com/darrenji/p/4959694.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(2)--前端，以及前後端Session</a>
<a href="http://www.cnblogs.com/darrenji/p/4959721.html" target="_blank">購物車Demo,前端使用AngularJS,後端使用ASP.NET Web API(3)--Idetity,OWIN前後端驗證</a>
HomeController用來展示首頁面，并接受前端傳來的Order的編号。
Home/Index.cshtml視圖。
以上，ng-hide="checkoutComplete()"決定着是否顯示所在div，ng-show="data.error" 決定是否顯示報錯，<ng-view />根據路由顯示不同視圖，ng-cloak用來避免在切換視圖時頁面的閃爍，<cart-details></cart-details>是自定義的directive，和angularjs有關的js檔案放在頂部，applicaiton相關js檔案放在其下面，在mainApp.js檔案中坐落着一個頂級module名稱是gadgetStore,而頂級controller被放在了gadgetsStoreCtrl.js這個js檔案中了。
最終的界面如下：
main.js 聲明頂級module，以及配置路由。
storeFilters, storeCart是我們自定義的，這裡注入進來。
有了gadgetsStore這個module，現在就為這個module添加controller等。
以上，為gadgetsStore這個module定義了常量以及controller。把一些規定的uri定義成某個moudule的常量是很好的習慣。通過$location.path方法可以擷取或設定目前視窗的uri。
好了，頂級的module和頂級的controller有了，Gadget部分如何顯示呢？
根據路由$routeProvider.when("/gadgets",{templateUrl: "app/views/gadgets.html"})， Gadget的視圖被放在了app/views/gadgets.html中了，來看gadgets.html這個視圖。
以上，把視圖的來源交給了gadgetsCtrl這個controller, 這個controller也被定義在了gadgetsStore這個module中。
gadgetsCtr.js
在顯示Gadget清單的時候，<div ng-repeat="item in data.gadgets | filter: categoryFilterFn | filter: searchItem | range:selectedPage:pageSize">，這裡用到了一個自定的過濾器range，這個過濾器被定義在了storeFilters.js中。
再來看$routeProvider.when("/checkout",{templateUrl: "app/views/checkout.html"});這個路由，checkout.html這個部分視圖如下：
對應的界面如下：
cartDetailsController這個controller也被放在了頂級module裡。如下：
我們注意到，我們已經在多個地方注入cart這個服務 ，這個自定義的服務可以以factory的方式來建立，如果要用這個cart服務，它所在的module就要被其它module所引用。下面來建立cart服務：
關于購物車部分，我們還記得，在主視圖用了<cart-details></cart-details>這個自定義的directive，實際也是在storeCart這個module中定義的。
以上，對應的視圖為：
在顯示購物車明細的時候，給出了送出訂單的連結：
<a href="#/submitorder">Place order now</a>
根據路由$routeProvider.when("/submitorder",{templateUrl: "app/views/submitOrder.html"})，是會加載app/views/submitOrder.html部分視圖，界面如下：
對應的html為：
sendOrder被定義在了頂級module中：
/complete會路由到$routeProvider.when("/complete",{templateUrl: "app/views/orderSubmitted.html"})， app/views/orderSubmitted.html部分視圖如下：
其html部分為：
■ 實作購物車的Session
現在為止，還存在的問題是：當重新整理頁面的時候，購物車内的産品就會消失，即還麼有Session機制。
與ASP.NET Web API路由相關的HttpControllerRouteHandler, HttpControllerHandler, IRequireSessionState。
首先一個繼承内置的HttpControllerHandler，并實作内置的IRequiresSessionState接口。
然後實作一個内置HttpControllerRouteHandler的繼承類。
注釋掉WebApiConfig.cs中的代碼：
在RouteConfig中配置如下：
以上，需要引用System.Web.Http。
現在，如果希望ItemsController中使用Session，那就這樣請求：
http://localhost:61691/api/sessions/items
如果不想用Session，那就這樣請求：
http://localhost:61691/api/items
現在，在前端，向購物車添加産品相關代碼為：
類似地，建立一個模型：
對應的控制器為：
再回到前端，首先在gadgetsStore這個頂級module中增加有關緩存API的uri常量。
重新定義cart這個服務：
為了在頁面每次重新整理的時候保證Session的狀态，在主module中添加如下方法：
然後checkSessionGadgets這個方法就要被運用到主視圖上去，當頁面每次加載的時候調用它。
每次向購車添加的時候需要重新更新後端的Session狀态。
每次從購物車一處的時候需要重新更新後端的Session狀态。
在使用者送出訂單的時候，需要一出購物車内的産品，再更新後端的Session狀态。
待續~~