AngularJS - How do I submit a form to a controller on the server?

Question

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.

Answer 1

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);
  };
}