Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
136 views
in Technique[技术] by (71.8m points)

javascript - 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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...