angularjs – 如何有效地构建AngularUI ui-router状态机？
|
我是新的AngularUI ui-router库的新手,它允许我们使用状态机配置服务创建嵌套视图,并试图找出构建我的状态的最佳方法.我正在创建一个使用嵌套视图的应用程序,但我的实现与我看到的许多示例略有不同.
ui-router演示使用状态机语法{parent}.{child}.{grandchild}显示如何实现嵌套视图,其中parent可以具有等效路由/ home,/ order,/ about等. 让建筑师现在建立一个样本网站.让我们说在最顶层我们有3个视图我们想要渲染. 3个视图是/ home,/ order和/ about.就ui-router而言,所有这些视图基本上都是兄弟姐妹.但是,我们需要一个抽象状态来表示应用程序的实际根.这个状态我们称之为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>
现在因为root是抽象的,我们不能直接去/看到我们的页面,我们必须调用其中一个子状态为home,about或order.让我们创建这些状态 $stateProvider
.state('home',{
url:'',templateUrl: 'templates/home.html'
})
.state('about',{
url:'/about',templateUrl: 'templates/about.html'
})
.state('order',{
url:'/order',templateUrl: 'templates/order.html'
})
现在,如果我们导航到/,/ about或/ order,我们将分别路由到home,about和order状态.到目前为止,这看起来非常简单,所以让我们变得更复杂一些. 家庭和关于页面是相当直接的,不需要额外的工作,但如果我们想要使我们的订单页面具有内部功能,例如概述页面,帐户页面和帐单页面,该怎么办.现在,导航到订单实际上将带我们进入概览,其中将有一个导航菜单,然后在概览,帐户和帐单之间旅行. 为了获得此功能,我们再次必须使订单抽象化.这样做只允许我们使用一个简单的ui-view指令,该指令将用于呈现概述,帐户和账单. 模板/ order.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>
现在我们的$stateProvider将添加以下内容 $stateProvider
.state('order',{
abstract: true,url: '/order/:id',templateUrl: 'templates/order.html'
})
.state('order.overview',{
url: '/overview',templateUrl: 'templates/order.overview.html'
})
.state('order.accounts',{
url: '/accounts',templateUrl: 'templates/order.accounts.html'
})
.state('order.billing',{
url: '/billing',templateUrl: 'templates/order.billing.html'
})
请注意,订单状态已从之前修改过,因此现在它是抽象的,只能通过导航到其中一个子状态来访问.这是实际问题到位的地方.现在,我们的“状态”树看起来像 root (abstract)
/ |
/ |
/ |
/ |
home order about
/ |
/ |
/ |
/ |
/ |
overview accounts billing
而且一切看起来都很棒,但现在我们可以说,我们希望帐户下有另一个级别来查看帐户详细信息.我们希望帐户页面有一个可以点击的帐户表.单击时,我们希望整个视图更改为帐户详细信息页面.此页面从帐户到account.details的URL转换看起来像 /order/:orderId/accounts OR /order/3/accounts 至 /order/:orderId/accounts/:accountId OR /order/3/accounts/71 转换为使用帐户ID 71转到订单3并查看详细信息页面.但是在ui-router中,accounts.details视图实际上是帐户的兄弟,因为我们希望整个视图切换到详细信息,而不仅仅是帐户的另一个嵌套视图.这个问题是我们不再遵循ui-router设计的状态层次结构.在概念上,帐户详细信息是子帐户状态,但我们希望视图呈现为AngularUI状态视图作为帐户的兄弟. 我试图找出使用ui-router提供的状态机设计来构建整个网站的正确方法.这意味着知道何时使用抽象状态以及何时不使用. 有人可以展示一个如何使用这些技术构建复杂网站的示例吗？ 解决方法
这里有几件事：
本段暗示代码气味：
您的州没有与您的观点保持一致.一般来说,你应该确保这种情况,并且我会尝试重新检测事物,以便有一致性.最好在你深入实施之前尽早完成这项工作,因为随着时间的推移,事情会变得越来越复杂.你会发现自己正在与国家机器作斗争而不是使用它. 现在,可能有一种方法可以在不对转换进行任何更改的情况下获得所需内容.您遇到的问题不在于状态,而在于您转换到兄弟状态时,父状态的视图不会被刷新.您可以使用一些选项.请参阅ui-router $state的文档. 转换发生后,您可能需要调用$state.reload.小心不要进入无限循环. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |