9

私のAngularアプリでモックバックエンドサービスを使用する最も簡単な方法を本当に探しています。

簡単なアプリを作成する方法を示すサンプルアプリであり、それが仕事をするのに役立ちます。tnx！

4

2 に答える 2

11

この質問に答える例として、バックエンドレス開発のサンプルに $httpBackend を使用したサンプル plunkrを次に示します。

これを機能させるためにplnkrに追加した主なものは次のとおりです。

  1. angular-mocks.jshtmlでファイルを参照しました。
  2. angular.module に追加ngMockE2Eするには、app.js の 3 行目に配列が必要です
  3. app.run$httpBackendに挿入され、特定の URL への GET が要求されたときに何を応答するかをモック バックエンドに伝えるコードが追加されました。

これは主に$httpBackendのドキュメントから取られました。.passThrough()実際にバックエンドにヒットする (モックをバイパスする) 任意の呼び出しに対してa を実行できることに注意してください。これは、バックエンドの一部がすでに機能している場合に特に役立ちます。

于 2013-02-20T07:57:11.733 に答える
2

以下は、さまざまな例から引き出された基本的なテンプレートです。

'use strict';

(function() {

    if( !document.URL.match(/\?nobackend$/) ){
        // if not requested only add a blank stub to app dependency.
        angular.module('ds.backendMock', []);

    } else if (document.URL.match(/\?nobackend$/)) {

        // if the query string is present add a module with a run definition to replace the back end.
        angular.module('myMock', ['ngMockE2E'])

            .run(function($httpBackend) {

                // MOCK-RUNNER-CONFIGURATION-.
                var DOMAIN = 'example.com',
        $httpBackend.whenGET('http://'+DOMAIN+'/someexample')
                    .respond(
                        //MOCK-ERROR-STATUS-CODE
                        //401 //500 //404  //uncomment integer to mock status code and comment out mock data.
                        //MOCK-DATA-RESPONSE
                        {
                          'id' : '1',
                          'name' : 'MOCK',
                          'description' : 'mocking',

                        }
                    ); //end mock.


                    // various passthroughs. these allow existing services to work, while some are mocked.
                    $httpBackend.whenGET('./some.html').passThrough();

                    // dont mock everything else, specify pass through to avoid error.
                    $httpBackend.whenGET(/^\w+.*/).passThrough();
                    $httpBackend.whenPOST(/^\w+.*/).passThrough();

                });

        }

})(angular);
于 2015-02-12T02:26:53.093 に答える