AngularJS JQuery Ajax form submission Equivalent

Question

Lately I have jumped into angularjs and its wonderful so far. I have been sending AJAX requests through $http service. Today I was shocked to find that there is no simple way to do it (to the best of my knowledge). Seaching through google and SO took me nowhere with convoluted complex solution.

Though I ended up using JQuery for now, am curious if something like JQuery ajax, capable of sending form is really available. Here is simple JQuery code to illustrate what am talking about

$.ajax({
           type: "POST",
           url: formUrl,
           data: formData,  
           success: function(data)
           {
                $scope.form = $sce.trustAsHtml('<div class="alert alert-success">Succesfully Registred. You will be taken home in 5 seconds!</div>');
                $timeout(function(){
                    $window.location.href= "#home";
                }, 10000);
           }
         });

Vivek · Accepted Answer · 2015-12-04 11:59:41Z

2

There is an equivalent in angular, here is a link to a jsfiddle with an example implementation: http://jsfiddle.net/dmcquillan314/boo5tn62/

The function on line 11 is an example of how to send a request to a rest api:

$scope.sendToResource = function() {}

To enable this feature just change the function in the directive to point to this factory and it will send a request to the api url configured in the factory.

In order to test this with an api you'll have to change the factory to match your server

here are some links to relevant documentation:

https://docs.angularjs.org/api/ngResource/service/$resource

https://docs.angularjs.org/api/ng/directive/ngSubmit

https://docs.angularjs.org/api/auto/service/$provide

Let me know if anything is unclear or you require any further explanation. Hopefully this should help you get started.

edited Dec 4, 2015 at 11:59

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

answered Apr 3, 2015 at 23:51

dmcqu314

87511 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stefano Mtangoo Over a year ago

Seems so complicated for such a basic task. I will stick with JQuery. Thanks for elaborate post!

dmcqu314 Over a year ago

No argument there. No problem though. It's becomes helpful when working with a large scale application.

Stefano Mtangoo Over a year ago

how is it helpful? my opinion is it makes simple things difficult. But again I may be missing the big picture!

dmcqu314 Over a year ago

@StefanoMtangoo IMHO, it mainly helps when you're building a js application where you have multiple ReST endpoints that you need to interface with. The syntax for building components also helps to ease the process of composing services as well as using OOP design patterns through the use of factories, services and decorators which are all available out of the box. Not to mention the client side validation library within is amazing and extremely extendible at just about any level. There's plenty of other reasons why I use angularJS but those are a few of the big ones.

dmcqu314 Over a year ago

@StefanoMtangoo Also, the Q promises library is an integrated component within AngularJS. Whether using angular or any js framework I'd suggest it for any type of asynchronous programming. github.com/kriskowal/q

Collectives™ on Stack Overflow

AngularJS JQuery Ajax form submission Equivalent

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related