angularjs - 以正确的方式在 AngularJS 中管理数据模型

Question

当我在互联网上搜索时，我发现了许多不同的方法来管理我们的 Angular 模板中使用的数据模型，但它们都只显示了全局的一小部分。在大型应用程序中，我们需要将 API 数据粘合到某种形式的 JavaScript 模型中，然后在我们的模板中使用该模型，但我不确定应该如何管理这一切。

阅读后this article on AngularJS models我现在意识到我应该将所有模型包装在一个服务中，这样信息就可以跨多个 Controller 使用。唯一的一件事是它没有解释如何将这些服务与 API 请求联系起来。

这是我目前的实现。

客户型号

var Customer = function (obj) {
    var self = this;

    if (!obj) {
        self.Name = null;
        self.Address = null;
        self.PrimaryEmailAddress = null;
        self.SecondaryEmailAddress = null;
        self.PhoneNumber = null;

    } else {
        self = obj;
    }

    return self;
}

然后在我的 Controller 中，我在 $scope 上使用这个模型喜欢

客户 Controller

app.controller('CustomerController', [function($scope, API){
    $scope.model = {};

    API.Account.getCustomer({id:'12345'}, function(data){
        $scope.model = new Customer(data);
    });

}]);

这就是我的 API 服务的样子

API服务

app.factory("API", ["$resource", function ($resource) {

    var service = {};

    service.Account = $resource('/WebApi/Account/:type/:id', {},
                        {
                            getCustomer: { method: 'GET', params: { type: 'Customer' } }
                        });

    return service;

}])

到目前为止，这一直运行良好，当我意识到父 Controller 中收集的 API 信息现在需要在子 Controller 中

回到上面链接的文章，我现在可以更改我的模型，使它们包含在 Angular Service 中，因此可以跨多个 Controller 使用。这个新 CustomerService可能看起来像这样

新客户服务

app.factory('CustomerService', function() {
  var CustomerService = {};
  var customer = new Customer();

  CustomerService.getCustomer = function() { return customer; }
  CustomerService.setCustomer = function(obj) { customer = obj; }

  return CustomerService;
});

这与文章不太一样(简单得多)，但它基本上包含用于获取和设置 Customer 对象的类似 OO 的函数。

这种方式的问题是我们仍然无法访问实际的 API 端点来从服务器获取客户数据？我们应该将 API 服务和模型服务分开还是尝试将它们合并为一个服务？如果我们这样做，那么我们还需要一种方法来区分从服务器实际获取新数据和仅获取单例对象中当前设置的 Customer 对象。

我想知道您对这种困境的初步 react 是什么？

更新

我遇到了 this article将模型的所有功能(包括 API 请求)整合到工厂服务中

Answer 1

模型服务和 API 服务应该是分开的。 API 服务可以依赖模型服务并返回模型对象，而不是直接返回来自 api 的内容。

app.factory("API", ["$resource",'Customer','$q' function ($resource,Customer,$q) {

    var service = {};

    service.Account = function(accountId) {
         var defer=$q.defer();     
         var r=$resource('/WebApi/Account/:type/:id', {},
                        {
                            getCustomer: { method: 'GET', params: { type: 'Customer' }}
                        });
         r.getCustomer({id:'12345'}, function(data){
             defer.resolve(new Customer(data));
         })
         return defer.promise;
     }
     return service;

}]);

通过这种方式，您已经组合了模型服务和 API 服务。我假设 Customer是模型服务而不是 Customer对象。

更新:根据您的后续问题，我认为可能有更好的方法，但我还没有尝试过。而不是每次我们可以使用资源 promise 时都创建自己的 promise :

service.Account = function(accountId) {
         var r=$resource('/WebApi/Account/:type/:id', {},
                        {
                            getCustomer: { method: 'GET', params: { type: 'Customer' }}
                        });
         return r.getCustomer({id:'12345'}).$promise.then(function(data) {
            return new Customer(data); 
         });
}

自 then方法本身返回 promise ，该 promise 被解析为返回 then 回调语句的值，这应该可以工作。
尝试这种方法并分享您的发现