Menu
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
Thanks in advance
393
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!
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
