Angularjs主页的多个NG视图



好吧,我是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,它对urltemplates&amp;states

您只能有一个ng-view

但是,可以通过多种方式更改其内容:ng-includeng-switch或通过RouteProvider映射不同的控制器和模板。

您还可以考虑使用UI-Router,允许多个并行视图。

这是使用UI-Router的多个视图的示例。

最新更新