When the nesting in AngularJS ui-router becomes overwhelming

Question

When the nesting in AngularJS ui-router becomes overwhelming

I've been in the process of refactoring a large application at work, and I've noticed significant similarities between different parts of the app that make me think nesting routes could be beneficial. However, as I continue to nest more and more, I find myself with states like:

app.budgetAddComponent.transport.online.seleccionar

Some of these states are simply HTML elements, like app, which represents the navbar, or transport, which is a collection of tabs.

Now, I find myself deep within the seleccionar state, utilizing components from the budgetAddComponent state, and I'm starting to question if I may be going too far.

Have any of you had experiences with deep nesting like this? Do you think it's excessive, or is it just par for the course?

javascript angularjs performance angular-ui-router

Answer 1

Answer №1

It's perfectly acceptable to have deep states, as long as it doesn't affect performance and may just appear a bit more complex.

One way to reduce the depth is by using multiple named views instead of nesting all routes. For example, if you have a route that only serves as a template like navbar or tabs, you can do this:

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

In the child state definition, you can specify:

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

You no longer need a separate parent state just for the navbar template. Similarly, in the main template of budgetAddComponent (e.g., inside tabledata), include two ui-views with names such as tabs and maintemplate. Then you can directly have an online state containing two views - one for 'tabs' which only has a template, and the other for 'maintemplate' which includes both an HTML partial and a controller. This eliminates the need for a separate state like transport, reducing the number of nested states when unnecessary.

For more information, refer to the documentation at:

Answer 2

It's perfectly acceptable to have deep states, as long as it doesn't affect performance and may just appear a bit more complex.

One way to reduce the depth is by using multiple named views instead of nesting all routes. For example, if you have a route that only serves as a template like navbar or tabs, you can do this:

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

In the child state definition, you can specify:

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

You no longer need a separate parent state just for the navbar template. Similarly, in the main template of budgetAddComponent (e.g., inside tabledata), include two ui-views with names such as tabs and maintemplate. Then you can directly have an online state containing two views - one for 'tabs' which only has a template, and the other for 'maintemplate' which includes both an HTML partial and a controller. This eliminates the need for a separate state like transport, reducing the number of nested states when unnecessary.

For more information, refer to the documentation at:

When the nesting in AngularJS ui-router becomes overwhelming

Answer №1

Similar questions

Utilize the event bus by calling `this.$root.$emit` command

The custom attribute in jQuery does not seem to be functioning properly when used with the

Activate the CSS on a click event using the onClick method

I have developed a function that adds up price values, but for some reason it is always lagging one step behind

The instance is referencing "greet" during render, but it is not defined as a property or method

Tips for uploading images in Next.js using Firebase

Synchronous execution following a Node.js for loop integrated with callbacks

React Native Material - Implementing a loading indicator upon button press

Can user-generated code execute Javascript Promises in its entirety?

What is the encoding for Javascript in UTF-8?

Error Encountered in Vue.js when Trying to Access a Nested

Jquery Timer that can be toggled on and off with a single button

What is the best way to attach a jQuery UI event handler to a button that has been dynamically generated?

Update text displayed on radio button selection using jQuery

Tips for streamlining code using switch statements in vue.js

I'm curious about how I can selectively utilize vuex-persistedstate with Nuxt for certain stores only

What is the best way to retrieve widget options when inside an event?

Switching the scope or zone in Angular when handling events external to Angular

How to Use AngularJS $http Mock Respond to Simulate a Response with a `location` Header?

Where should the webapp files for a Node.js application be located within the server directory?