angular Js ui router nested views

Question

link to example: https://plnkr.co/edit/Z7BgBWeSStMuIrYBR3tS?p=preview

Here two states are defined. 1. home , 2. about

home has 1 view viewA

about has 2 views viewA and viewB but viewB is a sub part of about page. I want to show viewB inside of about.html page and not on index page. Is this possible. Please provide a plunkr link thanks.

what is the best practice if there are various views and each view has sub states

not able to understand from that its complicated. can you give a simple answer here — Sam
– Sam, Commented Mar 4, 2016 at 11:52

Shailendra Singh Deol · Accepted Answer · 2016-03-04 11:54:02Z

2

You can include your page 'about-sub-level.html' inside 'about.html' using ng-include like as-

<h1>I am about page</h1>
<div ng-include="'about-sub-level.html'"> </div>

Change your routing like below-

 .state('about', {
            url: "/about",
            views: {
                "viewA": {
                    templateUrl: "about.html"
                }
            }
        })

Hope this may help you..

answered Mar 4, 2016 at 11:54

Shailendra Singh Deol

6373 silver badges5 bronze badges

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

1 Comment

Sam Over a year ago

ok this works but is it possible to give states for about say about.sub-about...so that i do not have to give ng-include. I mean nested states for about page.. i know its possible but its complicated in documentation. i am not able to get that. Pls give demo for that way also

Collectives™ on Stack Overflow

angular Js ui router nested views

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related