title: Saving new models using AngularJS and $resource
body: <p>I'm trying to get an understanding of AngularJS using $resource, however most of the examples I see out there don't explain how to actually create new instances of something using $resource (or how the entire setup should look).
  I've posted my code at the bottom of this.</p>
  
  <p>I have the following setup, where posting to '/entry/api' should create a new entry.
  The entry object it self has three properties: name, description and id.</p>
  
  <p>i thought that calling
  $scope.save(); would do two things:</p>
  
  <ol>
  <li>Map the input fields as POST data</li>
  <li>make a POST request to the url defined in the $resource (in this case '/entry/api')</li>
  </ol>
  
  <p>Some examples I've seen are manually mapping the data to the resource as such:</p>
  
  <pre><code>var entry = new Entry();
  entry.name = $name; // defined in entryController
  entry.description = $scope.description; // &lt;-- defined in entryController
  entry.$save()
  </code></pre>
  
  <p>I thought this wasn't supposed to be necessary, as these fields are defined in the html.
  This solution results in:  </p>
  
  <ol>
  <li>Defining a model in the backend  </li>
  <li>Defining a model in the front end (the entryController <code>div</code>)  </li>
  <li>Adding the values from the from the entryController <code>div</code> to the JS version of the model and then finally saving it.  </li>
  </ol>
  
  <p>It might be the way AngularJS works, however I thought that the input fields in the html would automatically be mapped.</p>
  
  <p>Otherwise you have at least 3 places in the code to update if you add or remove a property of your (backend) model.</p>
  
  <p>How are you supposed to use AngularJS along with <code>$resource</code> to save new objects?</p>
  
  <pre><code>angular.module('entryManager', ['ngResource']);
  
  function pollController($scope, $resource) {
      $scope.polls = $resource('/entry/api/:id', {id: '@id'});
  
      $scope.saveEntry = function() {
          this.save();
      }
  }
  
  
  &lt;html ng-app="entryManager"&gt;
  ... &lt;-- include angularjs, resource etc.
  
  &lt;div ng-controller="entryController"&gt;
      &lt;input type='text' ng-model="name"&gt;&lt;br/&gt;
      &lt;textarea ng-model="description" required&gt;&lt;/textarea&gt;&lt;br/&gt;
      &lt;button class="btn btn-primary" ng-click="saveEntry()"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>