以正確的方式管理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方法本身返回解析返回，然後回調聲明這應該工作的價值承諾。 嘗試這種方法並分享您的發現