Angular Ui-router Set Website Entry Point. Redirect To Home Url

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 c

Solution 1:

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.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-create-rules-to-prevent-access-to-a-state

Solution 2:

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>