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});
};
});
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
This question might prove useful as well AngularJS performs an OPTIONS HTTP request for a cross-origin resource. You may need to set up some headers to allow cross origin support.
Beyond that I think you may also have your parameters mangled when you're creating your resource:-
$scope.res = $resource('http://10.64.16.6:3000/Create',
{create:{method:'POST'}},{params:$scope.entry});
Try:
$scope.res = $resource('http://10.64.16.6:3000/Create', null,
{create:{method:'POST', params: $scope.entry}});
$scope.res.create();
And yes you could create the resource ahead of time so you aren't recreating it every time the button is clicked.