How to select the partial view page by default using angular.js

Question

I have one problem.I have a login page.When user will logged in the home page is coming.In that home page i have some options which called its respective partial view page.Let me to explain my code first.

user.html:

<nav class="navbar navbar-default navbar-fixed-top"  
     style="margin-top:50px;z-index:111!important;">
<div class="container" style="width:1270px;">
div class="navbar-header navbar-brand">
{{deptName}}
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="user">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".plan">Plan</a></li>
<li ui-sref-active="active"><a ui-sref="#">Subject</a></li>
<!-- <li ui-sref-active="active"><a ui-sref=".hod">HOD</a></li> -->
<li ui-sref-active="active"><a ui-sref="#">User Management</a></li>
<li ui-sref-active="active"><a ui-sref="#">User Role</a></li>
<li ui-sref-active="active"><a ui-sref="#">Time Table</a></li>
<li ui-sref-active="active"><a ui-sref="#">Faculty</a></li>
<li ui-sref-active="active"><a ui-sref="#">WDS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
 <!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:120px;"  ui-view>

</div>

After login the above page is coming. Check my below routing path:

.state('user',{
        url: '/user',
        templateUrl: 'userview/user.html',
        controller: 'userController'
    })
    .state('user.plan',{
        url: '/plan',
        templateUrl: 'userview/plan.html',
        controller: 'planController'
    })
    .state('user.profile',{
        url: '/profile',
        templateUrl: 'userview/profile.html',
        controller: 'userProfileController'
    })

Here I need when user will logged in the plan.html will set up by default inside the ui-view of user.html.

Could you make a plunker? It should not take you long, but could significantly increase amount of attention you will get — Radim Köhler, Oct 22 '15 at 04:34
@RadimKöhler : here my requirement is when user will move to `/user` path by deafult plan.html will visible inside `ui-view` of user.html. — , Oct 22 '15 at 05:26
In case, I do understand properly... I added answer with more details — Radim Köhler, Oct 22 '15 at 05:43

score 0 · Answer 1 · edited May 23 '17 at 11:44

Well, it seems like a "default redirection issue". And there are solutions, this one I do like the most:

Redirect a state to default substate with UI-Router in AngularJS

where we can mark any state with its default redirection target:

.state('user',{
    url: '/user',
    templateUrl: 'userview/user.html',
    controller: 'userController',
    // here is new marker
    redirectTo: 'user.plan'
})

And with this small code snippet it will start to do the magic:

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

There is even working example

How to select the partial view page by default using angular.js

1 Answers1

Redirect a state to default substate with UI-Router in AngularJS