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

Question

我有一个问题。我有一个登录页面。当用户将要登录的主页即将到来时。在该主页中，我有一些选项分别称为其局部视图页面。让我先解释一下我的代码。

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>

登录后，将显示以上页面。 检查我下面的路由路径：

.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'
    })

在这里，我需要的时候用户会在登录plan.html将成立由内默认的ui-view的user.html 。

Answer 1

好吧，这似乎是“默认重定向问题”。 有解决方案，我最喜欢这个解决方案：

使用AngularJS中的UI-Router将状态重定向到默认子状态

我们可以使用其默认重定向目标标记任何状态：

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

有了这个小代码段，它将开始发挥作用：

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

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

甚至有工作的例子