13

The cookbook form examples on the AngularJS site only save the state on the client. How do I submit to the server?

Alternatively, how do I use jQuery's form.submit() on the form in the ng:click="save()" function?

Edit - Found 2 ways to do this ( I also removed the HTML markup I pasted before - just refer to the advanced form cookbook example for the source)

  1. http://webpac2.rot13.org:3000/conference/Work (by Dobrica Pavlinusic) to go the AngularJS way using a resource to send the data to the server in JSON format. I had issues with that on the server side - AngularJS was sending it fine but grails were mangling it (according to firebug and request content-length). I need to look into this more. How do I change the content-type in angular for a resource method like $save()?

  2. Put a form in and use a submit button. Since I am not doing a single page web app, I used this method. Most validations were on the client and a few more on the server which was sufficient for me.

Just putting this here so that someone else can use this for possible solutions and best approach.

FabioBranch
  • 175
  • 4
  • 19
Rajesh Krishnamoorthy
  • 131
  • 1
  • 4
  • Can you show your current markup & code? Re your PS: that's perhaps just as bad as it might be good... – Marcel Korpel May 21 '11 at 14:57
  • @marcel - didnt render my Copy paste correctly. I hope you can make sense out of this. Appreciate your help – Rajesh Krishnamoorthy May 21 '11 at 15:06
  • Can you show the HTML markup as it is sent to the browser (use ‘View Source’), so we don't have to figure out what the resulting HTML will look like. After all, this is what JavaScript will see. – Marcel Korpel May 21 '11 at 16:26

2 Answers2

12

Note, there is strict separation of view (your html template) and logic (your JS code) - mainly because of testability.

The right way is to just send your model to the server, using $resource (for REST) or low level $http. Instead of doing the job in the template.

Simple example - HTML template

First: <input type="text" ng-model="person.first" />
Last: <input type="text" ng-model="person.last" />
<button ng:click="save()">Save</button>

JavaScript - controller

function FormCntl($scope, $http) {
  $scope.save = function() {
    $http.put('/save.py', $scope.person);
  };
}
Vojta
  • 23,061
  • 5
  • 49
  • 46
  • if I use `this.save = function...`, that doesn't work. I have to use `$scope.save = function...` in the controller. – ndequeker Sep 10 '12 at 10:11
  • 2
    @Voles thanks, updated to current v1 syntax (the answer was written in 0.9.* syntax) – Vojta Sep 11 '12 at 07:09
  • When I dump the request on server-side nothing's submitted. It's an empty array: `Log::write(print_r($_REQUEST,true))` – Jürgen Paul Sep 13 '12 at 09:12
  • @itcouldevenbeaboat you need to wrap it into `
    ` tag, then the button will get called on enter.
     – Vojta Jul 30 '13 at 03:22
  • @PineappleUndertheSea not sure what is the problem in your case, but try `console.log($scope.person)` before sending it to the server... – Vojta Jul 30 '13 at 03:23
0

As far as I know, there isn't really a good way to modify headers which angular sends to server expect for editing angular source. This is planned enhancement, but it's still not done.

I think that angular google group might be better place to ask specific questions like this since developers are really friendly and knowledgeable.

dpavlin
  • 1,372
  • 2
  • 9
  • 18