Best IT Recipes

Nested ng views in angular js

I had two different applications in angular. During integration into one application I had to

nest ng-views.

For the sample (index.html) there 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 applications is app (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 does not load. Is it possible to nest ng-views?

If this is not possible, this can be explained.

Thank you in advance

+43
javascript angularjs
Mar 26 '13 at 12:41
source share
6 answers

Updated answer:

The UI Router (which is now here: https://angular-ui.imtqy.com/ui-router/site/#/api/ui.router ) is usually considered the best solution for complex routing in AngularJS.



Original answer:

In AngularJS, nested views are currently not possible. In my last application, I used the solution obtained here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Allows me to efficiently display views (and generally skip limited viewing)

After that, another (simpler, better, believe) solution appeared:

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

Check this!

+26
Mar 26 '13 at 12:48
source share

I would advise you to take a look at the angularUI team ui-router project. This project contains a new state-based router that can also respond to URLs, but allows better control over the state of the application.

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

I had a similar question a while ago, so maybe its answers will also help you: How to set up subviews in AngularJS?

In addition, you can expect that ui-router will be integrated into AngularJS in a future version, so this is likely to be a way of routing in the future. Therefore, there is no need to stick to other workarounds if you can already have what will be next today :-)

+25
Mar 26 '13 at 13:40
source share

Take a look at this:

Looks like what you are looking for

+2
May 20 '13 at 11:49
source share

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

http://angular-route-segment.com

It has the capabilities of nested views that you ask for exactly, and it is much easier 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 sea view.html

 <p>This is the partial for view inside view1.</p>
+2
Aug 15 '13 at 10:12
source share

If you don’t want to go to another library to solve your problem (not something bad), you should also study the directives and ng-switch and ng-show.

This approach was given here as an answer:

angular complex nesting of partial files

+2
Sep 02 '13 at 19:31 on
source share

I sincerely doubt that this is an idiomatic Angular (and mentioned above that there might be problems with a cross browser), but my ng-include solution for presenting everything with my other views nested inside something like 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 it seemed to run counter to the frame. I will personally try something similar to the fact that Eamon contacts my next pass.

0
02 sept '13 at 19:52
source share


More articles:


All Articles