好吧,我是Angular的新手angluar的经验。
我在我的index.html页面上有以下标记(简化):
<html>
<head>
<title>Sample APP</title>
</head>
<body>
<div class="header">
<nav class="pull-right">...</nav>
</div>
<div class="main" ng-view>
</div>
<div class="footer">
</div>
</body>
</html>
以上是我的页面使用的默认布局结构。现在,我的问题是仅用于主页,在DIV中显示了一个滑块,其中"标题"。这样:
<div class="header">
<nav class="pull-right">...</nav>
<div class="slider">...</div>
<div>
现在,这仅适用于主页,因此我对如何实施它完全感到困惑。我需要我的索引页面上的两个 ng-view指令吗?例如:
<html>
<head>
<title>Sample APP</title>
</head>
<body>
<div class="header">
<nav class="pull-right">...</nav>
<div class="slider" ng-view>...</div>
</div>
<div class="main" ng-view>
</div>
<div class="footer">
</div>
</body>
</html>
另外,如果您需要知道我为什么这样做,这仅仅是因为我在线购买了HTML模板,现在我试图将Angularjs集成到模板中。
单个页面上只有单个ng-view
。不可能拥有多个ng-view
。如果要加载其他部分,则需要使用ng-include
指令。
ui-router 最佳选项,它支持可以嵌套到另一个视图的多个视图,您可以利用嵌套视图的优势。
您可以在Angular UI路由器中使用查询参数,例如格式url: '/test?oneParam&twoParam'
,而此功能不支持ng-route
我建议您从ng-route
切换到ui-route
,它对url
,templates
&amp;states
您只能有一个ng-view
。
但是,可以通过多种方式更改其内容:ng-include
,ng-switch
或通过RouteProvider映射不同的控制器和模板。
您还可以考虑使用UI-Router,允许多个并行视图。
这是使用UI-Router的多个视图的示例。