3

我正在开发一个大型 Angular 应用程序，它需要在浏览器中模拟整个 API（也称为无后端开发）。我的应用程序中有很多不同的部分和视图，每个部分都有自己的模拟定义。

我知道我可以使用ngMock模块的$httpBackend服务来模拟 AJAX 调用。这就是我想要的。我在 jsfiddle 找到了一个工作片段。

但是我缺少的是如何将其拆分为多个文件？正如我所说，我的应用程序将有数百个页面，甚至可能有更多的 RESTful 资源，我不能简单地将其放入一个源文件中。这作为架构问题：将数千个调用划分为简单模拟相同 API 的不同文件的最佳方法是什么（即有效、可扩展且易于维护） ？whenGETwhenPOST如何根据项目文件结构分离模拟？应用程序中的每个模块都应该有一个单独的.run()方法吗？我可以从 JSON 文件加载模拟吗？

我将不胜感激解释和演示

为了让回答更容易，下面是小提琴的相关部分：

myApp.run(function ($httpBackend) {
    var phones = [{name: 'phone1'}, {name: 'phone2'}];

    $httpBackend.whenPOST('/phones').respond(function (method, url, data, headers) {
        console.log('Received these data:', method, url, data, headers);
        phones.push(angular.fromJson(data));
        return [200, {}, {}];
    });

    $httpBackend.whenGET('/phones').respond(function (method, url, data) {
        console.log("Getting phones");
        return [200, phones, {}];
    });

    $httpBackend.whenGET(/\.html$/).passThrough();
});
4

2 回答 2

0

你可以使用这样的东西：

XXXModule.factory('MockedDataProvider', () ->
  getData: (url) ->
    request = new XMLHttpRequest();
    request.open('GET', url, false)
    request.send(null)
    request.response
)
.run([
  '$httpBackend',
  'MockedDataProvider'
  ($httpBackend, MockedDataProvider) ->
    $httpBackend.whenGET(/i18n/).passThrough()
    $httpBackend.whenGET('/api/xxx/yyy').respond(
      (method, url, data) ->
        data = MockedDataProvider.getData('xxx/mocked.json')
        [200, data]
 )
])

你可以将你的模拟分成单独的文件夹/模块等......它应该工作得很好:)

PS。代码在咖啡脚本中；）

于 2015-03-10T19:42:27.097 回答
0

我遇到了类似的问题，这是我的解决方案。

请注意，我正在使用generator-cg-angular并且文件结构是从那里继承的。

index.html ..................... main HTML file
app.js ......................... angular module initialization and route setup
httpBackendStub.js ............. backend stub module
/service ....................... angular services folder
    dimension.js ............... example service
    dimension-spec.js .......... example service unit test
    dimension-stub.js .......... example backend stub with routes and data

有些data-concat="false"属性意味着所有后端存根都将在构建时被删除。

索引.html

<!-- Bower components and angular app scripts included here -->
...
<!-- Backend stubbing -->
<script src="bower_components/angular-mocks/angular-mocks.js" data-concat="false"></script>
<script src="httpBackendStub.js"        data-concat="false"></script>
<script src="service/dimension-stub.js" data-concat="false"></script>
...
<!-- Initial HTML markdown -->

httpBackendStub.js

angular.module('app')
    .config(function($provide) {
        $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
    })
    .run(function ($httpBackend) {
        // pass templates
        $httpBackend.whenGET(/partial\/.*/).passThrough();
    });

服务/维度-stub.js

angular.module('app').run(function ($httpBackend) {

    $httpBackend.whenGET('api/dimensions').respond([
        {
            name: 'Medium',
            ...
        },
        ...
    ]);

});
于 2015-05-10T11:58:57.253 回答