[解決済み] AngularJSのui-routerステートマシンでBack Buttonを動作させるにはどうしたらいいですか？

以下は、これらの要件のそれぞれに対する私の実装です。私はすべてを3つのサービスにまとめました。

セッションサービス

class SessionService

    setStorage:(key, value) ->
        json =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, json

    getStorage:(key)->
        JSON.parse sessionStorage.getItem key

    clear: ->
        @setStorage(key, null) for key of sessionStorage

    stateHistory:(value=null) ->
        @accessor 'stateHistory', value

    # other properties goes here

    accessor:(name, value)->
        return @getStorage name unless value?
        @setStorage name, value

angular
.module 'app.Services'
.service 'sessionService', SessionService

これはjavascriptのラッパーです。 sessionStorage オブジェクトのラッパーです。ここでは分かりやすくするために切り捨てています。これの完全な説明については AngularJSシングルページアプリケーションでページの更新を処理する方法

ステートヒストリーサービス

class StateHistoryService
    @$inject:['sessionService']
    constructor:(@sessionService) ->

    set:(key, state)->
        history = @sessionService.stateHistory() ? {}
        history[key] = state
        @sessionService.stateHistory history

    get:(key)->
        @sessionService.stateHistory()?[key]

angular
.module 'app.Services'
.service 'stateHistoryService', StateHistoryService

は StateHistoryService は、生成された一意な URL をキーとする履歴状態の保存と取得の世話をします。これは実際には、辞書スタイルのオブジェクトのための単なる便利なラッパーです。

ステートロケーションサービス

class StateLocationService
    preventCall:[]
    @$inject:['$location','$state', 'stateHistoryService']
    constructor:(@location, @state, @stateHistoryService) ->

    locationChange: ->
        return if @preventCall.pop('locationChange')?
        entry = @stateHistoryService.get @location.url()
        return unless entry?
        @preventCall.push 'stateChange'
        @state.go entry.name, entry.params, {location:false}

    stateChange: ->
        return if @preventCall.pop('stateChange')?
        entry = {name: @state.current.name, params: @state.params}
        #generate your site specific, unique url here
        url = "/#{@state.params.subscriptionUrl}/#{Math.guid().substr(0,8)}"
        @stateHistoryService.set url, entry
        @preventCall.push 'locationChange'
        @location.url url

angular
.module 'app.Services'
.service 'stateLocationService', StateLocationService

は StateLocationService は2つのイベントを処理します。

• 位置の変更 . これはブラウザの位置が変更されたときに呼び出されます。通常は、戻る/進む/リフレッシュボタンが押されたとき、アプリが最初に起動したとき、ユーザーが URL を入力したときです。現在の location.url に対する状態が StateHistoryService にある場合は、それを使って ui-router の $state.go .

• 状態変化 . これは内部で状態を移動させるときに呼ばれる。現在のステートの名前とパラメータは StateHistoryService に、生成された url をキーとして格納されます。この生成されたURLは何でもよく、人間が読める方法で状態を特定してもしなくてもかまいません。私の場合、状態のパラメータと、guidからランダムに生成された数字の列を使用しています（guid生成器のスニペットについては、足を参照してください）。生成されたURLはブラウザのバーに表示され、重要なことに、ブラウザの内部履歴スタックに追加されます。 @location.url url . ブラウザの履歴スタックにURLを追加することで、進む/戻るボタンが有効になります。

このテクニックの大きな問題は @location.url url の中で stateChange メソッドを実行すると $locationChangeSuccess イベントが発生し locationChange メソッドを呼び出します。同様に @state.go から locationChange がトリガーとなり $stateChangeSuccess イベントが発生するため stateChange メソッドを使用します。これは非常に混乱し、ブラウザの履歴を無制限に混乱させます。

解決策は非常に簡単です。あなたは preventCall の配列がスタックとして使用されていることがわかります ( pop と push ). メソッドのうちのひとつが呼ばれるたびに、もうひとつのメソッドが一度だけ呼ばれるのを防ぎます。このテクニックは、$イベントの正しいトリガーを妨害せず、すべてをまっすぐに保ちます。

さて、私たちがすべきことは HistoryService メソッドを状態遷移のライフサイクルの適切なタイミングで呼び出すだけです。これはAngularJSのアプリで行われる .run メソッドで、このように行われます。

Angular app.run

angular
.module 'app', ['ui.router']
.run ($rootScope, stateLocationService) ->

    $rootScope.$on '$stateChangeSuccess', (event, toState, toParams) ->
        stateLocationService.stateChange()

    $rootScope.$on '$locationChangeSuccess', ->
        stateLocationService.locationChange()

Guidを生成する

Math.guid = ->
    s4 = -> Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
    "#{s4()}#{s4()}-#{s4()}-#{s4()}-#{s4()}-#{s4()}#{s4()}#{s4()}"

これで、進む/戻るボタンと更新ボタンはすべて期待通りに動作するようになりました。