ui-sref is generating wrong url

Question

I'm working with Angularjs with Nodejs on a project. I'm using UI-router in my project for routing. Here are configurations of the states in my app module file:

app.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider.state('booking', {
    url: '/user/booking',
    templateUrl: '/user/booking.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('bookingDetails', {
    url: '/user/bookingDetails',
    templateUrl: '/user/bookingDetails.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('notificationes', {
    url: '/user/notification',
    templateUrl: '/user/notification.html',
}).state('review', {
    url: '/user/review',
    templateUrl: '/user/review.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('promo', {
    url: '/user/promoCode',
    templateUrl: '/user/promoCode.html'
}).state('setting', {
    url: '/user/setting',
    templateUrl: '/user/setting.html'
}).state('setting.personalInfo', {
    url: '/personalInfo',
    templateUrl: '/user/personalInfo.html',
   resolve: {
       delay: function ($q, $timeout) {
           var delay = $q.defer();
           $timeout(delay.resolve, 300);
           return delay.promise;
       }
   }
}).state('setting.changePassword', {
    url: '/changePassword',
    templateUrl: '/user/changePassword.html',
   resolve: {
       delay: function ($q, $timeout) {
           var delay = $q.defer();
           $timeout(delay.resolve, 300);
           return delay.promise;
       }
   }
}).state('setting.notificationPre', {
    url: '/notificationPreferences',
    templateUrl: '/user/notificationPreferences.html'
}).state('setting.changeAvatar', {
    url: '/changeAvatar',
    templateUrl: '/user/changeAvatar.html'
});

});

When I hitting the URL "localhost:3000/user/booking" then at the sidebar of the main page when I hover the sidebar tabs then it is showing the URLs like "/user/user/booking", "/user/user/review".

you can see in the below screenshot.

Using ui-sref in the sidebar.html file

<li class="nav-item  " ui-sref-active="active">
            <a ui-sref="review" class="nav-link nav-toggle">
                <i class="icon-star"></i>
                <span class="title">Review</span>
            </a>

        </li>

I'm stuck into this, don't understand why it is repeating "/user". I tried a lot but couldn't found any solution to this issue. Please help me to resolve this.

Answer 1

You don't need to prepend /user at the start of the url of every state you're defining.

Instead create an abstract state (for your example, name it main or whatever suites you) and give it the /user url and have all other user states extend it

e.g.

$stateProvider
.state('main', {
    'abstract': true,
    url: '/user'
.state('main.booking', {
    url: '/booking',
    templateUrl: '/user/booking.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
})
.state('main.bookingDetails', {
    url: '/bookingDetails',
    templateUrl: '/user/bookingDetails.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }

This way every state you redirect to will just take the local url value and append it to the /user defined in the abstract state.