Load Data Based on Angular Route Params

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

You can load resource based on the url using the a combination of ActivatedRoute and Angular’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

Julia Passynkova
~ 8 years ago

The observable contact$ is used in two times with async pipe (two subscription) and therefore two remote calls are executed.

John Lindquistinstructor
~ 8 years ago

Yeah, I should expound on that with a follow-up.

Christopher Kwiatkowski
~ 8 years ago

I would like to know what are the best practices with regard to resolving data when using the Angular2 Router.

I typically work in systems where security is paramount to performance and I would typically block the route change if the authenticated user was not authorized to access a specific record e.g. a Contact.

So, I would lean toward creating a DetailResolveService that implements Resolve<IUser> (imported from @angular/router) and then configure that DetailResolveService in the mymodule.routes.ts file to be resolved prior to the route change to display the Detail of a single record e.g. a single Contact record.

Your tutorial shows illustrates the use of pulling the Contact's ID off of the route params in the constructor and then beginning the resolve process for the Contact data based on that ID.

I have also seen plenty of examples of developers resolving data within the ngOnInit() method by implementing the ngOnInit "interface?" / lifecycle hook.

What is your best practice recommendation for those of us looking for the best way to resolve data in a DRY manner.

Should we encapsulate the resolving of an Observable HTTP call in the constructor prior to ngOnInit()? Should we encapsulate the resolving of an Observable HTTP call in an ngOnInit()? Should we encapsulate the resolving of an Observable HTTP call in a ResolveService that is configured to be called by the angular router prior to a route change and then assign the resolved data off of the this.activatedRoute.data?

Michal
~ 8 years ago

Why "loading..." phrase is that long time when app is so small ? Is not a problem when you are working with much more bigger application ?

John Lorrey
~ 8 years ago

First what is the plugin you are using in Webstorm to dynamically add the libraries based on use in the code? Thats rad. Second stop using that plugin in tutorial videos. Its so freaking hard to follow along with you as you code literally autogenerates as you talk and in you never see any keystrokes to notify you where that is. I am pretty fast coder who is a native English speaker i can not even imagine someone else trying to follow it. i had to download the videos just so i could rewind enough to see where you getting the code inserted. Its WAY WAY to fast. I have never said that to anyone before I watch most people's video at 2x speed but you man take the cake for talking fast while not even coding what your stating. The thing that did for me in this video is that your like ill include http in the constructor but you can't even see it in the video the visible constructor param. its just 'htt'. I was like ok this is enough. Third and this is a must. Stop using bin to host your code. When i download it i can't run it on my box making your stuff almost un-usable. I signed up for your service to help me be faster at getting the concepts. I have had to spend almost 4 hours trying to decode your code to try understand what you are doing. We all get your good but please head my advice.