Gestione dei modelli di dati in AngularJS nel modo corretto

Question

Mentre navigo su Internet, sto trovando tanti modi diversi per gestire il modello di dati utilizzato nei nostri modelli angolari, ma tutti mostrano solo una piccola parte dell'immagine più grande. In un'applicazione di grandi dimensioni è necessario incollare i dati dell'API a una qualche forma di modello JavaScript che a sua volta viene utilizzata all'interno del nostro modello, ma non sono sicuro di come debba essere gestito tutto ciò.

Dopo aver letto this article on AngularJS models Ora so che dovrei includere tutti i miei modelli in un servizio in modo che le informazioni siano disponibili su più controller. Una delle uniche cose è che non spiega come legare questi Servizi con le richieste API.

Ecco la mia attuale implementazione.

Modello clienti

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

Poi nel mio controller io uso questo modello sul mio $scope come

controller clienti

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

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

}]); 

Questo è ciò che il mio servizio API assomiglia

API Service

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

    var service = {}; 

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

    return service; 

}]) 

Questo ha funzionato abbastanza bene fino ad ora, quando mi sono reso conto che ci sono informazioni di API che si raccoglie in un controllore genitore che ora è necessaria in un controller bambino

Tornando all'articolo sopra riportato, ora posso modificare i miei modelli in modo che siano racchiusi in un servizio angolare e siano quindi disponibili su più controller. Questa nuova CustomerService può assomigliare a questo

NUOVO CustomerService

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

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

    return CustomerService; 
}); 

Questo non è abbastanza come l'articolo (molto più semplice), ma contiene in sostanza le funzioni OO-like per ottenere e impostare l'oggetto Customer .

Il problema con questo modo è che non abbiamo ancora accesso al vero endpoint dell'API per ottenere i dati del cliente dal server? Dovremmo tenere separati il ​​servizio API e i servizi modello o provare a combinarli in un singolo servizio? Se facciamo questo, abbiamo anche bisogno di un modo per distinguere tra ottenere effettivamente nuovi dati dal server e ottenere l'oggetto Cliente attualmente impostato nell'oggetto singleton.

Mi piacerebbe conoscere la tua risposta iniziale a questa situazione?

UPDATE

mi sono imbattuto in this article che riunisce tutte le funzionalità di un modello tra cui le richieste API in un servizio di fabbrica

Answer 1

servizio di modello e di servizio API dovrebbe essere separata. Il servizio API può dipendere dal servizio modello e restituire oggetti modello invece di restituire direttamente ciò che proviene da 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; 

}]); 

In questo modo è stato combinato il servizio modello e il servizio API. Suppongo che Customer sia un servizio modello anziché l'oggetto Customer.

Aggiornamento: Sulla base della domanda di follow-up, ho pensato che ci potesse essere un modo migliore, ma non l'ho provato. Piuttosto che creare una promessa ogni volta che siamo in grado di utilizzare la promessa risorsa:

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

Dato che il metodo in sé then restituisce promessa che si risolve per restituire il valore della dichiarazione poi richiamata questo dovrebbe funzionare. Prova questo approccio e condividi i tuoi risultati