Como faço para configurar vistas aninhadas no AngularJS?
Eu tenho uma aplicação com váriosecrãs. Cada tela recebe um URL, como#
, mails
, contacts
, e assim por diante.
No meu arquivo HTML principal eu tenho umng-view
elemento que atualiza de acordo com a rota que o usuário seleciona. Por enquanto, tudo bem.
Agora, algumas dessas telas têm uma sub-navegação. Por exemplo.,#mails
tem uma caixa de entrada e uma pasta enviada. Eles se apresentam com duas colunas: A sub-navegação à esquerda, os e-mails da pasta apropriada à direita.
Quando você navega para#mails
, você deve redirecioná-lo para#mails/inbox
, então basicamentecaixa de entrada é a subvisualização padrão para emails.
Como eu poderia configurar isso?
A única abordagem que eu posso pensar atualmente (eu sou bastante novo no AngularJS, daí me perdoar se essa questão for um pouco ingênua) é ter duas visões, uma para#mails/inbox
e o outro para#mails/sent
.
Quando você seleciona uma rota, essas visualizações são carregadas. Quando você seleciona#mails
Ele simplesmente redireciona você para#mails/inbox
.
Mas isso significa que ambas as visões devem usar umng-include
para a sub-navegação. De alguma forma isso parece errado para mim.
O que eu gostaria mais é de ter visualizações aninhadas: a parte superior alterna entre as telas, como e-mails, contatos e assim por diante, e a parte inferior alterna entre subvisualizações, como caixa de entrada, enviadas e assim por diante.
Como eu resolveria isso?