CODEWITHSUNDEEP
javascriptangularjsperformanceangular-ui-router
yBrodsky
yBrodsky

Reputation: 5041

Angularjs ui-router, when the nesting becomes too much

Simple question: I am refactoring a big application at work, and I found a lot of common ground among different parts of the app, which seems a good fit to nest routes. However, I find myself nesting more and more. Currently for example I have a state like this:

app.budgetAddComponent.transport.online.seleccionar

Some of this states are simply some HTML, like app which is the navbar, or transport which is a set of tabs.

Anyhow, I find myself deep beneat in the seleccionar state, using stuff from the budgetAddComponent state and I come to wonder if I am taking it too far.

So, any experiences with deep nesting like this? Is it too much or is it just normal?

Upvotes: 0

Views: 49

Answers (1)

Shantanu
Shantanu

Reputation: 3513

It's totally fine having deep states, it should not hamper performance it'll just look little complex.

But instead to decrease the depth you can have multiple named views instead of all nested routes. So when your some route is only a template like navbar or tabs what you can have like :

<div ui-view="navbar"></div>
<div ui-view="tabledata"></div>

And in child state definition have like:

$stateProvider      
  .state('budgetAddComponent', {        
    views: {        
      'navbar': { ... templates and/or controllers ... },   
      'tabledata': { ... templates and/or controllers ... } 

    }       
  })

Now you don't need that separate parent state just for navbar template. Similarly in budgetAddComponent's main template (e.g. inside tabledata) have two ui-view with names as tabs and maintemplate. Then you can directly have online state containing two views one as 'tabs' which has only template & other view 'maintemplate' having both html partial as well as controller. In this way there's no need of separate state transport. In this way you can decrease no. nested states when there's no such need.

Check documentation for details: https://ui-router.github.io/guide/views#multiple-named-uiviews

Upvotes: 1

Related Questions