The implementation of multiple nested named views in ui-router

I have a nested view structure that looks like this 

<div ui-view="master" id="ng-view">
  <div class="container-fluid height-full">
      <div ui-view="globalNavigationPanel" class="row"></div> 
     <div ui-view="detail" id="detailContent" class="row"></div>
  </div>
</div>

Here is my resolver function

function resolveShell()
{
   return {
            'views': {
                'master': {
                    templateUrl: 'core/views/shell.html',
                    controller: 'core/controllers/shellcontroller.js',
                    controllerAs: 'vm',
                },
                'globalNavigationPanel': {
                    templateUrl: 'core/views/globalNavigationPanel',
                    controller: 'core/controllers/globalNavigationPanelController.js',
                    controllerAs: 'gpvm',
                }
            },
            'resolve': {
                load: [
                    '$q', '$rootScope', ($q, $rootScope) => {
                        var dependencies = [
                            'core/controllers/shellcontroller.js',
                            'core/controllers/globalNavigationPanelController.js'
                        ];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }
                ]
            }
        };
  }

After setting the state, all the necessary files are downloaded and shellcontroller.js is being called. However, the globalNavigationPanelController is not.

In addition, the view for globalNavigationPanel does not seem to update.

Is it possible to set a state and resolve multiple named nested views?

javascriptangularjsangular-ui-routerangularjs-bootstrap

Answer №1

In order to effectively utilize multi views nested within one state, absolute naming must be utilized. This allows UI-Router to correctly place the second view within the current state's other view. Imagine a state named 'shell':

'views': {
    'master': {
        ...
    },
    'globalNavigationPanel@shell': {
        ....
    }
},

The template for the 'shell' state would have:

<div class="container-fluid height-full">
   <div ui-view="globalNavigationPanel" class="row"></div> 
   <div ui-view="detail" id="detailContent" class="row"></div>
</div>

The index.html should only contain:

<div ui-view="master" id="ng-view"></div>

as the master will serve as a placeholder for the 'globalNavigationPanel'. Make sure to refer to the documentation for more details.

View Names - Relative vs. Absolute Names

It is important to understand that every view is assigned an absolute name structured as viewname@statename. You can also opt for absolute syntax when defining views in your states.

For instance, consider the following example:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

In this case, the view names are specified in their absolute form instead of relative names. They target the 'filters', 'tabledata', and 'graph' views located in the root unnamed template which is your index.html.

EXTEND - View a working example here

This is how the state definition looks:

  .state('shell', {
    url: '/shell',
    views: {
      'master' : {
        templateUrl: 'core/views/shell.html',
            controller: 'shellcontroller',
            controllerAs: 'vm',
      },
      'globalNavigationPanel@shell': {
        templateUrl: 'core/views/globalNavigationPanel.html',
            controller: 'globalNavigationPanelController',
            controllerAs: 'gpvm',
      }
    }
  })

These are the corresponding views:

The 

templateUrl: 'core/views/shell.html',

<h2>shell</h2>

<p>{{text}}</p>

<hr />

<div class="container-fluid height-full">
   <div ui-view="globalNavigationPanel" class="row"></div> 
   <div ui-view="detail" id="detailContent" class="row"></div>
</div>

The 

templateUrl: 'core/views/globalNavigationPanel.html',

<h3>globalNavigationPanel</h3>

<p>{{text}}</p>

Lastly, the index file simply contains:

<div ui-view="master" id="ng-view"></div>

Experience it in action by visiting this link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

Can the "fixheadertable" plugin be used with AJAX data integration?

I've been using the plugin from for a project, but I need to dynamically add data when creating the tables. Here is the JavaScript code that constructs the table: <script type="text/javascript"> $.ajax({ url: 'dialogs/WMS ...

javascriptjqueryajaxfixheadertable

Creating asynchronous code in my software project

Can you demonstrate how to make this code asynchronous with an example? 1) Retrieve the file using the $http.get function from the server 2) Read the file into an array 3) Process the data (rebuild it) 4) Display a progress bar for each action Here is the ...

javascriptangularjsasynchronouspromise

Exploring the best way to use $set in Mongoose for dynamically updating an embedded

I'm currently attempting to create a unique function that can update the value of a specific embedded MongoDB document within an array. The goal is to change the value based on its position. function removeAddress(accountNum, pos) { const remove ...

javascriptnode.jsmongodbmongoose

Using React Native: Passing an index with the map function

I am working on a map function that dynamically creates components repetitively. Here is what the code looks like: renderBoxes() { return Array.map(data => this.myFunction(indexOfThisArray)); } I am currently facing an issue where I need to pass t ...

javascriptarraysreactjsreact-nativereact-router

Retrieving a specific value from a JSON object using the find method in JavaScript

Having difficulty extracting the value of jersey_num from the JSON data below. const json = [{ $: { Type: "first_name" }, _: "Evan" }, { $: { Type: "last_name" }, _: "Ferguson" ...

javascriptjson

Parsing dates in Firefox using Moment.js and AngularJS

I'm currently incorporating Moment.js into my project and parsing a normal date string like "21-jun-2020". However, I've noticed that the parse result differs between Chrome and Firefox. _d: Mon Jun 21 2021 00:00:00 GMT+0530 (India Standard Time ...

javascriptmomentjs

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

javascriptphphtml

What causes the temporary halt of context execution in the eventloop framework?

Presenting the code immediately: setTimeout(() => console.log("next macro")); /// next macro Promise.resolve().then(() => gen.next()) /// microtask inside, #2 const gen = (function*(){ console.log("Hello"); yield; /// #3 console.log("W ...

javascriptecmascript-6specifications

The incorporation of zoom disrupts the smooth scrolling capability of the menu

My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code: body { zoom:90%; } Unfortunately, when I click on a menu o ...

javascriptjqueryhtmlcss

Tips for creating an endless scrolling/loader feature in Nuxt?

Hey there! I am looking to display data after implementing infinite loading. The data is sent asynchronously using asyncData to the page with an ID. Page <script> export default { async asyncData({ $axios, store }) { const customerId = store.g ...

javascriptvue.jsnuxt.js

Choose the option from the jQuery dropdown list based on the displayed text instead of the value

In continuation of my previous question on jQuery getting values from multiple selects together, I am working with a select list like this: <select name="access" class="change" id="staff_off" runat="server"> <option value="8192">Off< ...

javascriptjqueryasp.net

Adjusting jQuery inputmask mask according to dropdown selection: A complete guide

I am utilizing jQuery inputmask to achieve a specific effect: Currently, I have set up a simple formatting for US & Canada phone numbers like this: $("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" }); However, I want to dynamically chan ...

javascriptjqueryhtml

Handling the ng-if condition based on a model that dynamically gets updated through an asynchronous

In my controller, I have implemented a method to update a model asynchronously using $http. To check whether the model is defined or not, I am using a flag. function myController(ModelService){ var vm = this; vm.myModel = ModelService.data; ...

angularjs

How can I manage file input within a Vue.js application?

After attempting to open a file input with a button, I encountered an issue. When clicking the button, the client reported: “this.$refs.image.click”. Below is my code snippet: <v-btn height="50" ...

javascripthtmlvue.js

What could be the reason for the unexpected "undefined" return value of this custom hook in

I've been working on creating a custom hook in React and here's the code I have so far: import {useEffect} from 'react'; const useFetch = (url) => { useEffect(() => { const fetchData = () => { const dat ...

javascriptreactjsreact-hooks

Is it possible to execute a script from a different directory?

Currently, I am developing a nodejs package that involves executing a bash script within the program. The specific bash script, "./helpers/script.sh", needs to be run using a relative path. This means that when users install and run the package, the script ...

javascriptnode.jstypescriptnpm

Trouble with Angular toggle switch in replicated form groups

Currently, I have a form group that contains multiple form controls, including a toggle switch. This switch is responsible for toggling a boolean value in the model between true and false. Depending on this value, an *ngIf statement determines whether cert ...

javascriptangulartypescript

Tips for modifying an input verification attribute

When I select the username1 option from the dropdown, the toggle for spec view in the right card should turn off. However, the code is not functioning as expected. html code: <div class="container"> <div class="row row-cols-2" ...

javascriptbootstrap-4setattribute

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

javascripthtmlcssreactjsweb