我在angular中有两个不同的应用程序。在集成到单个应用程序的过程中,我必须
嵌套NG视图。
示例(index.html)为
<!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>
我的应用程序视图之一是(view2.html)
<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}
现在这个应用程序内部又有了不同的视图。
我试过了,但是页面没有加载。是否可以嵌套ng-views?
如果不可能,能否解释?
6条答案
按热度按时间kqqjbcuj1#
更新答案:
UI路由器(现在位于:https://angular-ui.github.io/ui-router/site/#/api/ui.router)通常被认为是AngularJS中复杂路由的最佳解决方案。
原答复:
到目前为止,AngularJS本身还不能嵌套视图。在我的上一个应用中,我使用了一个从这里派生出来的解决方案:http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
允许我有效地嵌套视图(并且完全跳过有限的ng-view)
在这样做之后,另一个(我认为更简单、更好)解决方案出现了:
http://angular-ui.github.com/(向下滚动至"路由检查")
快看!
4szc88ey2#
我建议你看看AngularUI团队的ui-router项目,这个项目包含了一个基于状态的新路由器,它也可以对URL做出React,但是可以更好地处理应用程序状态。
这包括使用具有多个和/或嵌套视图。
不久前我也有一个类似的问题,也许它的答案也会对你有所帮助:How do I setup nested views in AngularJS?
此外,你可以期待ui-router在未来的版本中被集成到AngularJS中,所以这很可能是路由在未来的工作方式。所以如果你已经有了今天的下一个工作方式,就没有必要坚持其他的工作方式:-)
moiiocjp3#
看看这个:
看起来你要找的东西
mwecs4sa4#
有许多第三方库用于嵌套视图和路由。ui-router在这里已经提到过,我也建议看看这个:
http://angular-route-segment.com
它有嵌套视图的能力,这正是你所要求的,而且它比ui-router更容易使用。
索引.html:
视图1.html:
深度视图.html:
cnh2zyt35#
如果您不想求助于另一个库来解决您的问题(并不是说这样做有什么问题),您还应该考虑使用指令和ng-switch和ng-show。
这种方法在这里作为答案给出:
angular complex nesting of partials
2cmtqfgy6#
我真的怀疑这是否是惯用的Angular (上面提到过可能存在跨浏览器问题),但我的
ng-include
解决方案是将“all”视图与其他视图嵌套在类似all.html
的东西中:这对我很有效,但感觉它违背了框架的规则。我个人将在下一次通过时尝试类似Eamon链接的东西。