How to activate default nested state inside nested states?

Question

I have nested states inside neste state here is controller definition:

(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])

    .config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/game/MultiStepForm/step1");
        $urlRouterProvider.otherwise("/game/Home");
        $stateProvider
            .state("Home", {
                url: "/game/Home",
                templateUrl: "/app/game/GameView.html",
                controller: "GameController",
                controllerAs: "vm"
            });

        $stateProvider
            .state("Log", {
                url: "/Game/Log",
                templateUrl: "/app/Log/GameLogView.html",
                controller: "GameLogController",
                controllerAs: "vm"
            });

        $stateProvider
        .state("MultiStepForm.view", {
            url: "/Game/MultiStepFormView",
            templateUrl: "/app/MultiStepForm/MultiStepFormView.html",
            controller: "MultiStepFormViewController",
            controllerAs: "MultiStepViewLogic"
        })

        $stateProvider
    .state("MultiStepForm.Edit", {
        url: "/Game/MultiStepFormEdit",
        templateUrl: "/app/MultiStepFormEdit/MultiStepForm.html",
        controller: "MultiStepFormEditController",
        controllerAs: "MultiStepEditLogic"
    })
        .state('MultiStepForm.Edit.step1', {
            url: '/step1',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
        })
        .state('MultiStepForm.Edit.step2', {
            url: '/step2',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
        })
        .state('MultiStepForm.Edit.step3', {
            url: '/step3',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
        });
    }]);
})();

This rows define multi-step form:

        .state('MultiStepForm.Edit.step1', {
            url: '/step1',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
        })
        .state('MultiStepForm.Edit.step2', {
            url: '/step2',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
        })
        .state('MultiStepForm.Edit.step3', {
            url: '/step3',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
        });

Here is view of MultiStepForm.Edit state:

<!-- form.html -->
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        <div id="form-multiple-step">
            <div class="page-header text-center">

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP1</span></a>
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP2</span></a>
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP3</span></a>
                </div>
            </div>
            <form id="single-form">
                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>            
        </div>
    </div>
</div>

When MultiStepForm.Edit state activated no netsed view has been displayed they have been display only when the user press button in view form and UI-SREF activate appropriate state.

My question is how can I make MultiStepForm.Edit.step1 state display associated view by default when MultiStepForm.Edit state activated?

Answer 1

The most simple way here would be to use the $urlRouterProvider.when()

$urlRouterProvider.when("/game/MultiStepForm", "/game/MultiStepForm/step1");

Check the doc:

when(what, handler)

Registers a handler for a given url matching. if handle is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

If the handler is a function, it is injectable. It gets invoked if $location matches. You have the option of inject the match object as $match.

The handler can return

• falsy to indicate that the rule didn't match after all, then $urlRouter will continue trying to find another one that matches.
• string which is treated as a redirect and passed to $location.url()
• void or any truthy value tells $urlRouter that the url was handled.