嵌套视图 VS 分离

【问题标题】：Nested Views VS Separate嵌套视图 VS 分离
【发布时间】：2023-03-20 14:33:02
【问题描述】：

我正在尝试为我的应用确定 Angular 结构。我从 Angular 全栈生成器开始。

在 UI-Router 中，您可以嵌套状态。嵌套相关状态对我来说似乎是合乎逻辑的。例如：Registration、Registration.form、Registration.confirmation.... 但这些嵌套状态似乎依赖于在同一页面上查看的每个子视图和父视图。

意味着父级将有一个<ui-view> 标记，该标记将在调用时插入子级视图。

是否可以让嵌套状态替换父状态？
还是我只是做了未嵌套的状态？
或者这是一个抽象状态的例子？

【问题讨论】：

标签： angularjs angular-ui-router angular-fullstack

【解决方案1】：

有a working example

子代父代几乎是“原生”的 UI-Router 解决方案。让我们有这个状态定义：

.state('parent', {
    url: "/parent",
    templateUrl: 'tpl.html',
})
.state('parent.child', { 
    url: "/child",
    templateUrl: 'tpl.html',
    controller: 'ChildCtrl',
})

这将是tpl.html，在我们的例子中用于两种状态：

<div ui-view>
  <h3>current state name: <var>{{$state.current.name}}</var></h3>
   ...  
</div>

所以，我们可以看到，父根 HTML 元素确实具有属性 ui-view。这意味着，这个元素也扮演着孩子的目标角色。

查看action here

【讨论】：