How to make Angularjs nested routes?

Question

I am new to angular, I want to know if angularjs supports nested routes like emberjs I mean routes like this: myappurl/#/company/:company_id/department/:department_id

artch · Accepted Answer · 2013-08-22 20:25:05Z

7

It worth mentioning there are another Angular libraries except ui-router to accomplish this task. This one works too:

http://angular-route-segment.com

It is much simpler to use than ui-router. Sample route configuration looks like this:

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

edited Aug 22, 2013 at 20:25

answered Aug 15, 2013 at 10:15

artch

4,5652 gold badges31 silver badges35 bronze badges

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

3 Comments

Suamere Over a year ago

In the example, would section.html ever be hit? /section1 is routed to the s1 .. home segment, right? If I'm right, it is misleading to have a templateUrl defined in the s1 segment. Then the question... does the MainCtrl for the s1 segment become a parent controller to the Section1ItemCtrl?

artch Over a year ago

It is a nested view hierarchy. home.html is included into section1.html, and so forth. All controllers are inside a prototypal scope chain. You can see this example live here: angular-route-segment.com/src/example

Alberto Acuña Over a year ago

@artch how can u do this? I go Section1, then i go to Item 5 (inside section1), now i go to Section2, now i click on Section1(it reestar pages, BUT I WAMMA REOPEN ITEM5) im not sure if u understand what im saying

Ray Shan · Accepted Answer · 2014-08-18 00:40:17Z

3

According to the example given in the document: https://docs.angularjs.org/api/ngRoute/directive/ngView. Yes, Angularjs supports it.

edited Aug 18, 2014 at 0:40

Ray Shan

1,6853 gold badges17 silver badges25 bronze badges

answered Oct 8, 2012 at 22:35

Tosh

36k11 gold badges67 silver badges58 bronze badges

1 Comment

Cherif BOUCHELAGHEM Over a year ago

Thank you so much the frontend developer in my team was very happy :) we missed it.

Leon Radley · Accepted Answer · 2013-03-25 09:06:59Z

3

It can also be worth checking out https://github.com/angular-ui/ui-router

answered Mar 25, 2013 at 9:06

Leon Radley

7,7225 gold badges39 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to make Angularjs nested routes?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related