angularjs 在Angular js中嵌套ng视图

ehxuflar  于 2023-01-01  发布在  Angular
关注(0)|答案(6)|浏览(250)

我在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?
如果不可能,能否解释?

kqqjbcuj

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/(向下滚动至"路由检查")
快看!

4szc88ey

4szc88ey2#

我建议你看看AngularUI团队的ui-router项目,这个项目包含了一个基于状态的新路由器,它也可以对URL做出React,但是可以更好地处理应用程序状态。
这包括使用具有多个和/或嵌套视图。
不久前我也有一个类似的问题,也许它的答案也会对你有所帮助:How do I setup nested views in AngularJS?
此外,你可以期待ui-router在未来的版本中被集成到AngularJS中,所以这很可能是路由在未来的工作方式。所以如果你已经有了今天的下一个工作方式,就没有必要坚持其他的工作方式:-)

moiiocjp

moiiocjp3#

看看这个:

看起来你要找的东西

mwecs4sa

mwecs4sa4#

有许多第三方库用于嵌套视图和路由。ui-router在这里已经提到过,我也建议看看这个:
http://angular-route-segment.com
它有嵌套视图的能力,这正是你所要求的,而且它比ui-router更容易使用。

索引.html

<div app-view-segment="0"></div>

视图1.html

<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>

深度视图.html

<p>This is the partial for view inside view1.</p>
cnh2zyt3

cnh2zyt35#

如果您不想求助于另一个库来解决您的问题(并不是说这样做有什么问题),您还应该考虑使用指令和ng-switch和ng-show。
这种方法在这里作为答案给出:
angular complex nesting of partials

2cmtqfgy

2cmtqfgy6#

我真的怀疑这是否是惯用的Angular (上面提到过可能存在跨浏览器问题),但我的ng-include解决方案是将“all”视图与其他视图嵌套在类似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>

这对我很有效,但感觉它违背了框架的规则。我个人将在下一次通过时尝试类似Eamon链接的东西。

相关问题