Angularjs 如何有效地构建AngularUI路由器状态机？_Angularjs_Angular Ui_Angular Ui Router

Angularjs 如何有效地构建AngularUI路由器状态机？

angularjs

Angularjs 如何有效地构建AngularUI路由器状态机？,angularjs,angular-ui,angular-ui-router,Angularjs,Angular Ui,Angular Ui Router,我对新的AngularUI路由器库非常陌生，它允许我们使用状态机配置服务创建嵌套视图，我正在尝试找出构建我的状态的最佳方法。我正在创建一个使用嵌套视图的应用程序，但我的实现与我看到的许多示例略有不同 ui路由器演示如何使用状态机语法{parent}.{child}.{granten}实现嵌套视图，其中parent可以具有等效的路由/home，/order，/about，等等现在让架构师给出一个示例网站。假设在最顶层有3个视图需要渲染。这三个视图是/home、/order和/about。就ui路

我对新的AngularUI路由器库非常陌生，它允许我们使用状态机配置服务创建嵌套视图，我正在尝试找出构建我的状态的最佳方法。我正在创建一个使用嵌套视图的应用程序，但我的实现与我看到的许多示例略有不同

ui路由器

演示如何使用状态机语法

{parent}.{child}.{granten}

实现嵌套视图，其中

parent

可以具有等效的路由

/home

，

/order

，

/about

，等等

现在让架构师给出一个示例网站。假设在最顶层有3个视图需要渲染。这三个视图是

/home

、

/order

和

/about

。就

ui路由器而言，所有这些视图基本上都是同级视图。但是，我们需要应用程序的实际根的抽象状态。这个状态我们将调用root

$stateProvider.
    .state('root', {
        abstract: true
        url: '/',
        templateUrl: 'templates/index.html`
    })

模板/index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div ui-view></div>
</body>
</html>

<ul id="navMenu">
        <li ui-sref-active="active"><a ui-sref="">Back</a></li>
        <li ui-sref-active="active"><a ui-sref=".overview">Overview</a></li>
        <li ui-sref-active="active"><a ui-sref=".accounts" >Accounts</a></li>
        <li ui-sref-active="active"><a ui-sref=".billing">Billing</a></li>
</ul>

<div ui-view></div>

现在，如果我们导航到/
、/about
或/order
，我们将分别被路由到主页
、about
和订单
状态。到目前为止，这看起来很琐碎，所以让我们变得更复杂一点
主页
和关于
页面非常简单，不需要额外的工作，但是如果我们想让我们的订单
页面具有内部功能，例如概述
页面、账户
页面和账单
页面，该怎么办。现在，导航到订单
实际上将带我们进入概览
，它将有一个导航菜单，然后在概览、
账户

和账单之间移动

要获得此功能，我们再次必须进行

order

抽象。这样做允许我们只使用一个简单的

ui视图

指令，该指令将用于呈现

概览

、

账户

、和

账单

模板/order.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div ui-view></div>
</body>
</html>

<ul id="navMenu">
        <li ui-sref-active="active"><a ui-sref="">Back</a></li>
        <li ui-sref-active="active"><a ui-sref=".overview">Overview</a></li>
        <li ui-sref-active="active"><a ui-sref=".accounts" >Accounts</a></li>
        <li ui-sref-active="active"><a ui-sref=".billing">Billing</a></li>
</ul>

<div ui-view></div>

请注意，

order

状态是以前修改的，因此现在它是抽象的，只能通过导航到它的一个子状态来访问。这才是真正的问题所在。现在，我们的“状态”树看起来像

                          root (abstract)
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                     home  order  about
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                       /     |      \
                overview  accounts billing

/order/:orderId/accounts OR /order/3/accounts

一切看起来都很好，但现在我们希望在

账户下有另一个级别查看账户详细信息。我们希望账户
页面有一个可点击的账户表。单击时，我们希望整个视图更改为帐户详细信息页面。此页面的URL从accounts
转换为account.details
如下所示
                          root (abstract)
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                     home  order  about
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                       /     |      \
                overview  accounts billing

/order/:orderId/accounts OR /order/3/accounts

到
这将转换为使用帐户Id 71转到订单3并查看详细信息页面。然而，在ui路由器中accounts.details
视图实际上是accounts
的兄弟，因为我们希望整个视图切换到details
，而不是accounts
中的另一个嵌套视图。问题是我们不再遵循ui路由器
设计的状态层次结构。从概念上讲，帐户详细信息是帐户
的子状态，但我们希望视图呈现为帐户
的同级的AngularUI状态视图
我正试图找出使用ui-router
提供的状态机设计来构建整个网站的正确方法。这意味着知道何时使用抽象状态，何时不使用
有人能举例说明如何使用这些技术构建一个复杂的网站吗？
这里有几点：
本段暗示了一种代码气味：
这将转换为使用帐户Id 71转到订单3并查看详细信息页面。但是，在ui路由器中，accounts.details视图实际上是帐户的同级视图，因为我们希望整个视图切换到详细信息，而不是帐户内部的另一个嵌套视图。问题是我们不再遵循ui路由器设计的状态层次结构。从概念上讲，account details是accounts的子状态，但我们希望该视图作为AngularUI状态视图呈现为accounts的同级
你们的州与你们的观点不一致。总的来说，您应该确保情况是这样的，我会尝试重新构建一些东西，以便实现对齐。最好在深入实现之前尽早这样做，因为随着时间的推移，事情会变得越来越复杂。你会发现自己在与状态机战斗，而不是与它一起工作
现在，可能有一种方法可以在不改变过渡的情况下获得您想要的东西。问题不在于状态，而在于当您转换到同级状态时，父状态的视图没有被刷新。您可以使用一些选项。有关详细信息，请参阅文档
转换发生后，您可能需要调用$state.reload
。注意不要进入无限循环