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

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

One of my app view is (view2.html)

<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}

Now this application has different views once again inside it.

I tried but the page is not loading. Is there a possibility to nest ng-views?

If not Possible can it be explained?

explanation of problem is not clear at all... provide code instead of list of script tags — charlietfl
– charlietfl, Commented Mar 26, 2013 at 12:48
Currently i think nesting of ng-view is not supported if your goal is just to include external partial resource just replace nested ng-view with ng-include — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Mar 26, 2013 at 13:19
I have read that there are some cross browser issues with ng-include @Ajay beni — user2189941
– user2189941, Commented Mar 26, 2013 at 13:25
list of alternative solutions: github.com/angular-ui/ui-router github.com/artch/angular-route-segment github.com/dotJEM/angular-routing — Jens
– Jens, Commented Oct 21, 2013 at 11:07

Zanon · Accepted Answer · 2016-02-09 14:55:08Z

27

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!

edited Feb 9, 2016 at 14:55

Zanon

31k21 gold badges119 silver badges127 bronze badges

answered Mar 26, 2013 at 12:48

Tiago Roldão

10.7k3 gold badges32 silver badges28 bronze badges

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

1 Comment

Ben Over a year ago

I started using that solution myself, but AngularUI ui-router (github.com/angular-ui/ui-router) routing is a much better solution.

Community · Accepted Answer · 2017-05-23 10:30:01Z

24

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 :-)

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 26, 2013 at 13:40

Golo Roden

152k102 gold badges318 silver badges445 bronze badges

3 Comments

Emerson Farrugia Over a year ago

"you can expect ui-router to be integrated in AngularJS in a future version" ... AngularjS 1.2.0 will split off its routing into a separate pluggable module, but ui-router won't be merged in according to the AngularJS presentation on 1.2 and beyond (youtube.com/watch?v=W13qDdJDHp8)

mccainz Over a year ago

Very very dissapointed upon hearing that UI-Router will not be merged.

Venning Over a year ago

As they move towards Angular 2.0 (blog.angularjs.org/2014/03/angular-20.html), the design team is considering how to address weakness of the native router, to include what works in the ui-router (docs.google.com/document/d/…).

Marcin Wosinek · Accepted Answer · 2013-05-20 11:49:15Z

2

Take a look at this:

Looks like the thing you are looking for

answered May 20, 2013 at 11:49

Marcin Wosinek

1,0196 silver badges8 bronze badges

Comments

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

2

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>

edited Aug 22, 2013 at 20:25

answered Aug 15, 2013 at 10:12

artch

4,5552 gold badges31 silver badges35 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:33Z

2

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Sep 2, 2013 at 19:31

Eamon

2462 silver badges6 bronze badges

Comments

max · Accepted Answer · 2013-09-02 19:52:55Z

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.

Collectives™ on Stack Overflow

Nesting ng-views in angular js

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Linked

Related