Question

我正在使用ui-router深入研究更高级的Angular路由选项。我使用<ui-view>遇到了一些问题，特别是使用默认模板加载嵌套ui-view。

我已设置以下路由：

  .state('user', {
    url: '/user',
    templateUrl: 'views/user.html',
    controller: 'UserCtrl',
  })
  .state('user.account', {
    url: '/account',
    templateUrl: 'views/account.html',
    controller: 'UserCtrl',
  })
  .state('user.profile', {
    url: '/profile',
    templateUrl: 'views/profile.html',
    controller: 'UserCtrl',
  })

我的用户页面如下所示：

<h1>User Home</h1>

<a ui-sref="user.profile">profile</a><br>
<a ui-sref="user.account">manage account</a>

<div ui-view="">
   <div ng-include="profile.html"></div>
</div>

在上面的代码段中，我希望在profile.html页面加载时默认显示user.html模板。

似乎应该可以这样做，因为它是大多数应用程序中要向用户显示默认模板的基本要求。但我无法让它发挥作用，并且没有找到任何明显的解决方案，并不涉及在$state路由中创建多个视图，这对于这个基本的东西来说似乎完全过度。

我只是从标准ng-route转移到ui-router，如果我错过了一些明显的东西，那就很抱歉。谢谢你的帮助！

Answer 1

您可以使用$urlRouterProvider.when阻止

在初始时直接导航到user.profile状态

$urlRouterProvider.when('', '/user/profile')

或者您也可以使用.run块来加载初始页面

app.run(['$state', function(){
   $state.go('user.profile');
}])

还要确保user.html应该ui-view在其中呈现其子状态。

<强>视图/ user.html

<div class="user">
   ...
   <div ui-view><div>
   ..
<div>

如何将默认模板加载到Angular ui-view中

1 个答案: