AngularJSでバックエンドRESTをモックして、フロントを独立で開発する方法

開発を進める上でServerサイドと分離してフロントサイドのみに集中して開発すると捗ります。AngularJSではサーバサイドをモックするAPIが用意されています。使ってみました。(Yoeman等はイントール済みを仮定）

まず、angular-mocks.jsというライブラリをindex.htmlで読み込みます。同様にmock.jsというこれから作るスクリプトを読み込むようにしておきます。

# In index.html 
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
# mock.jsはこれから作る
<script src="scripts/mock.js"></script>

次にメインのapp.jsにngMockE2Eのモジュールを追加します

# In app.js
angular.module('frontieApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngMockE2E',
 ])

mock.jsを作ります。RoutingのTemplateUrlと干渉するので回避するためにviews以下をpassThrough()させます。

'use strict';
angular.module('frontieApp')
.run(function($httpBackend){
    // No need to deal with tempaltes
    $httpBackend.whenGET(/^views\//).passThrough();

    var stockList = [
        { id: "APPL", exch:"NYSE", img: "images/apple.gif", name : "Apple" },
        { id: "GOOG", exch:"NYSE", img: "images/google.jpg", name : "Google" }
    ]
    $httpBackend.whenGET('stock/list').respond(stockList);
});

これでstock/listに内部からアクセスするとリストを返すようになります。 アクセスの方法はFactory等を用いて、$resourceを返し、そのサービスをコントローラから使うことでListを取得できます。

# In service
.factory ('stockList', function($resource){
    return $resource('stock/list');
})
# In Controller
.controller('StocksCtrl', function ($scope, $resource, $location, stockList, myOrder) {
// GET /stock/list
stockList.query(function(res){
    $scope.stocks = res;
});

これでバックエンドとの切り離しができますね。仕様を決めておけば、捗るkと間違いなしですね!