Routing with http calls in Angular 2

Question

I am looking for the best way to route between my components in Angular 2. In my application I go from page to page by submitting a form:

Page A displays a form and a submit button to go to next step,
Data filed by the user in page A form are used to call a backend action using ajax,
Page B shows the result of the ajax call and a new form to go to next step (page C)...

At each step the backend can return an error and we either go back to previous page, or display an error page (fatal error).

I see two simple options to do the ajax call:

Component A only displays the form and forward the input parameters to component B. Component B run the ajax call and display the result.
OR component A run the ajax call with the input parameters he has and forward the result to component B for display. In case of error component A redisplay itself.

The problem with option 1 is that in case of error the backend will respond with the page A business model and an error message. Component B will have to forward the result to component A so page A can be redisplayed.

The problem with option 2 is that component A has part of the business logic of component B which is not really good for component encapsulation.

My question is: is there a good design pattern to do this? Should I use an intermediate component for example?

Thank you for your help.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I would move all ajax calls to parent component and keep all the data there too, assuming forms are independent. So workflow would be like this:

cP(arent) go to cA
cA - show form, send data to cP
cP - send A data via ajax, go to cB
cB - show form, send data to cP
cP - (got error for A data), send B data via ajax, go to cC
cC - show form, notify user there was an error with form A, offer user to go back now, or finish step C and do A later, send data to cP
cP - (got fatal error for B data), don't send C data via ajax, save data to localStorage?, tell user to try later...

...etc. It's more user friendly and you can show pages/forms as needed.

If forms depend on each other, I'd still keep the ajax and data in parent, and display them if/when server responds. But I recommend you design them do be independent, or you can play some elevator music while user waits (;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 26, 2016 at 10:41

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

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

2 Comments

j3r6me Over a year ago

Thank you this is what we had imagine also. It is troubling me that each component is not responsible for calling his own service but I guess there is no other choice. I guess we can see the parent element as an orchestrator that would also be the interface with the backend. The page components just take car of the view.

j3r6me Over a year ago

For the elevator music I guess we will settle for a waiting page with a modal style ;)

Collectives™ on Stack Overflow

Routing with http calls in Angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related