AngularJS:如何使用UI路由器具有默认的嵌套状态？

Question

我目前有一个带有单个ui-view的root index.html，它会根据用户所在的“页面”而被替换，例如书籍，游戏等。以“书籍”页面为例，此 View 具有我想显示在“书籍”空间一部分的所有页面上的内容，但是主要内容会根据用户是否使用以下内容而有所不同图书的“首页”或查看特定的图书。为方便起见，我的books.html具有嵌套状态，其中包含books_list.html或books_detail.html。

我想要的网址结构是:

/books-在页面中间显示左侧/右侧面板以及书籍列表。

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

导航到/books时，如何将我的状态设置为在嵌套 View 中具有books.html模板和books_list.html模板，而导航到/books/1时又具有books.html和books_detail.html？

我目前通过具有“home”子状态来解决此问题，但这意味着我必须拥有/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'状态，这正是我所需要的。