implementing a three-tiered nested URL structure in Angular

My app.js code snippet:

 .state('dashboard', {
            url: '/dashboard',
           templateUrl : 'resources/components/dashboard/dashboard.html',
            controller : 'dashboardController',   


        }).state('dashboard.profile', {
            url: '/profile',
           templateUrl : 'resources/components/clinicprofile/profile.html',
            controller : 'profileController',


        }).state('dashboard.setting', {
            url: '/setting',
           templateUrl : 'resources/components/setting/settings.html',
            controller : 'profileController',

        }).state('dashboard.setting.user', {
            url: '/user',
           templateUrl : 'resources/components/setting/user.html',
            controller : 'profileController',

Note: The three level nested URL is functioning correctly, however, I encountered an issue where the setting page content is also displayed when navigating to dashboard/setting/user.

I only want to display the content of the user page on this specific URL. How can I achieve this?

javascriptangularjs

Answer №1

To prevent the user page from being included in the settings page, it cannot be a direct child of the settings. One potential solution is to introduce an abstract state and modify the settings URL to something like setting/main:

.state('dashboard', {
        url: '/dashboard',
        templateUrl: 'resources/components/dashboard/dashboard.html',
        controller: 'dashboardController',   

    }).state('dashboard.setting', {
        abstract: true,
        url: '/setting',
        template: '<ui-view></ui-view>',

    }).state('dashboard.setting.main', {
        url: '/main',
        templateUrl: 'resources/components/setting/settings.html',
        controller: 'profileController',

    }).state('dashboard.setting.user', {
        url: '/user',
        templateUrl : 'resources/components/setting/user.html',
        controller : 'profileController',
    })

Explore UI Router documentation for more information

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

JavaScript modularizing for early termination

When considering a method to exit a function early based on a certain condition, the following code example can be helpful: function abc() { if (some_condition) { message('blah'); return; // exit the function early } // carry out o ...

javascriptjquery

Extracting Client's True IP Address using PHP API

Utilizing the following api: I am able to retrieve country, city, and real IP address in localhost (127.0.0.1) successfully. However, when I implement this code on my website, it displays the server's address instead of the client's. How can I r ...

javascriptphpjson

Execute a Node script using PHP exec, retrieve the data in PHP, and then apply the finally method

I'm working on a PHP script that utilizes the exec function to run a Node script and then return some data back to the PHP script. The challenge I'm facing is finding a way to send the data back to PHP without having to wait for the cleanup code ...

javascriptphpnode.jses6-promise

Tips for making a rounded bottom image slider with react-native?

Is there a way to design an image slider similar to this with rounded bottom images? ...

javascriptreact-native

Display a modal upon successful validation of a form

As a newcomer to JavaScript and Bootstrap, I have a specific requirement: 1. When a user clicks the submit button, 2. The form needs to be validated using the entry_check() function. 3. Upon successful validation of the form, a Bootstrap modal should be op ...

javascriptjqueryhtmlformstwitter-bootstrap

Determine whether the current time exceeds a certain time of day

While this may have been asked before, I am struggling to find an answer. How can I determine if the current time is after 17:30 each day? In my scenario, I need to check if it is past 17:30 on Monday to Friday, and if it is Saturday, I need to check if i ...

javascriptmomentjs

Using Ionic and Angularjs to make an HTTP post request with Mysql

I recently discovered the Ionic framework and started learning it, but I've encountered some obstacles that I can't seem to overcome. Even after searching on Google, I couldn't find a solution. The specific issue I'm facing is with cre ...

angularjsionic-framework

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

Having trouble interpreting the content in the post response [express.js]

While using the Restlet client tool in Chrome to make a post request, I encountered an issue where the response body was present with the correct data in the console.log(res), but I consistently received an error message stating that the body is undefined ...

javascriptnode.jsapiexpress

Changing Underscores in ES6 Techniques

My current project is built using AngularJS, Redux, and Underscore. Within this project, I have the following code snippet: const selectedBroker = _.findWhere(state.brokers, { brokerId: action.payload }); return state.merge({ selectedBroker, sel ...

javascriptangularjsecmascript-6reduxunderscore.js

Troubleshooting the issue of not successfully retrieving and sending values from form checkboxes in jQuery to $_POST variable

I am facing an issue with checkboxes that have identical names and use square brackets to create an array. <label> <input type="checkbox" value="Tlocrt objekta" name="dokument[]" > Tlocrt objekta </input> </label> ...

javascriptphpjquerycheckbox

Encrypting passwords on the client side using md5.js and decrypting them in PHP

In order to enhance security, I have implemented client-side password encryption using the md5.js script on a form that contains user and password fields. The encrypted password is then sent to the server for validation. test.php <script LANGUAGE= ...

javascriptphphash

Exploring the intricacies of initializing a JavaScript function

I recently inherited a large JavaScript file from a previous developer, and I'm trying to decipher some of the key sections. Here is the complete code: $(function () { var homepage = (function () { // Main functionalities are defined he ...

javascript

What is the best way to display HTML using Highlight.js in a Vue component?

I'm working on incorporating highlight JS into my Vue project, and I am looking to display a div on the edges of my code. I've experimented with the following: <pre v-highlightjs="viewerHTML"><div>Something here</div><code c ...

javascriptvue.jshighlightjs

Determine the height of an element using Vue.js

Is there a way to accurately determine the height of one div in order to match it with another? Using clientHeight doesn't seem to provide the correct value, possibly due to elements not being fully loaded. I have tried using window.load() to delay un ...

javascripthtmlnode.jsvue.jsvuejs2

How can I showcase Vuetify cards in a horizontal row instead of a vertical column?

Currently, I am utilizing Vuetify 1.5 along with the Vuetify grid system to establish my layout structure. Within this setup, I have a component called HelloWorld that I am importing into my Parent Component. The challenge I am facing is that despite setti ...

javascripthtmlcssvue.jsvuetify.js

Tanstack onMutate Callback Fails to Activate Modal on React State Update

Currently, I am in the process of developing a Dapp and I need to incorporate transaction tracking. One issue I am facing is with trying to display a modal window when the approval setting process begins. Despite attempting to alter the isOpen state of the ...

javascriptreactjstanstackreact-query

CSS - Activating hover effects through keyframes

I'm looking to create an image effect that pulsates like a heartbeat. The idea is for the image to pulse for 3 seconds, then automatically flip for 1 second before resuming the pulsating effect indefinitely. I've managed to make the image pulse, ...

javascripthtmlcss

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

javascriptcssmaterialize

Using BeautifulSoup to extract data from a webpage containing JavaScript

Hello everyone! I am reaching out for help once more. While I am comfortable scraping simple websites with tags, I recently came across a more complex website that includes JavaScript. Specifically, I am looking to extract all the estimates located at the ...

javascriptpythoncsvweb-scrapingbeautifulsoup