javascript - 关于angular 的单页面多路由问题

Question

在网上看到很多关于angular route 的知识 都是 基于页面跳转

我想在一个页面里，添加多个页面片段 怎么用路由控制呢？
就比如说 index 页面 有header footer 以及 main 三块，我想 header 、footer 、main 都是由 route 加载进来的，怎么实现呢？

Answer 1

这个可以使用多个 ng-view，然后分别给对命名，路由配置中再对各个 ng-view 指定对应的填充。

具体请查看 https://github.com/angular-ui/ui-router 的 Multiple & Named Views 部分，demo: http://plnkr.co/edit/SDOcGS?p=preview 。

大概方法如下，html

  <p class="well" ui-view="viewA"></p>
  <p class="well" ui-view="viewB"></p>

AngularJS 中的路由配置：

$stateProvider
  .state('index', {
    url: "",
    views: {
      "viewA": {
        template: "index.viewA"
      },
      "viewB": {
        template: "index.viewB"
      }
    }
  })

Answer 2

记忆中angular-route是不支持嵌套的, 都使用angular-ui-router

Answer 3

html文件：

<p ui-view="header"></p>
<p ui-view="main"></p>
<p ui-view="footer"></p>

路由配置文件js：

views: {
                    'header@index': {
                        templateUrl: 'common/module-header.html'
                    },
                    'main@index':   {
                        templateUrl: 'index/index.html'
                    },
                    'footer@index': {
                        templateUrl: 'common/module-footer.html'
                    }
                }