angularjs 中主页的多个 ng-views

Question

好的，我是 angular 的新手，刚开始使用 ngRoute 和 ngView 指令，我遇到了一些对我来说是个问题，但我怀疑这只是一个问题，因为我缺乏这方面的经验角度。

我的 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 和 class "header" 中显示了一个滑块。像这样：

<div class="header">
  <nav class="pull-right">...</nav>
  <div class="slider">...</div>
<div>

现在这仅适用于主页，所以我完全不知道如何实现它。我的索引页上是否需要 two 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集成到模板中。

Answer 1

你只能有一个ng-view。

但是，可以通过多种方式更改其内容：ng-include、ng-switch 或通过 routeProvider 映射不同的控制器和模板。

您也可以考虑使用 ui-router，它允许多个平行视图。

这是一个example of multiple views using ui-router。

Answer 2

一个页面上只有一个 ng-view。不可能有多个 ng-view。如果你想加载其他部分，那么你需要使用 ng-include 指令。

Ui-router支持多个视图的最佳选择，可以嵌套到另一个视图中，您可以利用嵌套视图。

您可以在 Angular UI 路由器中使用 url: '/test?oneParam&twoParam' 格式的查询参数，而 ng-route

中不支持此功能

我建议您从 ng-route 切换到 ui-route，这样可以很好地控制 url、templates 和 states

angularjs 中主页的多个 ng-views

Multiple ng-views for homepage in angularjs

html

angularjs

ng-view

ngroute