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

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

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

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

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

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

> Ticket>

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

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

文件的boot.ts>使用Angular的依賴(lài)項(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互動(dòng)以處理請(qǐng)求。TicketService> MockBackend

使用

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

TicketComponent攔截請(qǐng)求，并使用

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

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

>

MockBackend MockBackend

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

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

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