title: Managing data models in AngularJS the correct way
body: <p>As I scour the internet, I am finding so many different ways to manage the data model that is used in our Angular templates, but they all only show a small part of the bigger picture.  In a large application we need to glue together API data to some form of JavaScript model which in turn is used within our template, but I am not sure how this should all be managed.</p>
  
  <p>After reading <a href="https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc">this article on AngularJS models</a> I am now aware that I should be wrapping all of my models in a service so the information is available across multiple controllers.  One of the only things is that it does not explain how to tie these Services in with API requests.</p>
  
  <p>Here is my current implementation.</p>
  
  <p><strong>Customer Model</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Then in my controller I use this model on my <code>$scope</code> like</p>
  
  <p><strong>Customer Controller</strong></p>
  
  <pre><code>app.controller('CustomerController', [function($scope, API){
      $scope.model = {};
  
      API.Account.getCustomer({id:'12345'}, function(data){
          $scope.model = new Customer(data);
      });
  
  }]);
  </code></pre>
  
  <p>This is what my API service looks like</p>
  
  <p><strong>API Service</strong></p>
  
  <pre><code>app.factory("API", ["$resource", function ($resource) {
  
      var service = {};
  
      service.Account = $resource('/WebApi/Account/:type/:id', {},
                          {
                              getCustomer: { method: 'GET', params: { type: 'Customer' } }
                          });
  
      return service;
  
  }])
  </code></pre>
  
  <p>This has worked fairly well up until now, when I realized that there is API information that is gathered in a parent controller that is now needed in a child controller</p>
  
  <p>Going back to the article linked above, I now can change my models around so they are wrapped in an Angular Service and are therefore available across multiple controllers.  This new <code>CustomerService</code> may look like this</p>
  
  <p><strong>NEW CustomerService</strong></p>
  
  <pre><code>app.factory('CustomerService', function() {
    var CustomerService = {};
    var customer = new Customer();
  
    CustomerService.getCustomer = function() { return customer; }
    CustomerService.setCustomer = function(obj) { customer = obj; }
  
    return CustomerService;
  });
  </code></pre>
  
  <p>This isn't quite like the article (much simpler) but it basically contains the OO-like functions to get and set the Customer object.</p>
  
  <p>The problem with this way is we still don't have access to the actual API endpoint to get the customer data from the server?  Should we keep the API Service and the Model Services seperate or try to combine them into a single Service? If we do this then we also need a way to differentiate between actually getting fresh data from the server and just getting the currently set Customer object in the singleton object.</p>
  
  <p>I would like to know your initial response to this predicament?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I came across <a href="http://www.webdeveasy.com/angularjs-data-model/">this article</a> that brings together all the functionality of a model including the API requests into a factory service</p>