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

问题描述

问 题

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

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

解决方案

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

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

大概方法如下，html

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

AngularJS 中的路由配置：

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

这篇关于javascript - 关于angular 的单页面多路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！