angular-ui-router：创建可扩展的、不改变 url 的布局状态？

Question

我想要做什么

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

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

• /#/home
• /#/signup
• /#/

我尝试过的

我的视觉效果很好，直到我开始使用过渡，你会看到页眉/页脚与正文一起动画：

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 状态定义为布局的父级，用于全局数据解析等。