Nested Views in Angular UI Router

Question

Nested Views in Angular UI Router

I have a specific structure set up like this:

<div ui-view="main">
  <!-- content is dynamically loaded here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- sidebar content is also populated by AngularJS ui-router -->
  </aside>
</div>

My goal is to define the templates in the main state directly, rather than managing them within the child state.

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

I'm looking for a way to have the ui-view named sidebar independent of being a child state of main, and have its content populated by the main state's views object rather than through a child state's templateUrl field. Is there a solution for achieving this?

javascript angularjs angular-ui angular-ui-router

Answer 1

Answer №1

Utilizing multiple views within the context of a singular state is achievable:

Multiple Named Views

To implement this, specify views using absolute naming in the following manner:

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

Further explanation can be found here:

View Names - Relative vs. Absolute Names

Each view receives an absolute name which follows the format of viewname@statename, where viewname is the directive name used for the view, and statename is the absolute name of the state, such as contact.item. Alternatively, you have the option to utilize the absolute syntax for your view names.

For instance, if the content of the

 /modules/blog/partials/index.html

looks like:

<div>
  <!-- AngularJS ui-router dynamically populates content here -->
  <aside ui-view="sidebar">
    <!-- AngularJS ui-router dynamically populates content here -->
  </aside>
</div>

and index.html contains a placeholder:

<div ui-view="main" ></div>

Then the

'main' - will be sought in the parent root (index.html)
'sidebar@state1' will be interpreted as the viewName/target in 'state1' (the current state)

An illustrative example showcasing a similar concept along with some layout.html behind...

Answer 2

Utilizing multiple views within the context of a singular state is achievable:

Multiple Named Views

To implement this, specify views using absolute naming in the following manner:

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

Further explanation can be found here:

View Names - Relative vs. Absolute Names

Each view receives an absolute name which follows the format of viewname@statename, where viewname is the directive name used for the view, and statename is the absolute name of the state, such as contact.item. Alternatively, you have the option to utilize the absolute syntax for your view names.

For instance, if the content of the

 /modules/blog/partials/index.html

looks like:

<div>
  <!-- AngularJS ui-router dynamically populates content here -->
  <aside ui-view="sidebar">
    <!-- AngularJS ui-router dynamically populates content here -->
  </aside>
</div>

and index.html contains a placeholder:

<div ui-view="main" ></div>

Then the

'main' - will be sought in the parent root (index.html)
'sidebar@state1' will be interpreted as the viewName/target in 'state1' (the current state)

An illustrative example showcasing a similar concept along with some layout.html behind...

Nested Views in Angular UI Router

Answer №1

Similar questions

Retrieve an array of information from a firestore database query

The Google Charts chartRangeFilter displays incorrectly upon reducing the height to a specific, seemingly random level

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

"Interactive" - Utilizing javascript and html5 to create engaging game animations

Tips for nesting multiple Promise.all: Ways to organize and manage multiple

Updating a slider based on the values of two other sliders can be achieved by implementing a

The issue persists as the Ajax request continues to return false

Issue with sticky navbar in parallax design

Encountering a Bad Request Response When Trying to Access WCF Service via Jquery Ajax

the function DELETE is undefined

Is there a way to trigger a function in an AngularJS controller from a Backbone controller?

How can a reusable ng-pattern be written in AngularJS?

Modify the css of the initial div following a live click

Is the process.env variable used universally for environmental variables, or is it specifically designed for use in Node.js

Is there a way to export a modified OBJ geometry from a Three.js scene?

As for the Pixel Art Creator feature, you can now switch between different modes and

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

Efficient methods to reach the desired result using Selenium WebDriver promises

Using and accessing Ajax response across all routes in an application