Migrating app to AngularJS?

Question

i have existing web application where most of the time pages are submitted traditional way(like document.form.submit or ) I am planning to migrate to angularJS which i am learning. I am not sure how we can submit form in traditional way (without ajax) with angularJS ? I know it won't be true Single Page App(SPA), but for starting i would like to go this way.

Approach for migrating traditional app to SPA :- In future , i would like to go for SPA in which i will submitting the form thru ajax way using AngularJS. I have vague understanding how will i approach this but would like to get experts advice on this.

My Understanding:- Say i land to welcome page with a link for customer creation. I will make the ajax call from WelcomeController(angularJS Controller) to my servlet/spring controller which will return html response containing js file. HTML response will be conatining below

1)HTML will be containing ng-view and ng-template which will be used by routeProvide

2)One of the js files will be containing routeProvider Info to map the ng-template with view

Please correct me if this is right approach ?

Michael Kang · Accepted Answer · 2015-04-05 05:50:15Z

1

Use AngularJS for data-binding and form-validation. When you want to submit a form, you can rely on jQuery:

<div ng-controller="ctrl">
     <form id="myform" name="myform">
        Name: <input type="text" ng-model="person.name" name="person.name" /> <br />
        <button ng-click="submit(person)">Submit</button>
     </form>
</div>

Script

app.controller('ctrl', function($scope) {
     $scope.submit = function(person) {
         if ($scope.myform.$valid) {
             $('#myform').submit();
         }
     }
});

For this to work, make sure you give your input fields properly scoped names so that it binds to your MVC models.

This approach does have its limitations. For example, input fields that use ngModel should not have any $formatters/$parsers which limits you to simple formats.

edited Apr 5, 2015 at 5:50

answered Apr 5, 2015 at 5:36

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

7 Comments

M Sach Over a year ago

Thanks pixelbits. I was wondering if angularJS also provides this(otherwise jquery is always there as you said).

Michael Kang Over a year ago

No, AngularJS does not support traditional non-ajax requests.

M Sach Over a year ago

Thanks pixelbits. Regarding approach, is there any good alternative or what can be other approach?

Michael Kang Over a year ago

If you plan on embracing ajax, then using Angular's $http service is the way to go.

M Sach Over a year ago

Yes i agree on ajax. But my main confusion how to include the html response (of different jsp page) in single page ? for example :- right now i submit the form in traditional way and navigated to page required. But i am trying to get the right way how ajax response(instead response from traditional submission) of various user events will be included ?

|

M Sach · Accepted Answer · 2015-04-05 15:22:34Z

0

I was exactly looking for Single Page App with AngularJS which describes how you can have full fledged SPA web app using AngularJS(with features like router,controller,service etc) in a clear and succinct way

answered Apr 5, 2015 at 15:22

M Sach

34.6k78 gold badges232 silver badges317 bronze badges

Collectives™ on Stack Overflow

Migrating app to AngularJS?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related