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. :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.

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: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.

• javascript
• form-submit
• angularjs

• Can you show your current markup & code? Re your PS: that's perhaps just as bad as it might be good... – Marcel Korpel Commented May 21, 2011 at 14:57
• @marcel - didnt render my Copy paste correctly. I hope you can make sense out of this. Appreciate your help – Rajesh Krishnamoorthy Commented May 21, 2011 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 Commented May 21, 2011 at 16:26

2 Answers 2

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

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.