I'm using Angular with UI-router and I want the user to always (or under most conditions, but for brevity we can say "always") enter the web app on step1, my home page.

UI-router config shorthand:

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

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

    var step1 = {
        name : 'step1',
        url : '/step1',
        templateUrl: 'partials/step1.html'
    };
    var step2 = {
        name : 'step2',
        url : '/step2',
        templateUrl: 'partials/step2.html'
    };
    .
    .
    .
    .
}

I can do a resolve or specify a controller and simply set $location.path('/step1'), but is there a way to just set one entry point and have the step2 / step3 urls be only reachable after starting from step1, without the cost of a redirect?
Thanks in advance

I'm using Angular with UI-router and I want the user to always (or under most conditions, but for brevity we can say "always") enter the web app on step1, my home page.

UI-router config shorthand:

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

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

    var step1 = {
        name : 'step1',
        url : '/step1',
        templateUrl: 'partials/step1.html'
    };
    var step2 = {
        name : 'step2',
        url : '/step2',
        templateUrl: 'partials/step2.html'
    };
    .
    .
    .
    .
}

I can do a resolve or specify a controller and simply set $location.path('/step1'), but is there a way to just set one entry point and have the step2 / step3 urls be only reachable after starting from step1, without the cost of a redirect?
Thanks in advance

• javascript
• angularjs
• angular-ui-router
• angular-services

2 Answers 2

To solve this problem you can also use $stateChangeStart event.

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
  if (fromState.name === '' && toState.name !== 'state1'){
    event.preventDefault();
    $state.go('state1');
  }
});

Source: https://github./angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-create-rules-to-prevent-access-to-a-state

I think this is what you're after -

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

    $stateProvider

        .state('step1', {
          url: "/step1",
          templateUrl: "partials/step1.html",
          controller: "step1Ctrl"
        })

        .state('step2', {
          parent: 'step1',
          url: "/step2",
          templateUrl: "partials/step2.html",
          controller: "step2Ctrl"
        })

        .state('step3', {
          parent: 'step2',
          url: "/step3",
          templateUrl: "partials/step3.html",
          controller: "step3Ctrl"
        });

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

})

Here is a button that would navigate to step 2 after clicking it -

<button ui-sref="step2">Step 2</button>