AngularJS ui-router statesの構造

Question

私は、ライブプロジェクトでui-routerでAngularJSを使用し始めました。

私は現在ルートを構成するのが難しいです。

アプリケーションシナリオがある： 災難一つは、操作複数存在します。

URLの構造は以下の通りです：

カラミティ：台風

http://localhost/#/timeline/typhoon 

カラミティ：操作ID

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

との台風は、私は現在timeline抽象状態を持っていますが、トラブルに実行しています。私はURLを持っている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' 
}) 

、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

使用すると、1つのパラメータにURLがありません：

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