CODEWITHSUNDEEP
angularangular-ui-router
dashambles
dashambles

Reputation: 591

Angular nested routes vs pages

I have a typical resource oriented REST API for buildings:

/buildings/

/buildings/:buildingId

/buildings/:buildingId/floors

/buildings/:buildingId/floors/:floorId

And I am writing an angular 8 application oriented to this which should use ths same routing.

Firstly I tried nested routes:


  {
    path: 'buildings',
    component: BuildingsComponent,
    children: [
      {
        path: ':id',
        component: BuildingComponent,
        children: [
          {
            path: 'floors',
            component: FloorsComponent,
            children: [
              {
                path: ':id',
                component: FloorComponent
              }
            ]
          }
        ]
      }
    ]
  }

But this seems to only support hierarchies of components. This for me means thatI have to keep the output of each parent component on screen, which on the lowest level would look something like:

[building list table]
[selected building data]
[floor list table]
[selected floor data]

But I want to have independent pages:

[building list table]

select building ->

[selected building data]
[floor list table]

select floor ->

[selected floor data]

For this I used a flattened router config:

  {
    path: 'buildings',
    component: BuildingsComponent,
  },
  {
    path: 'buildings/:buildingId',
    component: BuildingComponent,
  },
  {
    path: 'buildings/:buildingId/floors/:floorId',
    component: FloorComponent,
  }

But what I am missing here is that each component in the hierarchy was fetching it's data from the REST API.

Is there a mechanism for such a scenario that I can use instead of having to have all rest calls at each level (i.e. for the level you are at and all parent levels)?

Upvotes: 1

Views: 509

Answers (1)

Moshe
Moshe

Reputation: 2684

What you're looking for is a resolver. A resolver makes API calls on a route level. The data from the REST API will be available through your router.

If you're looking to reduce the amount of API calls your application makes, consider caching using interceptors, using graphQL for queries, or NgRx to better manage your state.

Upvotes: 1

Related Questions