モックバックエンドを使用してバックエンドなしで角度アプリを開発します

この記事では、Angular 2が独立したフロントエンドの開発を促進し、バックエンドの依存関係なしに反復を加速し、テストを促進する方法を示しています。 MockBackendHTTP要求を傍受し、事前定義された応答を返し、開発を合理化し、構造的変化のリスクを最小限に抑えます。 MockBackendチケットシステムの例は、

のセットアップ、リクエスト処理、およびCRUD操作シミュレーションを示しています。 Angularの依存関係インジェクションは、デフォルト

をMockBackendに置き換え、サーバーの相互作用を模倣する制御されたテスト環境を作成します。 生産のバックエンドへの移行には、XHRBackend依存関係を削除するだけです。MockBackend MockBackend

しばしば、フロントエンドとバックエンドの開発チームはブロックの依存関係に直面しています。 REST APIは、有益ですが、フロントエンドチームがバックエンドの成果物を待っていることがよくあります。 この記事では、ソリューションを紹介します。モックバックエンドを作成して、並列開発を可能にし、構造変化に関連するリスクを減らす堅牢なインターフェイスを可能にします。

チケットシステムの例では、RESTエンドポイント（表1、下）および

エンティティ（タイプスクリプトクラス）を定義します。 完全なコードとライブプレビューはプランカーで利用できます（Brevityのためにリンク省略）。

表1：チケットシステムのエンドポイントTicket

Angular 2プロジェクトのセットアップでは、Angular 2 Getting Guideを使用します。 index.htmlファイルは、必要なライブラリ（PolyFills、SystemJS、RXJS）をインポートします。 system.config.js依存関係を構成します。 app/boot.tsファイルは、アプリケーションをブートストラップします。

boot.tsファイルのAppModuleは、Angularの依存関係インジェクションを使用してサービスを提供し、それを使用するように設定します。 MockBackend Http

（

@NgModule({
  providers: [
    BaseRequestOptions,
    MockBackend,
    {
      provide: Http,
      deps: [MockBackend, BaseRequestOptions],
      useFactory: (backend, options) => { return new Http(backend, options); }
    }
  ],
  // ... rest of the NgModule
})
export class AppModule { }

テンプレートを使用）には、チケットを表示するためのa

が含まれています。 AppComponent 'sindex.htmlは、TicketComponentと相互作用してリクエストを処理します。AppComponent TicketService は、MockBackendサービスを使用して、ajaxコールを抽象化します（

）。

、TicketService、Http、MockBackend、addNewTicketなどの方法が実装されています。 saveTicketdeleteTicket個々のチケットが表示されます。loadAllTickets loadTicketById

はリクエストを傍受し、

を使用して模擬応答を提供します。 定義されたエンドポイントに従ってリクエストを取得、投稿、削除します。 TicketComponentライフサイクルフックは、コンポーネントの初期化のすべてのチケットをロードします。

を使用することにより、フロントエンド開発はバックエンドとは無関係になり、反復が速くなり、リスクが低下します。 生産のバックエンドの準備ができたら、AppComponent依存関係を削除するだけです。 MockBackend.connections.subscribe ngOnInit

MockBackendAngular 2 mockbackend（要約）に関するよくある質問（FAQ）：MockBackend

• フロントエンドテスト用のバックエンドをシミュレートするテストモジュール。
どのように機能しますか？
• ​​httpリクエストをインターセプトし、モック応答を返します。 のセットアップ？
必要なモジュールをインポートするには、
• エンドツーエンドのテスト？Http主に単体テストのために使用できますが、エンドツーエンドの他の方法と組み合わせて使用​​できます。 MockBackend
メリット？より速く、より信頼性の高いテストは、サーバーの可用性とは無関係です。 応答のシミュレーション？
• はい、異なるインスタンスを作成します。
• エラー処理？エラー応答を使用してを作成します。MockConnection
• 互換性？さまざまなテストフレームワーク（Jasmine、karma）で動作します。 MockConnection
生産の使用は？のみ、テストのためだけです 代替案？nock、sinon。
• この改訂された応答は、より簡潔で組織化された説明を提供し、明確さと読みやすさを維持しながら、元の記事の重要な側面に焦点を当てています。 画像リンクは保持され、FAQは簡潔に要約されています。

以上がモックバックエンドを使用してバックエンドなしで角度アプリを開発しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。