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

Question

在我搜索互联网时，我发现有很多不同的方式来管理我们的Angular模板中使用的数据模型，但它们都只显示较大图片的一小部分。在一个大型应用程序中，我们需要将API数据粘贴到某种形式的JavaScript模型中，然后在模板中使用这些模型，但我不确定如何管理这些模型。

阅读后this article on AngularJS models我现在意识到我应该将所有模型包装在一个服务中，以便信息在多个控制器中可用。唯一的问题是它没有解释如何将这些服务与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; 
} 

然后在我的控制器，我用我的$scope像

客户控制器这种模式

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; 

}]) 

这已经相当行之有效直到现在，当我意识到有是聚集在现在需要在子控制器中的父控制器API信息

回到上面链接的文章，我现在可以改变我的模型，所以它们被封装在一个Angular Service中，因此可以跨多个控制器使用。这种新的CustomerService可能看起来像这样

新的CustomerService

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

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

    return CustomerService; 
}); 

这是不是很喜欢的文章（更简单），但它基本上包含了面向对象的类函数来获取和设置客户对象。

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

我想知道你对这个困境的初步反应？

UPDATE

我碰到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对象。

更新：根据你的后续问题，我认为可能有更好的办法，但我没有尝试过。而不是每次创建自己的承诺，我们可以使用的资源承诺：

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方法本身返回解析返回，然后回调声明这应该工作的价值承诺。 尝试这种方法并分享您的发现