The right way to prefetch data for your angular components/pages

March 28, 2018 0 Comments

The right way to prefetch data for your angular components/pages

 

 


“The right way to prefetch data for your angular components/pages” — @theo4me

  • What you might be familiar with is, showing a loader after rendering your component and also watching if to hide or show a page loader, or have a user/client asked this question – Why are we showing loader after the page has loaded, can’t it show my data once, check…
  • Let’s create our pages/components – ng g c home -it -is –spec false – ng g c records -is –spec falseWe are going to create our resolver to handle what the record page is going to respond to if there’s an error or not with our api – ng g…
  • Now, that we have created our resolver, which is going to return the data needed for our records.component.ts to be a meaningful page, open the component, let’s retrieve the data from our resolver and move on with our normal display or manipulation of the data – records.component.tsOur component template can…
  • 😊 – Final step, let’s apply our resolver to the records.component.ts route by adding this extra key to the route object in app.routes.ts – … – { path: ‘records/:with-error’, component: RecordsComponent, resolve: { pageData: RecordCompResolver } – …Using the resolve key , we can add multiple resolvers for a route, key-value…
  • all we only need is to hook into the angular’s navigation events an manipulate the page loader, check the below post to help out with how to include one easily – For the above gif demo check : For the DEMO GIF

Ever wondered why you load your component and now do API call? What you might be familiar with is, showing a loader after rendering your component and also watching if to hide or show a page loader…

The right way to prefetch data for your angular components/pagesEver wondered why you load your component and now do API call?

What you might be familiar with is, showing a loader after rendering your component and also watching if to hide or show a page loader, or have a user/client asked this question

Why are we showing loader after the page has loaded, can’t it show my data once, check this wordpress site, it’s loading the data in ActionNo Handling: The component is loaded, the data loading from API is called to get the data needed for our page or component useful. Why move to a page when the data needed for the page to be useful to users is not loaded?

Loader: You need to manage a loader variable to toggle the view when the data is loaded or not if the data is scattered around the page, you use data all over to toggle the visibility of each. What about having a SINGLE Navigation Event router loader and you don’t bother if to watch for a variable to toggle visibility?

It’s preferable to pre-fetch data from the server so it’s ready the moment the route is activated. This also allows you to handle errors before routing to the you are pleased with the above concerns, you can continue 😉

What we are going to do is create the above application used in describing resolvers

Create an angular…

The right way to prefetch data for your angular components/pages

Comments are closed, but trackbacks and pingbacks are open.


Tag cloud