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

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>

在上面的 sn-p 中，我希望 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 以在其中呈现其子状态。

views/user.html

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