Nesting ng-views in angular js

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

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!

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

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

Nesting ng-views in angular js

Related

Recent Posts