Question

Here’s the fiddle in reference to the broken code. When I try it, the server it is supposed to be sending to doesn’t respond, which leads me to believe it’s not recieving any traffic from my app. Is the problem obvious? If not, what troubleshooting methods can I use to investigate the problem?

stackoverflow wants me to include my code inline so here it is.

index.html

<div ng-controller="DataEntryCtrl">
      <form ng-repeat="entryField in entryFields">
            <input type="text"
                   ng-model="entryField.fieldData"  
                   placeholder="{{entryField.pHolder}}">
      </form>

      <input type="button" ng-click="sendJSON()" value="Object To JSON" />
      <hr/>
       {{res}}
     <ul>
       <li>ID: {{entryFields.id.fieldData}}</li>
       <li>description: {{entryFields.description.fieldData}}</li>
       <li>date: {{entryFields.date.fieldData}}</li>
    </ul>            

</div>

controller.js

'use strict';
/* Controllers */
var app = angular.module('Hubbub-FrontEnd', ['ngResource']);

app.controller('DataEntryCtrl', function($scope,$resource) {
   $scope.entryFields = {
     id:           {pHolder:'ID goes here',fieldData:""},
     description:  {pHolder:'Description goes here',fieldData:""},
     date:         {pHolder:'Drop Dead Date goes here',fieldData:""}
   };

   $scope.showJSON = function() {
       $scope.json = angular.toJson($scope.entryFields);
   };
   $scope.sendJSON = function() {
       $scope.entry = angular.toJson($scope.entryFields);
       $scope.res = $resource('http://10.64.16.6:3000/Create',
         {create:{method:'POST'}},{params:$scope.entry});
       };



});

Answer 1

Currently you are creating the same resource every time the user clicks the button.

What you could do is create the service somewhere in your controller

var Res = $resource('http://10.64.16.6:3000/res/:id', {id: '@id'});

Then, when a user clicks the button, create a new instance of the resource and pass it the data you want to send

$scope.sendJSON = function() {
    $scope.entry = angular.toJson($scope.entryFields);
    var r = new Res();
    r.$save({params: $scope.entry});    
};

The method $save in inherited from ngResource and does a POST request. Here’s a jsfiddle http://jsfiddle.net/jaimem/FN8Yg/19/

In the developer tools the request method will be listed as OPTIONS because it makes it from jsfiddle. The request params will be something along these lines

params:{"id":{"pHolder":"ID goes here","fieldData":"sdf"},"description":{"pHolder":"Description goes here","fieldData":"sdf"},"date":{"pHolder":"Drop Dead Date goes here","fieldData":"sdf"}}

You can read more $resource here