Comment configurer des vues imbriquées dans AngularJS?

Question

J'ai une application avec différents écrans. Chaque écran est affecté à une URL, comme #, mails, contacts, et ainsi de suite.

Dans mon fichier HTML principal j'ai un ng-view élément qui met à jour selon le parcours de l'utilisateur sélectionne. Pour l'instant, donc bon.

Maintenant, certains de ces écrans ont un sous-navigation. E. g., #mails n'ont une boîte de réception et un dossier envoyés. Ils présentent themselfes avec deux colonnes: La sous-navigation sur la gauche, les mails du dossier approprié sur la droite.

Lorsque vous accédez #mails, c'est de vous rediriger #mails/inbox, de sorte que, au fond de la boîte de réception est la valeur par défaut de la sous-vue pour les mails.

Comment pourrais-je le configurer?

La seule approche que j'ai actuellement de penser (je suis tout à fait nouveau pour AngularJS, donc pardonnez-moi si cette question est un peu naïf) est d'avoir deux points de vue, l'un pour l' #mails/inbox, et l'autre pour #mails/sent.

Lorsque vous sélectionnez un itinéraire, ces points de vue sont chargés. Lorsque vous sélectionnez #mails simplement, il vous redirige vers #mails/inbox.

Mais cela signifie que les deux points de vue doivent utiliser un ng-include pour la sous-navigation. D'une certaine manière cela se sent mal pour moi.

Ce que j'aime le plus est d'avoir des vues imbriquées: Le haut bascule entre les écrans comme les mails, les contacts, et ainsi de suite, et celui du bas des changements entre les sous-points de vue tels que boîte de réception, envoyés, et ainsi de suite.

Comment pourrais-je résoudre ce problème?

Answer 1

AngularJS ui-router a résolu mes problèmes :-)

Answer 2

Une autre bibliothèque à vérifier: http://angular-route-segment.com

Vous pouvez l'utiliser à la place de ng-view et $route intégrés.

Exemple de configuration d'itinéraire ressemble à celui-ci:

 $routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});