How do I setup nested views in AngularJS?

Question

I have an application with various screens. Each screen is assigned a URL, such as #, mails, contacts, and so on.

In my main HTML file I have an ng-view element which updates according to the route the user selects. So far, so good.

Now some of these screens have a sub-navigation. E.g., #mails does have an inbox and a sent folder. They present themselfes with two columns: The sub-navigation on the left, the mails of the appropriate folder on the right.

When you navigate to #mails, it shall redirect you to #mails/inbox, so that basically inbox is the default sub-view for mails.

How could I set this up?

The only approach I can currently think of (I am quite new to AngularJS, hence forgive me if this question is a little bit naive) is to have two views, one for #mails/inbox, and the other for #mails/sent.

When you select a route, these views are loaded. When you select #mails it simply redirects you to #mails/inbox.

But this means that both views must use an ng-include for the sub-navigation. Somehow this feels wrong to me.

What I'd like more is to have nested views: The top one switches between screens such as mails, contacts, and so on, and the bottom one changes between sub-views such as inbox, sent, and so on.

How would I solve this?

As far as I know, there is no alternative to using ng-include as of now. That may change in the future. — holographic-principle
– holographic-principle, Commented Mar 17, 2013 at 11:36
Take a look at AngularJS - Complex nesting of partials and templates and check out Angular ui-route. — Stewie
– Stewie, Commented Mar 17, 2013 at 14:25
ui-router is definitely able to to what you want. Check it out - I've used it with great success. — Spock
– Spock, Commented Sep 2, 2013 at 12:51

Golo Roden · Accepted Answer · 2013-03-19 08:59:18Z

31

AngularJS ui-router solved my issues :-)

answered Mar 19, 2013 at 8:59

Golo Roden

152k102 gold badges318 silver badges445 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael J. Calkins Over a year ago

Hands down agree. Before I could only handle basically single routes, but ui-router allows you to 'tunnel' to the place you want to be with minimal work/requests.

artch · Accepted Answer · 2013-08-23 17:43:08Z

Another library to check out: http://angular-route-segment.com

You can use it instead of built-in ng-view and $route.

Sample route config looks like this one:

$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});

Collectives™ on Stack Overflow

How do I setup nested views in AngularJS?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related