使用 Angular 开发并模拟所有 json 请求/响应答案

【问题标题】：Develop using angular and mock all json request/responses使用 Angular 开发并模拟所有 json 请求/响应
【发布时间】：2013-08-21 17:36:25
【问题描述】：

在我开发将执行实际 json 请求/响应的后端服务之前，我是否可以使用 angularjs 开发网站的整个前端？即持久化到数据库等的 crud 操作。

有人可以提供一些关于如何做到这一点的见解吗？

【问题讨论】：

使用静态 json 数据代替 json 请求？你应该知道你的服务最终会返回什么

标签： json angularjs

【解决方案1】：

您可以通过使用 localStorage 服务并在 REST API 可用时将它们换成实际服务来实现这一点。

这是一个如何实现 localStorage 服务的示例：

app.factory('user', function($rootScope) {

  var userJson = window.localStorage['appUser'];

  var user = userJson ? JSON.parse(userJson) : {
    username: undefined,
    password: undefined
  };

  $rootScope.$watch(function() { return user; }, function() {
    window.localStorage['appUser'] = JSON.stringify(user);
  }, true);

  return user;
});

有关此方法的更多信息，请查看 Igor Minár 的FoodMe app。

【讨论】：

很酷，但是如何为这样的服务/工厂定义一些初始模拟数据？比如我想在我的应用中加载一些测试用户？
我发现这篇文章：flippinawesome.org/2013/09/09/… -- 非常有用！

【解决方案2】：

我目前正在做一个项目，我必须完成同样的事情。有几个选项，包括对 JSON 进行硬编码或从本地存储中引用它。我决定采用另一种方法，对静态 json 文件进行 $http.get() 调用，所以我需要做的就是在完成后用我的 REST 服务调用替换硬编码的 json 文件。

return $http.get('example.json').then(function(result) {
            /* ... Stuff on success ... */
        },
        function(result){
            /* ... Stuff on failure ... */
        }

【讨论】：

那么 angularjs 对所有请求都使用 $http.get 吗？您刚刚将其修改为链接到返回 json 的文件，但 runid 是什么？你可能有 10 个不同的调用，所以每个调用都有自己的静态文件？
我为最终需要的每个 REST Web 服务调用设置了一个 $http.get。这只是满足了我的要求，并且可能会因您的情况而有所不同。在开发 Web 服务时，我创建了一个硬编码的 JSON 响应来模拟 REST 响应。 “RunId”只是我代码中的一个示例。
@ral8 我喜欢这种方法。我正在运行一个 Angular 应用程序并通过 Sinatra 代理我的请求。我正在从公共文件夹中获取 json 文件，但我想知道，拥有包含我的应用程序结构的可公开访问的 json 文件是否存在安全问题？

【解决方案3】：

看看http://docs.angularjs.org/api/ngMockE2E.$httpBackend。它是一个专门为使用 angularJS 进行端到端测试而设计的模拟框架，但它也可以用来完全模拟 REST API。

使用此框架的优势在于，在切换到真正的后端时，您只需要对前端代码进行很少的更改。您只需切换 ng-app 标记并删除对模拟脚本的引用，就是这样。当然，您可以在端到端测试中重用相同的模拟 API。缺点（与使用本地存储相反）是刷新页面（重新加载 angularJS 应用程序）时所有修改过的数据都会消失，但如果您正在开发一个真正的单页 Web 应用程序，那并不是真正的问题。无论如何都不要刷新页面。

【讨论】：