Question

在ui-router指南中，有一个包含主要元素的页面示例：

+-------------------------------------------+
|               HEADER                      |
|------+------------------------------------|
|      |                                    |
|      |                                    |
| NAV  |        CONTENT                     |
|      |                                    |
|      |                                    |
+------+------------------------------------+

和html里面有：

<ui-view name="header"></ui-view>
<ui-view name="nav"></ui-view>
<div ui-view="content"></div>

然而，州定义的例子非常小：

var mainState = {
  name: 'main',
  views: {
    header: 'headerComponent',
    nav: 'navComponent',
    content: 'mainComponent',
  }
}

让我们说我会创建三种状态：

var content1= {
  name: 'content1',
  url: '/content1',
  views: {
    header: 'headerComponent',
    nav: 'navComponent',
    content: 'content1Component',
  }
}
var content2= {
  name: 'content2',
  url: '/content2',
  views: {
    header: 'headerComponent',
    nav: 'navComponent',
    content: 'content2Component',
  }
}
var content3= {
  name: 'content3',
  url: '/content3',
  views: {
    header: 'headerComponent',
    nav: 'navComponent'
  }
}

我是否理解正确：

从状态content1导航到content2只会更改内容部分，但标题和导航将保持不变（我的意思是ui-router了解元素的那些是不改变所以它不会重新加载它们？
导航到content3会将内容区域留空吗？

问题的背景。我正在构建小应用程序，全屏谷歌地图始终可见。每个页面用户导航（关于我们，联系我们等）显示为模态窗口。但我必须确保主要组件（地图）始终保留在DOM上。

如何在AngularJS中路由多个视图？

0 个答案: