基于Angular建立背景資料模拟（譯）

我們已經習慣用angularjs來建立前後端分離的應用，同時為了便于開發也會通過在前端代碼庫中使用mock資料來模拟服務端的接口。使用mock資料具有以下諸多的好處：

本文我們介紹的是ngmocke2e子產品提供的$httpbackend服務。需要注意的是它跟ngmock子產品提供的同名服務是不同的哦～這兩個$httpbackend服務連api都極為相似，但是ngmock版的$httpbackend主要用來做單元測試，是以它額外增加了很多測試用例和調用的功能在裡面。我們今天要介紹的這個ngmocke2e則是針對angular應用開發中後端資料mock功能。

$httpbackend使用ngresource($resource)的resources給我們提供了一個mock終端。它可以應用到所有的http方法并傳回特殊的句柄－-例如：get,post,delete等等。它有效的取代了$http在angular中的服務棧，是以它具有穿越的特性，無服務的請求可以直接穿越到服務端。它使得我們可以在靜态伺服器上建立包涵了所有服務的完美應用。

接下來我們先不急于開發一個完整的angular應用，先從怎樣開發簡單的後段crud功能入手。這裡我們首先開發如下功能：

多餘的事情不說，我們現在就開始。從angular的模版開始，先聲明app module并加入項目需要依賴的子產品。

然後在定義一個提供angular元件和後端mock資料的接口服務的contract resources。

完成contact resources的定義我們就可以開始定義mock backend了。$httpbackend其實是通過一個run子產品來定義的，在我們的例子中我們把它添加到app的run子產品中，然後定義一組contacts。

這個contacts數組是mock backend的所有操作都可以通路的，就像一個資料倉庫，這是建立mock資料倉庫的一種方式。另一種方式是建立一個以resources的id為下标的關聯數組。另外為了簡單和條理清晰我們還要定義一些數組查找和操作的基礎方法，不想這麼麻煩就直接用underscore或者lodash。

我們先模拟一個最簡單的通訊錄接口，用get方式請求/contacts就傳回整個通訊錄。

再來實作contact.save方法。ngresource的對應方法可以發送一個攜帶通訊錄資料的post請求，這樣後端就會增加一條新的紀錄。

因為angular元件會把資料當作json來處理且不會複查，是以一定要注意将序列化的通訊錄資料轉成json。建立一條新的紀錄就像在contacts數組push一條資料一樣簡單。

擷取一條通訊錄資料相對就比較麻煩了，我們必須做兩件事：從請求url中提取id；從關聯數組中查找到這個id。代碼如下：

我們用一個正則比對url，擷取到id的集合。angular把比對的到的結果儲存到params的id屬性上，也就是whenget方法的第三個入參。再抓去這個值傳到findcontactbyid方法中，将查詢的結果傳回給我們。最後，我們傳回查詢結果，如果為空就傳回404。

findcontactbyid方法将id的值轉成數字，過濾數組找到比對值并傳回。

update方法于get方法很相似，差別隻在于怎樣更新通訊錄資料。代碼如下：

成功找到這條資料之後再使用angualr.extend方法将更新的資料拷貝到contact對象的屬性上。這樣我們不用破壞代碼裡相關的任何引用包括contacts數組。

最後是delete方法。仍然跟get和put類似，删除操作仍然依賴于findcontactbyid方法來查找通訊錄。一旦再contact對象中找到它的位置，就使用array#splice删除掉contact對象中的這條紀錄：

完成這些背景服務和資料的定義，我們就可以把整個應用跑起來了。整個頁面應用的和核心控制器是一個所有服務功能之行時調用的簡單事務。随着通訊錄的get操作，結果就會呈現在我們面前。然後使用更新功能給grace hopper所在列添加她的聯系人姓名。建立操作是添加gloria gordan bolotsky到通訊錄。删除操作是将charls babbage從通訊錄删除。增加，删除，更新的操作是放在一個promise隊列中，結果會傳回到成功的回調函數中。這就是整個控制器做的事情。

最後一步建立這個簡單應用的視圖部分：

代碼給我們簡單示範了從通訊錄服務檢索一條聯系人記錄。頁面中需要引入：angular,ngresource和ngmocke2e幾個檔案。

終于完成了！雖然簡單但是可以給我們使用mock模拟crud操作到現代web應用打下基礎。

<a href="http://madebymunsters.com/blog/posts/creating-a-mock-backend-in-angular/">原文位址:http://madebymunsters.com/blog/posts/creating-a-mock-backend-in-angular/</a>

祁幽小貴 譯