Three level nested url in angular

Question

Here is my app.js

 .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',

Please note that my three-level sub-URL works fine when I look at ng-view on the settings.html page but I don’t want to show the contents of settings.html when the user is on

dashboard/setting/user

it shows the customization of the page content as well as the content of the user page

I do not want to show the contents of the .html parameter when the user is on the user page

I want to show only user content on this url dashboard/setting/user, how can I do this?

Answer 1

, , , URL- - /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',
    })

UI