Структура состояний Ui-router AngularJS

Question

Я только начал использовать AngularJS с ui-router в живом проекте.

В настоящее время у меня возникают трудности с структурированием маршрутов.

Сценарий приложения: Для одного Бедствия, Есть несколько операции.

URL структура является следующим:

Бедствия: Typhoon

http://localhost/#/timeline/typhoon 

Бедствия: 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' 
}) 

Каков порядок написания этих маршрутов?

Answer 1

Вы не один параметр в URL:

state('timeline.calamity', { 
    url: '/:calamity', 
... 
}) 
.state('timeline.operation', { 
    url: '/:operationID', 
... 
})