Question

我正在尝试做什么

显示有两种“样式”或“类别”
- “正常”：[标题|身体|页脚] - 我在大多数州使用它
- “Discreet”：仅限[Body]，屏幕中心 - 我将此用于登录/注册，错误等状态。
这些“展示样式”与example.com/normal/*或example.com/discreet/*不对应，而只是其他视图的可扩展模板。它们应该完全影响URL。
在normal样式状态之间切换时，只有body应重新加载（动画，无论如何），页眉/页脚应保持静态。
在discreet样式状态之间切换时，整个页面完全由body视图构成，应该转换。

这样的URL和状态应如下所示（屏幕截图）：

我尝试了什么

我的视觉效果是什么，直到我开始使用过渡，你看到页眉/页脚与身体一起动画：

的app.config（）

$stateProvider
.state('index', {
  url: '/',
  views: {
    '': { templateUrl: 'partials/template-normal' },
    'body@index': { templateUrl: 'partials/view-index' }
  }
})
.state('signin', {
  url: '/signin',
  views: {
    '': { templateUrl: 'partials/template-discreet' },
    'body@signin': { templateUrl: 'partials/view-signin', controller: 'SigninCtrl' }
  }
}

模板正常

header.app__header ...
main.app__body(ui-view='body')
footer.app__footer ...

模板离散

main.app__body--discreet(ui-view='body')

Answer 1

好吧，我自己已经弄清楚了。事实证明它比我想象的更灵活和直观。

1。定义根布局

我们定义了两个指向不同布局模板的“根”状态，其中url：null和abstract：true。

$stateProvider
.state('standard', {
  url: '',
  abstract: true,
  views: {
    'layout@' : { templateUrl: 'partials/template-standard' }
  }
})
.state('simple', {
  url: '',
  abstract: true,
  views: {
    'layout@' : { templateUrl: 'partials/template-simple' }
  }
})

2。将视图定义为根布局的子项

然后我们按照惯例定义我们的路线，将布局父级添加到州名：

.state('standard.index', {
  url: '/',
  views: {
    'content': { templateUrl: 'partials/view-index' }
  }
})
.state('simple.signin', {
  url: '/signin',
  views: {
    'content': { templateUrl: 'partials/view-signin', controller: 'SigninController' }
  }
})

结果正是我所希望的。 Standard布局子视图在它们之间进行过渡，而不同布局之间的过渡表现得像通常那样。

我认为在某些时候我可能会将SuperRoot app状态定义为布局的父级，用于全局数据解析等。

angular-ui-router：创建可扩展，非URL更改的布局状态？