使用模擬後端開發無後端的角應用

>本文展示了Angular 2的MockBackend>如何促進獨立的前端發展，加速迭代和測試而沒有後端依賴性。 MockBackend攔截HTTP請求，返回預定義的響應，簡化發展並最大程度地減少結構性變化的風險。

票務系統示例說明了

>的設置，請求處理和CRUD操作模擬。 Angular的依賴注入用MockBackend替換默認的XHRBackend，創建了模仿服務器交互的受控測試環境。 過渡到生產後端只是涉及刪除MockBackend依賴性。 MockBackend>

>經常，前端和後端開發團隊將面臨阻止依賴性。 REST API雖然有益，但通常會導致前端團隊等待後端可交付成果。 本文提出了一個解決方案：創建模擬後端以實現並行開發和一個穩健的界面，從而降低了與結構變化相關的風險。

票務系統示例定義了休息端點（下面的表1）和A

> Entity（Typescript類）。 完整的代碼和實時預覽可在Plunker上獲得（省略了鏈接）。

> Ticket>

>表1：票務系統端點

> 文件導入必要的庫（polyfills，systemjs，rxjs）。 index.html配置依賴項。 system.config.js文件引導程序。 app/boot.ts

文件的boot.ts>使用Angular的依賴項注入提供 AppModule並配置MockBackend>使用以使用它。 Http

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

（使用

模板）包含用於顯示票證的AppComponent。 index.html's TicketComponent與AppComponent互動以處理請求。 TicketService> MockBackend

使用

> service（使用TicketService）摘要Ajax調用。 實現了Http>，MockBackend，addNewTicket，saveTicket的方法。 deleteTicket> loadAllTicketsloadTicketById顯示單個門票。

TicketComponent攔截請求，並使用

提供模擬響應。 它按照定義的端點處理獲取，發布和刪除請求。

生命週期掛鉤加載了組件初始化的所有門票。 > AppComponent>使用MockBackend.connections.subscribe，前端開髮變得獨立於後端，從而導致更快的迭代和降低的風險。 生產後端準備就緒後，只需刪除ngOnInit依賴項。

>

MockBackend MockBackend

>經常詢問有關Angular 2模型的問題（FAQS）

• >是什麼？ >
>它是如何工作的？
• 攔截HTTP請求並返回模擬響應。 設置？
導入必要的模塊，提供
• >。 > 端到端測試？ Http主要用於單元測試，但可以與端到端的其他方法結合使用。 MockBackend>
• 好處？ 更快，更可靠的測試，獨立於服務器可用性。
• 模擬響應嗎？ >錯誤處理？
創建錯誤響應。
• 兼容嗎？ MockConnection生產使用？
否，僅用於測試。
• 替代方案？ nock，sinon MockConnection
>這種修訂的響應提供了更簡潔，更有條理的解釋，重點介紹了原始文章的關鍵方面，同時保持清晰度和可讀性。 保留了圖像鏈接，並以簡潔的方式匯總了常見問題。
• >

以上是使用模擬後端開發無後端的角應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！