>本文展示了Angular 2的MockBackend>如何促進(jìn)獨(dú)立的前端發(fā)展，加速迭代和測試而沒有後端依賴性。 MockBackend攔截HTTP請求，返回預(yù)定義的響應(yīng)，簡化發(fā)展並最大程度地減少結(jié)構(gòu)性變化的風(fēng)險(xiǎn)。

票務(wù)系統(tǒng)示例說明了

>的設(shè)置，請求處理和CRUD操作模擬。 Angular的依賴注入用MockBackend替換默認(rèn)的XHRBackend，創(chuàng)建了模仿服務(wù)器交互的受控測試環(huán)境。 過渡到生產(chǎn)後端只是涉及刪除MockBackend依賴性。 MockBackend>

>經(jīng)常，前端和後端開發(fā)團(tuán)隊(duì)將面臨阻止依賴性。 REST API雖然有益，但通常會導(dǎo)致前端團(tuán)隊(duì)等待後端可交付成果。 本文提出了一個(gè)解決方案：創(chuàng)建模擬後端以實(shí)現(xiàn)並行開發(fā)和一個(gè)穩(wěn)健的界面，從而降低了與結(jié)構(gòu)變化相關(guān)的風(fēng)險(xiǎn)。

票務(wù)系統(tǒng)示例定義了休息端點(diǎn)（下面的表1）和A

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

> Ticket>

>表1：票務(wù)系統(tǒng)端點(diǎn)

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

文件的boot.ts>使用Angular的依賴項(xiàng)注入提供 AppModule並配置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 { }

（使用

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

使用

> service（使用TicketService）摘要Ajax調(diào)用。 實(shí)現(xiàn)了Http>，MockBackend，addNewTicket，saveTicket的方法。 deleteTicket> loadAllTicketsloadTicketById顯示單個(gè)門票。

TicketComponent攔截請求，並使用

提供模擬響應(yīng)。 它按照定義的端點(diǎn)處理獲取，發(fā)布和刪除請求。

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

>

MockBackend MockBackend

>經(jīng)常詢問有關(guān)Angular 2模型的問題（FAQS）

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

以上是使用模擬後端開發(fā)無後端的角應(yīng)用的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！