仪表板应用程序的非分层URL方案

时间:2014-06-14 21:38:49

标签: angularjs angular-ui-router

在以下上下文中维护URL方案的角度方式是什么:

  • 该应用包含一个侧边栏,用户可以在其中选择多个数据集,稍后可以修改选择。
  • 这是一个仪表板画布,用户可以在其上动态添加包含不同类型图形的多个窗口。这些数字是根据某些变量绘制的。

我想到的URL方案可以让我跟踪所选数据集,当前活动窗口,它们的参数以及它们各自的顺序。例如,有效的网址可能是

/ds?set=dataset1,dataset2,dataset3/type1?var=alb&f=0.05-0.15/type3?var=alb,crea/type1?var=alb,crea,ch2&f=0.10-0.20/

这意味着当前选择了三个命名数据集,此外,还有三个窗口以定义的顺序激活,并带有已定义的查询参数。

哪种状态/视图结构允许所描述的架构?问题是我没有看到任何这种情况的例子,ui-router示例都是用户在给定路径上导航的简单分层情况。

1 个答案:

答案 0 :(得分:1)

我并不完全清楚你想要的网址方案,但这可以通过路由中的查询参数来完成。对此的限制是,当状态定义为ex:

时,必须将它们声明为状态
.state('dashboard', {
    url: '/dashboard?ds&type&foo&bar'
})

这会使$stateParams.ds$stateParams.type$stateParams.foo等可用。可以通过以某种方式将参数序列化为已知的命名参数来解决所需的一些任意参数集的问题(即,您不能提前知道它们)。

例如,我使用查询参数在查询参数?redirect=profile.details&profileId=987234中捕获状态的状态之间进行一些重定向,我可以将其反序列化为直接传递给$state.go()的内容。在这种情况下,我有一组有限的id可以传递,所以我把它们声明为状态定义。要解决这个问题,您可以执行?redirect=state.name&attrs={someId:3,otherValue:'abc',andAntoher:324}之类的操作。 (查询参数应该是urlencoded),这样状态url可以这样声明:/dashboard?redrect&attrs