Angularjs - simple form submit

WARNING This is for Angular 1.x

If you are looking for Angular (v2+, currently version 8), try this answer or the official guide.

ORIGINAL ANSWER

I have rewritten your JS fiddle here: http://jsfiddle.net/YGQT9/

<div ng-app="myApp">    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">        First name:    <br/><input type="text" name="form.firstname">            <br/><br/>        Email Address: <br/><input type="text" ng-model="form.emailaddress">         <br/><br/>        <textarea rows="3" cols="25">          Describe your reason for submitting this form ...         </textarea>         <br/>        <input type="radio" ng-model="form.gender" value="female" />Female        <input type="radio" ng-model="form.gender" value="male" />Male         <br/><br/>        <input type="checkbox" ng-model="form.member" value="true"/> Already a member        <input type="checkbox" ng-model="form.member" value="false"/> Not a member        <br/>        <input type="file" ng-model="form.file_profile" id="file_profile">        <br/>        <input type="file" ng-model="form.file_avatar" id="file_avatar">        <br/><br/>        <input type="submit">    </form></div>

Here I'm using lots of angular directives(ng-controller, ng-model, ng-submit) where you were using basic html form submission. Normally all alternatives to "The angular way" work, but form submission is intercepted and cancelled by Angular to allow you to manipulate the data before submission

BUT the JSFiddle won't work properly as it doesn't allow any type of ajax/http post/get so you will have to run it locally.

For general advice on angular form submission see the cookbook examples

UPDATE The cookbook is gone. Instead have a look at the 1.x guide for for form submission

The cookbook for angular has lots of sample code which will help as the docs aren't very user friendly.

Angularjs changes your entire web development process, don't try doing things the way you are used to with JQuery or regular html/js, but for everything you do take a look around for some sample code, as there is almost always an angular alternative.

Sending data to some service page.

<form class="form-horizontal" role="form" ng-submit="submit_form()">    <input type="text" name="user_id" ng-model = "formAdata.user_id">    <input type="text" id="name" name="name" ng-model = "formAdata.name"></form>$scope.submit_form = function()            {                $http({                        url: "http://localhost/services/test.php",                        method: "POST",                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},                        data: $.param($scope.formAdata)                    }).success(function(data, status, headers, config) {                        $scope.status = status;                    }).error(function(data, status, headers, config) {                        $scope.status = status;                    });            }

I have been doing quite a bit of research and in attempt to resolve a different issue I ended up coming to a good portion of the solution in my other post here:

Angularjs - Form Post Data Not Posted?

The solution does not include uploading images currently but I intend to expand upon and create a clear and well working example. If updating these posts is possible I will keep them up to date all the way until a stable and easy to learn from example is compiled.