使用模拟后端开发无后端的角应用

>本文展示了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

@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调用。 实现了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中文网其他相关文章！