AngularJS: come avere uno stato nidificato predefinito usando UI Router?

Question

Attualmente ho un indice index.html di root con una singola interfaccia utente che viene sostituita a seconda della "pagina" in cui si trova l'utente, ad es. Libri, giochi, ecc. Prendendo la pagina Libri come esempio, questa vista ha contenuti che mi piacerebbe visualizzare su tutte le pagine che fanno parte dello spazio "Libri", ma il contenuto centrale sarà diverso a seconda se l'utente è su la "homepage" dei libri o guardando un libro specifico. Per facilitare questo, il mio books.html ha uno stato annidato che include books_list.html o books_detail.html.

struttura L'url mi piacerebbe avere è:

• /libri - Spettacoli pannelli laterali a destra, più una lista di libri al centro della pagina sinistra /.
• /books/1 - Mostra i pannelli laterali sinistro/destro più i dettagli del libro con ID 1 al centro della pagina (l'elenco dei libri non viene visualizzato).

Come posso impostare i miei stati di avere il modello e il modello books.html books_list.html nella vista nested durante la navigazione a/i libri, ma hanno books.html E books_detail.html durante la navigazione a/libri/1?

Attualmente sto aggirando questo problema avendo un sottotesto "casa", ma questo significa che devo avere/libri/home, e/libri non visualizza contenuti centrali quindi è attualmente inutile.

.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

ho raggiunto quello che mi serviva dichiarando uno stato astratto:

.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', 
    ... 
}) 

Ciò significa che/libri carichi sia 'libri' e '' books.home membri e/libri/1 carica sia gli stati 'libri' che quelli 'books.detail', che è quello di cui avevo bisogno.

Answer 2

forse provarlo

$urlRouterProvider.otherwise('/'); 
..... 
.state('index', { 
    url: '/', 
    templateUrl: CONFIG.static_url + '/html/index.html', 
    ... 
})  

Answer 3

ho creato working example here. Questo sta seguendo le tue esigenze, perché ci sono solo due livelli di nidificazione.

• books è un genitore sia per i bambini
  • books.home riempie l'erea centrale - e non è madre di books.detail
  • books.detail sostituisce vista elenco - ma che significa che il suo $ portata (books.home) è perduto

Definizione Stato:

.state('books', { 
    url: '/books', 
    views: { 
     '@' : { 
     templateUrl: 'layout.html', 
     }, 
     'left@books' : { templateUrl: 'tpl.left.html',}, 
     'right@books' : { templateUrl: 'tpl.right.html',}, 
    }, 
    }) 
.state('books.home', { 
    url: '/home', 
    templateUrl: 'list.html', 
    }) 
.state('books.detail', { 
    url: '/:bookId', 
    templateUrl: 'detail.html', 
    controller: 'DetailCtrl' 
    }) 

Controllare lo here

Ma c'è anche a different approach, che mi piace di più. La vista elenco, è genitore del figlio, e quindi potrebbe mantenere il suo $ scope, mentre naviga tra i dettagli. Simili discusso here