angularjs中主页的多个ng视图

use*_*908 6 html angularjs ng-view ngroute

好吧,我刚接触角度,刚刚开始使用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>
Run Code Online (Sandbox Code Playgroud)

以上是我的页面使用的默认布局结构.现在我的问题是单独的主页,在div中显示一个滑块显示类"header".像这样:

<div class="header">
  <nav class="pull-right">...</nav>
  <div class="slider">...</div>
<div>
Run Code Online (Sandbox Code Playgroud)

现在这只是为了主页,所以我对如何实现这一点感到困惑.我的索引页面上是否需要两个 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>
Run Code Online (Sandbox Code Playgroud)

此外,如果你需要知道我为什么这样做,这只是因为我在网上买了一个html模板,现在我正在尝试将angularjs集成到模板中.

Pan*_*kar 5

ng-view单个页面上只有单个.它不可能有多个ng-view.如果要加载其他部分,则需要使用ng-include指令.

Ui-router最佳选项支持可以嵌套到另一个的多个视图,您可以利用嵌套视图.

您可以在Angular UI Router中使用查询参数,如格式url: '/test?oneParam&twoParam',但此功能不支持ng-route

我建议你切换ng-routeui-route,可以很好地控制url,templatesstates