1

ui-router で解決を使用する場合、状態の他の解決が開始される前に、最初に何か (認証チェックなど) を解決することは可能ですか?

これは、現在認証チェックを行っている方法の例です。 

angular.module('Example', [
    'ui.router',
    'services.auth',
    'services.api'
])

.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('order', {
        url: '/order',
        views: {
            'main': {
                templateUrl: 'order/order.tpl.html',
                controller: 'OrderCtrl'
            }
        },
        resolve: {
            // I want this one to resolve before any of the others even start.
            loggedIn: ['auth', function (auth) {
                return auth.loggedIn();
            }],
            cards: ['api', function (api) {
                return api.getCards();
            }],
            shippingAddresses: ['api', function (api) {
                return api.getShippingAddresses();
            }]
        }
    });
}]);

先にloggedIn解決してから始めたいと思います。cardsshippingAddresses

コントローラーに他の API 呼び出しを配置することもできますが (以前はそうでした)、テンプレートがレンダリングを開始する前に、それらから取得したデータを使用できるようにしたいと考えています。

これは機能するかもしれませんが、個々の API 呼び出しの解決された値を挿入できませんでした。

...
resolve: {
    // I want this one to resolve before any of the others even start.
    loggedIn: ['auth', 'api', function (auth, api) {
        return auth.loggedIn()
            .then(api.getCards())
            .then(api.getShippingAddresses())
            .then(function () {
                // whatever....
            });
    }]
}
...

編集：

ここでの答えは私の問題を解決するように見えますが、この問題を解決する最善の方法ではないかもしれませんが、うまくいきます。

認証チェックの解決された値を注入するだけで、それが解決されるまで待機してから、他の解決を続行します。

...
resolve: {
    // I want this one to resolve before any of the others even start.
    loggedIn: ['auth', function (auth) {
        return auth.loggedIn();
    }],
    cards: ['api', 'loggedIn', function (api, loggedIn) {
        return api.getCards();
    }],
    shippingAddresses: ['api', 'loggedIn', function (api, loggedIn) {
        return api.getShippingAddresses();
    }]
}
...

私はこれに自分で答えますが、他の人が解決策を提供できるように開いたままにします。

4

1 に答える 1

0

プロミスを組み合わせる方法の概念実証をいくつか提供しました: http : //jsfiddle.net/pP7Uh/1/then

resolve: {
    data: function (api) {
        var state;
        return api.loggedIn().then(function(loggedIn) {
            state = loggedIn
            return api.getCards();
        }).then(function(getCards) {
            return {
                loggedIn: state,
                getCards: getCards
            }
        }).catch(function(error) {
            console.error('error', error)
        });
    }
}

この後、データ解決されたオブジェクトには次のものがあります。

 {
  loggedIn:"calling loggedIn",
  getCards:"calling getCards"
 }
于 2014-06-13T23:47:18.193 に答える