Angular 4 - 如何模拟模拟数据以进行原型设计和开发

Question

我正在将 AngularJS v1.5 项目升级到 Angular 4.x。在开发原始 AngularJS 应用程序时，我们会使用 ngMocks 包来模拟实际的 Web 服务 API 响应，并在页面上相应地显示数据。这在开发过程中非常有用，因为我不必对值进行硬编码以便以后删除。最重要的是，我们将 Webpack 配置为仅在开发期间包含模拟数据，而在构建我们的应用程序以供生产使用时忽略这些模拟数据文件。模拟数据是这样配置的：

/* app-login.mock.js */
import angular from 'angular';
import 'angular-mocks';

angular.module('app').run(function ($httpBackend) {
    $httpBackend
        .whenPOST('./api/auth')
        .respond(function(method, url, data) {
            var credentials = angular.fromJson(data);
            if (credentials.username == 'gooduser') {
                return [200, {'token': createToken(credentials.username)}];
            } else {
                return [401, {'errorMsg': 'Mock login only allows username "gooduser"'}];
            }
        });
});

function createToken(username) {
    // Create a token, which is valid enough for testing purposes.
    // This token is based on the actual token generated by the web service.
    let currentTime = new Date();
    let futureTime = new Date(currentTime.getTime() + ((currentTime.getHours() + 8) * 60 * 60 * 1000));

    let header = {
        alg: 'HS512'
    };

    let payload = {
        exp: futureTime.getTime() / 1000,
        sub: username,
        roles: 'SOME_APPLICATION_ROLES',
        iat: currentTime.getTime() / 1000
    };

    return `${btoa(angular.toJson(header))}.${btoa(angular.toJson(payload))}`;
}

然后将 Webpack 配置为将所有“模拟”文件包含到构建的包中，然后可以将其显示为好像是真实的 HTTP 响应。

/* webpack.config.js */
const isProd = process.env.NODE_ENV === 'production';

const entry = {
    app: (() => {
        let app = [
            'babel-polyfill',
            path.join(PATHS.app, 'pollyfills.ts'),
            path.join(PATHS.app, 'main.ts')
        ];

        if (isProd) {
            app.push(path.join(PATHS.app, 'app.prod.js'));
        } else {
            app.push(path.join(PATHS.app, 'app.mock.js'));
        }

        return app;
    })()
};

module.exports = {
    entry,
    // ...other exports
};

然后是app.mock.js 文件：

/* app.mock.js */
var mockContext = require.context(".", true, /\.mock$/);
mockContext.keys().forEach(mockContext);

我已经在互联网上搜寻了一种与我们的旧解决方案一样有效的解决方案，尽管我还没有找到任何好的答案。我发现的最好的教程是关于如何设置返回模拟数据的单元测试的教程，虽然这对于测试功能很有用，但它并不能帮助我在开发过程中测试应用程序。

我还看到了一些关于使用 Angular 4 中的新 HttpClient 类设置 Interceptors 的文档，但我不确定如何在仅在开发期间允许的条件下将其添加到我们的 Webpack 配置中.有人对该怎么做有任何建议吗？

Answer 1

我使用 angular-in-memory-web-api。你可以在这里找到它：https://github.com/angular/in-memory-web-api

更新： repo 已移至此处，在 angular/angular repo 内：https://github.com/angular/angular/tree/e0dfa42d6e656124f3c3d78e178b1bf091b38e79/packages/misc/angular-in-memory-web-api

它会拦截您的所有 http 调用并使用您提供的示例数据。

要从开发更改为生产，您需要删除导入。或者您可以编写两个不同的模块，一个带有开发导入，一个带有生产导入，并在 webpack 中包含一个或另一个，类似于您现在所做的。 （但我没有尝试过。）

您可以这样设置数据：

import { InMemoryDbService } from 'angular-in-memory-web-api';

import { IProduct } from './product';

export class ProductData implements InMemoryDbService {

    createDb() {
        let products: IProduct[] = [
            {
                'id': 1,
                'productName': 'Leaf Rake',
                'productCode': 'GDN-0011',
                'releaseDate': 'March 19, 2016',
                'description': 'Leaf rake with 48-inch wooden handle.',
                'price': 19.95,
                'starRating': 3.2,
                'imageUrl': 'http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png',
                'tags': ['rake', 'leaf', 'yard', 'home']
            }, 
            // ...
        ];
        return { products };
    }
}

然后您使用普通的 Http 或 HttpClient 构建您的数据访问服务。

我在这里有一个包含所有 CRUD 操作的完整示例：https://github.com/DeborahK/Angular2-ReactiveForms