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/inboxe 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?