【问题标题】:Multiple Named Views in UI RouterUI 路由器中的多个命名视图
【发布时间】:2017-01-04 04:34:32
【问题描述】:

我问这个是为了确保我理解这个概念。在 UI Router 中,他们建议您尽可能使用嵌套状态。但是,似乎当您这样做时,每个状态/视图只能有 1 个控制器。在大多数情况下这很好。但是,如果您在状态/视图上需要两个或更多控制器,那么 Multiple Named Views 似乎是正确的解决方案。因为看起来您实际上可以拥有由不同控制器控制的不同 html 元素或 div - 如果需要的话。

因此,例如在搜索结果页面上,您可以在页面上有不同的元素或 div 由不同的控制器控制......这就是 UI 路由器中的多个命名视图的设计目的吗?

似乎对于更复杂的页面,例如搜索结果页面,多个命名视图是一个比简单嵌套状态更好的解决方案......因为您可以拥有一个身份验证控制器、自动完成控制器、搜索控制器 - 所有这些都负责不同的页面上的区域。我什至不确定您如何使用嵌套状态完成类似的操作。

那么我理解正确吗?

【问题讨论】:

    标签: angularjs angular-ui-router controllers


    【解决方案1】:

    我认为您对viewsstates 的基本定义感到困惑。话虽如此,您的理解(对您自己的问题陈述)是正确的。

    ui-router 中,它的基本原理是将您的应用程序变成状态机。状态机的基本定义是,在任何时候,只有一个state 可以保持活动状态。这实际上非常有用并且是一个很好的设计模式——从某种意义上说,当您的机器(或应用程序)处于明确定义的状态时,您可以定义它应该做什么(或它应该如何表现)。也适合调试。

    但是,这并不意味着在单一状态下,机器不能做多件事。它可以,只要处于那种状态,它的工作就是做多件事。我们以电影预订应用为例。

    免责声明:这并不完全是一个真实的状态图,但我们只是将其用于讨论目的。图片由 Google 搜索提供

    现在所有的蓝色圆角矩形框都是状态。这意味着,当用户在任何时间点使用该应用程序时,他/她将处于其中一种状态 - 他必须,否则他不会使用该应用程序。

    现在可以很快意识到,如果用户处于SeatsChoosing状态,他不能处于其他状态——不是PromotionSelection,不是Payment,或者其他状态, 同时。他可以去其他状态(称为状态转换),比如PromotionSelection,但只有在他完成选择之后。关键是这里只有一个状态是活动的,也就是没有并行状态。一次只有一个。

    虽然它一次只能激活一个状态,但这并不意味着机器不能在一个状态下执行多个任务。以SeatsChoosing 状态为例。在SeatsChoosing 状态下,会执行多个任务,包括加载电影、获取位置、显示日程安排等。但是,只有在SeatsChoosing 状态下,用户才会体验到所有这些事情。关键是您可以在一个状态下同时执行多个任务,只要您的状态定义允许。

    这正是ui-router 正在实现的目标。在您的应用程序的任何时间点,您只能激活一个状态。嵌套状态本身仍然是一个状态,它实际上只是一个遍历状态机的节点 - 当您到达该节点时,只有该节点处于活动状态。不允许并行状态。出于同样的原因,这并不意味着您的州不能一次做多项事情。这就是named views 的用途。对于一个状态,您可以拥有不同的视图,这些视图具有不同的明确定义的上下文(视图),它们都属于同一个域(状态),就像一个大伞。

    现在让我们回到您的搜索结果问题陈述。你如何定义你的状态,你如何定义你的观点?这完全取决于您,但只要确保您使用ui-router,您遵守状态机的规则——也就是没有并行状态但允许并行任务。因此,如果您将状态定义为执行多项操作的页面 - 身份验证、自动完成等,那么是的,多个命名视图是正确的方法,而不是嵌套状态。但是如果您将searchsearch results 分隔为两个不同的域,那么嵌套状态可能会更好。

    对此没有正确和错误的答案,只是设计决策的问题。

    希望对您有所帮助。

    【讨论】:

    • 是否可以有多个命名视图的嵌套状态?
    • @user3125823 是的。嵌套状态仍然是状态;并且一个状态总是可以有多个命名视图。
    • 我已经为您准备好几次答案了,非常简洁明了 - 非常有帮助。感谢您抽出宝贵的时间来回答!
    猜你喜欢
    • 1970-01-01
    • 2015-03-30
    • 2014-06-28
    • 2014-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多