使用ui-router将父状态默认为子状态

Question

我有这种状态结构:

.state('places',
{
    url:'/places',
    controller:'PlacesController',
    templateUrl:'views/places.html'
})
.state('places.city',
{
    url:'/:city',
    templateUrl:function(stateParams)
    {
        return 'views/places/'+stateParams.city+'.html';
    }
});

它工作得很好,除非URL /places之后没有城市.
如何templateUrl在子状态中具有默认值？

我认为最好的方法是设置ui-view PlacesController,但这似乎是不可能的.

Answer 1

尝试使用设置为空字符串的URL定义另一个子状态:

.state('places.default', {
    url: '',
    templateUrl: '...'
}

然后添加abstract: true到父状态.

Answer 2

无需更改状态配置,您可以将默认模板直接ui-view放在HTML中的标记之间:

<!-- places.html -->
<div ui-view>
  <h1>Please choose a place</h1>
</div>

<!-- london.html -->
<h1>London is amazing!</h1>

现在,当您导航到时/places,您将看到"请选择一个地方"消息,当您导航到时/places/london,您将看到"伦敦太棒了!".

Answer 3

正如 Angular-UI Wiki 页面中所述：

激活状态主要有以下三种方式：

1. 调用 $state.go()。高级便捷方法。
2. 单击包含 ui-sref 指令的链接。
3. 导航到与状态关联的 url。

https://github.com/angular-ui/ui-router/wiki#activating-a-state