angular - 我如何为 Angular 2 中的开发(而非测试)提供模拟服务?

标签 angular

我需要一种方法在 Angular 2 的开发期间(而不是测试期间)模拟我的服务。原因是 REST-ful 服务器不可靠(更改 API 而不通知,不稳定,并且难以删除和站立又起来了)。如果我可以模拟我的服务(基本上都是 HTTP REST 客户端)就好了。

在 Angular 2 中创建模拟后端服务的最佳方法是什么?我在互联网上获得了很多关于测试方面模拟后端服务的结果,但这个上下文不是我的用例(我不是模拟测试而是开发)。

我用过 angular cli创建和构建我的项目,但我不确定该工具是否可以提供帮助。

我正在寻找类似 Spring 的方法我们可以在其中使用“配置文件”注释组件/类,然后方便地指定哪个配置文件处于事件状态以注入(inject)正确的依赖项。

最佳答案

我认为实现目标的最佳方法是使用接口(interface)和服务提供者。我希望以下示例代码可以为您指明正确的方向:

data-tables.service-interface.ts

export interface DataTablesServiceInterface {
    getHeaders(): Promise<any[]>;
    getData(query?: string, offset?: number, size?: number): Promise<any>;
}

data-tables.service-provider.ts

import { Http } from '@angular/http';
import { OpaqueToken } from '@angular/core';

import { DataTablesServiceInterface } from './data-tables.service-interface';
import { DataTablesService } from './data-tables.service';
import { DataTablesMockService } from './data-tables.mock-service';

import { environment } from '../../../environments/environment';

let dataTablesServiceFactory = (http: Http) => {
    var serviceToReturn: DataTablesServiceInterface;
    if (environment.production) {
        serviceToReturn = new DataTablesService(http);
    } else {
        serviceToReturn = new DataTablesMockService();
    }
    return serviceToReturn;
};

export let dataTablesToken = new OpaqueToken('DataTablesServiceInterface');

export let dataTablesServiceProvider =
    {
        provide: dataTablesToken,
        useFactory: dataTablesServiceFactory,
        deps: [
            Http
        ]
    };

你只需要实现实际的和模拟的服务,并且可以根据已经在angular-cli中使用environment实现的嵌入式配置文件机制来提供它们。

编辑: 还有一些我忘记提及的信息。在您负责的模块中,您需要将 dataTablesServiceProvider 声明为提供者。在您要使用服务的组件中,DI 的方法与标准方法略有不同。

在组件的构造函数中,您编写以下内容:

constructor(@Inject(dataTablesToken) private dataTablesService: DataTablesServiceInterface)

如果您对不透明 token 感兴趣,我建议您看一下 Opaque Token by Angular

关于angular - 我如何为 Angular 2 中的开发(而非测试)提供模拟服务?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41852212/

相关文章:

angular - 应用程序正在生成我的延迟加载模块的一部分,前缀为 default ~ .. 甚至在它被调用之前

angular - 将 [(ngModel)] 与数据库中的可空类型一起使用

javascript - 如何在内容/风格有所变化的情况下为外部网站提供服务?

javascript - 悬停时是否可以显示按钮的描述?

angular - 在 Angular 2 中从父容器调用子容器中的函数

javascript - Angular CLI 1.6.6 弹出创建带有完整脚本路径的 webpack.config.js

Angular :--prod 与 -prod

javascript - Angular 返回 URL 错误

html - 当鼠标悬停在 html/CSS/angular/bootstrap 中时,扩展树的长文本行(嵌套的 HTML 列表)

Angular2 "No provider for t!"和未捕获( promise ): Error: DI Error