How to activate default nested state inside nested states? - angularjs

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.