CODEWITHSUNDEEP
angularjsangular-ui-router
awade1075
awade1075

Reputation: 57

Update URL when navigating to state without a URL associated with it in UI-Router

I have an application that utilizes UI-Router to handle all state transitions. Most of the states have no 'url' attribute associated with them so that they can only be accessed via in-application controls, but a few of them need to be able to be accessed from outside the application and have a 'url' attribute.

Here's some sample code similar to my setup:

$stateProvider
    .state('home',{
        url: '/',
        templateUrl : 'app/home.html',
        controller : homeCtrl,
        controllerAs : 'vm',
    })
    .state('example1',{
        templateUrl : 'app/example1.html',
        controller : example1Ctrl,
        controllerAs: 'vm',

    })        
    .state('example2',{
        templateUrl : 'app/example2.html',
        controller : example2Ctrl,
        controllerAs: 'vm',
    })
    .state('example3', {
        url : '/example3',
        templateUrl : 'app/example3.html',
        controller : example3Ctrl,
        controllerAs : 'vm',
    })....

Going off the code snippet, I need /example3 to be accessible from outside the application, but when the user navigates to any other state, the URL in the browser remains "sample.com/#/example3".

How can I reset the URL to "sample.com/#/" when moving to a state without a 'url' attribute?

Upvotes: 0

Views: 52

Answers (1)

TheBreakthrough
TheBreakthrough

Reputation: 320

You'd have to make those a child of the home route if you want them to revert to "/"

The '@ view' in this example changes the topmost <ui-view></ui-view>

$stateProvider
.state('home',{
    url: '/',
    templateUrl : 'app/home.html',
    controller : homeCtrl,
    controllerAs : 'vm',
})
.state('home.example1',{
    views: {
      '@': {
        templateUrl: 'app/example1.html',
        controller: 'example1Ctrl as vm',
      },
    },
})        
.state('home.example2',{
    views: {
      '@': {
        templateUrl: 'app/example2.html',
        controller: 'example2Ctrl as vm',
      },
    },
})
.state('example3', {
    url : '/example3',
    templateUrl : 'app/example3.html',
    controller : example3Ctrl,
    controllerAs : 'vm',
})

Upvotes: 1

Related Questions