如何使用angular.js默认选择部分视图页面

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.

我需要在用户登录plan.html时默认设置在user.html的ui-view中。

1 个解决方案

#1

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

甚至有工作的例子