Nested ui-view is not appearing as expected

Question

Nested ui-view is not appearing as expected

I have a query about Angular UI-Router and its ui-views functionality. I am facing an issue where only the ui-view with the name "languages" is displaying, despite declaring three ui-views inside another one. Any assistance in resolving this would be highly appreciated.

index.html:

<div ui-view="languages">
  <div ui-view="dashboard"></div>
  <div ui-view="partners"></div>
  <div ui-view="footer"></div>
</div>

routes.js:

angular.module('TMHM')
.config(routeConfig);

routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function routeConfig ($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/',
      views: {
        'languages': {
          templateUrl: 'views/languages/languages.html'
        },
        'dashboard': {
          templateUrl: 'views/dashboard/dashboard.html'
        },
        'partners': {
          templateUrl: 'views/partners/partners.html'
        },
        'footer': {
          templateUrl: 'views/footer/footer.html'
        }
      }
    });

  $urlRouterProvider.otherwise('/');
};

Unfortunately, the Plunker code provided does not seem to work: https://plnkr.co/edit/z8cFGHKVQNN623QbBUqi

javascript angularjs angular-ui-router angular-ui state

Answer 1

Answer №1

For an updated and functional plunker, click here

I have created a new file named routes.html, which includes the following content:

<h1>Routes</h1>

<hr />
<div ui-view="languages"></div>
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>

In addition, I made changes to the index.html as follows:

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

The state adjustment now looks like this:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'routes.html'
    },
    'languages@home': {
      templateUrl: 'languages.html'
    },
    'dashboard@home': {
      templateUrl: 'dashboard.html'
    },
    'partners@home': {
      templateUrl: 'partners.html'
    },
    'footer@home': {
      templateUrl: 'footer.html'
    }
  }
});

It was also necessary to move the ng-app from the <head> to the <html> element

<html ng-app="TMHM">

  <head >

You can view the updated version here

For more information and examples on named and multi views, refer to the following links:

Nested states or views for layout with leftbar in ui-router?
Angular UI Router - Nested States with multiple layouts

Answer 2

For an updated and functional plunker, click here

I have created a new file named routes.html, which includes the following content:

<h1>Routes</h1>

<hr />
<div ui-view="languages"></div>
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>

In addition, I made changes to the index.html as follows:

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

The state adjustment now looks like this:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'routes.html'
    },
    'languages@home': {
      templateUrl: 'languages.html'
    },
    'dashboard@home': {
      templateUrl: 'dashboard.html'
    },
    'partners@home': {
      templateUrl: 'partners.html'
    },
    'footer@home': {
      templateUrl: 'footer.html'
    }
  }
});

It was also necessary to move the ng-app from the <head> to the <html> element

<html ng-app="TMHM">

  <head >

You can view the updated version here

For more information and examples on named and multi views, refer to the following links:

Nested states or views for layout with leftbar in ui-router?
Angular UI Router - Nested States with multiple layouts

Answer 3

Answer №2

This method of including views within views is new to me. I have always thought of views as the top level elements and includes as the nested content. It's possible that this approach may not work, or maybe I just haven't encountered it before.

However, I have implemented something similar using ng-include in a production app:

<div ng-include="mycontroller.pathToFileIWantToShow"></div>
// Alternatively...
<div ng-include="path/to/some/file.html"></div>

With ng-include, I am able to dynamically change content, utilize data binding, and each included template can have its own controller or inherit from the wrapping controller. This nesting structure seems to be flexible regardless of how deeply nested the views are.

Answer 4

This method of including views within views is new to me. I have always thought of views as the top level elements and includes as the nested content. It's possible that this approach may not work, or maybe I just haven't encountered it before.

However, I have implemented something similar using ng-include in a production app:

<div ng-include="mycontroller.pathToFileIWantToShow"></div>
// Alternatively...
<div ng-include="path/to/some/file.html"></div>

With ng-include, I am able to dynamically change content, utilize data binding, and each included template can have its own controller or inherit from the wrapping controller. This nesting structure seems to be flexible regardless of how deeply nested the views are.

Nested ui-view is not appearing as expected

Answer №1

Answer №2

Similar questions

MERN stack does not have a defined onClick function

Run several asynchronous HTTP requests in the background within a Chrome extension

Wait for the canvas to fully load before locating the base64 data in HTML5

What methods can I use to adjust link distance while using the 3d-force-graph tool?

After an ajax call in ASP .NET MVC3 using Razor, jQuery may not function properly

Why isn't my ng-click function functioning properly on Google Maps in AngularJS?

React-dnd enhances the functionality of the MUI tree view

Utilizing Three.js to showcase large 3D images from a JSON file

Load a partial view in MVC using Ajax with a complex data structure

Separate .env configurations tailored for development and production environments

Tips for utilizing jquery.load for fetching a section of an html document or an entire html file

Having trouble getting the form to submit with jQuery's submitHandler

The issue arises when an AngularJS directive fails to recognize the controller's scope due to binding variables using "this"

Encountering a problem in Angular 2 when trying to pass undefined variables between components while fetching data from

Exploring AngularJS: Leveraging the $resource.query method with a parameters object

PHP is receiving data from $.post in an invalid format

Display elements that are unique to one array and not found in another array using React

Unending cycle when integrating AngularJS with Laravel

What causes my local storage to be cleared whenever I refresh the page in React with Redux?

Selecting list items using the up and down keys in JavaScript/jQuery