AngularJS ui路由器状态结构

AngularJS ui-router states structure

本文关键字：结构 状态 路由器 ui AngularJS      更新时间：2023-09-26

我刚刚开始在一个实时项目中使用AngularJS和ui路由器。

我目前在安排路线时遇到了困难。

应用程序场景是：对于一次灾难，有多次操作。

URL结构如下：

灾难：台风

http://localhost/#/timeline/typhoon

灾难：台风与行动ID

http://localhost/#/timeline/typhoon/52

我目前有一个timeline抽象状态，但遇到了麻烦。

.state('timeline', {
    abstract: true,
    url: '/timeline',
    templateUrl: 'timeline.html',
    controller: 'TimelineCtrl'
.state('timeline.calamity', {
    url: '/{calamity}',
    templateUrl: 'timeline.calamity.html',
    controller: 'TimelineCtrl'
})
.state('timeline.calamity.operation', {
    url: '/{operationID}',
    templateUrl: 'timeline.calamity.operation.html',
    controller: 'TimelineCtrl'
})

当我将它们设置为timeline父级具有url时，operation路由无法正确加载。

.state('timeline', {
    abstract: true,
    url: '/timeline/{calamity}/{operationID}', // operationID should be optional here
    templateUrl: 'timeline.html',
    controller: 'TimelineCtrl'
})
.state('timeline.calamity', {
    url: '',
    templateUrl: 'timeline.calamity.html',
    controller: 'CalamityCtrl'
})
.state('timeline.operation', {
    url: '',
    templateUrl: 'timeline.operation.html',
    controller: 'OperationCtrl'
})

写这些路线的正确方法是什么？

您缺少一个参数url：

state('timeline.calamity', {
    url: '/:calamity',
...
})
.state('timeline.operation', {
    url: '/:operationID',
...
})
相关文章：