Nesting ng-views in angular js

Question

I had two different apps in angular. During integration to a single application I had to

nest ng-views.

For sample (index.html) is

Answer 1

If you do not want to turn to yet another library to solve your problem (not that there's anything wrong with that), you should also look into using directives and ng-switch and ng-show.

This approach was given as an answer here :

angular complex nesting of partials

Answer 2

Updated answer:

UI Router (which now sits here: https://angular-ui.github.io/ui-router/site/#/api/ui.router) is generally regarded as the best solution for complex routing in AngularJS.

---

Original answer:

Nesting views isn't natively possible, as of now, in AngularJS. In my last app, I used a solution derived from here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Allowing me to effectively nest views (and skipping the limited ng-view altogether)

After doing so, this other (simpler, better, I believe) solution appeared:

http://angular-ui.github.com/ (scroll down to "Route Checking")

Check it out!

Answer 3

I sincerely doubt this is idiomatic Angular (and it's mentioned above that there is possible cross-browser issues), but my ng-include solution for having an "all" view with my other views nested inside something like an all.html:

    <div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
    </div>

    <div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
    </div>

    <div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
    </div>

This worked for me but felt like it was going against the grain of the framework. I will personally be trying something like what Eamon links to on my next pass.

Answer 4

I'd suggest that you have a look at the ui-router project by the AngularUI team. This project contains a new router based on states, which can also react to URLs, but allow way better handling of application state.

This includes the use of having multiple and / or nested views.

I had a similar question a while ago, so maybe its answers are going to help you as well: How do I setup nested views in AngularJS?

Moreover, you can expect ui-router to be integrated in AngularJS in a future version, so this will most probably be the way routing works in the future anyway. So no need to stick to other workarounds if you can already have what will be next today :-)

Answer 5

Take a look at this:

• https://github.com/angular-ui/ui-router

• http://angular-ui.github.io/ui-router/sample/#/

Looks like the thing you are looking for

Answer 6

There are many third party libraries for nested views and routing. ui-router is already mentioned here, I would also suggest to take a look at this one:

http://angular-route-segment.com

It has the nested views capabilities which you ask for exactly, and it is much simpler to use than ui-router. In your example:

index.html:

<div app-view-segment="0"></div>

view1.html:

<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>

deep-view.html:

<p>This is the partial for view inside view1.</p>