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

Question

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

有人可以提供一些有关如何执行此操作的见解吗？

Answer 1

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

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

Answer 2

You could accomplish this by using localStorage services and swapping them out for actual services as the REST APIs become available.

Here is an example of how one could implement a localStorage service:

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;
});

For more information on this approach, check out Igor Minár's FoodMe app.

Answer 3

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

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