AngularJS:如何使用UI路由器实现默认嵌套状态？

Question

我目前有一个带有单个ui-view的root index.html,它取决于用户所在的"页面",例如书籍,游戏等.以"图书"页面为例,此视图包含我的内容喜欢在所有作为"书籍"空间一部分的页面上显示,但中心内容将根据用户是否在书籍"主页"上或查看特定书籍而有所不同.为方便起见,我的books.html有一个嵌套状态,其中包括books_list.html或books_detail.html.

我想要的网址结构是:

• / books - 显示左/右侧面板以及页面中间的书籍列表.
• / books/1 - 显示左/右侧面板以及页面中间ID为1的书的详细信息(不显示书籍列表).

如何导航到/ books时如何设置状态以在嵌套视图中包含books.html模板和books_list.html模板,但在导航到/ books/1时有books.html AND books_detail.html？

我目前通过拥有"家庭"子状态来解决这个问题,但这意味着我必须拥有/ books/home,并且/ books显示没有中心内容,因此目前无用.

.state('books', {
    url: '/books',
    templateUrl: CONFIG.static_url + '/html/books.html',
    ...
})
.state('books.home', {
    url: '/home',
    templateUrl: CONFIG.static_url + '/html/books_list.html',
    ...
})
.state('books.detail', {
    url: '/:bookId',
    templateUrl: CONFIG.static_url + '/html/books_detail.html',
    ...
})

Answer 1

我通过声明一个抽象状态实现了我所需要的:

.state('books', {
    abstract: true,
    url: '/books',
    templateUrl: CONFIG.static_url + '/html/books.html',
    ...
})
.state('books.home', {
    url: '',
    templateUrl: CONFIG.static_url + '/html/books_list.html',
    ...
})
.state('books.detail', {
    url: '/:bookId',
    templateUrl: CONFIG.static_url + '/html/books_detail.html',
    ...
})

这意味着/ books加载'books'和'books.home'状态,/ books/1加载'books'和'books.detail'状态,这就是我需要的.