Angular ui-router解決服務暫停路由更改

[英]Angular ui-router resolve service halting route change


Attempting to get ui-router to resolve the Authentication service before I allow the switch into that state.

在允許切換到該狀態之前,嘗試讓ui-router解析認證服務。

unfortunately it continues to evade me, with angular hanging whenever I inject a service that is not part of angular.

不幸的是,每當我注入一個不屬於棱角分明的服務時,它會繼續躲避我。

I know that I can't inject a service into .config, but surely I should be able to do it just before the controller is loaded?

我知道我不能將服務注入到.config中,但我肯定能夠在加載控制器之前做到這一點嗎?

here's a cut down version of the code:

這是代碼的縮減版本:

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

// For any unmatched url, redirect to state:home
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
    .state('home', {
        url: "/",
        templateUrl: "partials/home.html",
        resolve: {
            isAuthorised: ['$log', '$q', 'Auth', function ($log, $q, auth) {
                var q = $q.defer();
                $log.debug("checking if authorised..."); //this doesn't show
                if (auth.whatever()) {
                    q.resolve(true);
                } else {
                    q.reject(false);
                }

                return q.promise;
            }]
        },
        controller: "DefaultCtrl"
    });
}]);

So the controller never actually gets instantiated... there are no errors in the console.

所以控制器實際上從未實例化......控制台中沒有錯誤。

The same happens if I type any random string in as the service name... so my best guess is that it can't find it? But all other areas of the app can...

如果我輸入任意隨機字符串作為服務名稱,也會發生同樣的情況...所以我最好的猜測是它無法找到它?但該應用程序的所有其他領域可以......

I have spent a while researching this and I'm pretty sure I should be able to accomplish this somehow.

我花了一段時間研究這個,我很確定我應該能夠以某種方式完成這個。

any help would be most appreciated.

非常感激任何的幫助。

Grant.

Edit

Thanks Chris T for the Plunkr! I am closing in on the issue, I added your console logs and I'm getting the following error:

感謝Chris T為Plunkr!我正在關注這個問題,我添加了你的控制台日志,我收到以下錯誤:

Start:   {} -> home{}

Error:   {} -> home{} ReferenceError: $window is not defined {stack: "ReferenceError: $window is not defined↵    at a (h…pm/planitmoney/claw/dist/js/bower.min.js:815:112)", message: "$window is not defined"}

That bower.min.js file is just angular followed by UI router.. I'm going to do some more checking. Thanks again.

那個bower.min.js文件只是有角度的,接着是UI路由器..我打算再做一些檢查。再次感謝。

2 个解决方案

#1


2  

Thanks again to Chris T who created the Plunkr: http://plnkr.co/edit/aeEt4ddUYMM3xRi8M38T?p=preview which helped solve the issue.

再次感謝Chris T創建了Plunkr:http://plnkr.co/edit/aeEt4ddUYMM3xRi8M38T?p = preview,這有助於解決問題。

I copied the console logs he has in there over to my application:

我將他在那里的控制台日志復制到我的應用程序中:

// Adds state change hooks; logs to console.
app.run(function($rootScope, $state) {
$rootScope.$state = $state;
function message(to, toP, from, fromP) { return from.name  + angular.toJson(fromP) + " -> " +     to.name + angular.toJson(toP); }
$rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start:   " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) {     console.log("Error:   " + message(to, toP, from, fromP), err); });
}); 

where I immediately noticed the error:

我立即注意到錯誤:

Start:   {} -> home{}

Error:   {} -> home{} ReferenceError: $window is not defined {stack: "ReferenceError: $window is not defined↵    at a (h…pm/planitmoney/claw/dist/js/bower.min.js:815:112)", message: "$window is not defined"}

digging a little deeper I traced the error to what was actually throwing it and it was fixed minutes later.

深入挖掘我將錯誤追溯到實際投擲的內容,並在幾分鍾后修復。

The service that I was attempting to resolve also called in some dependencies of its own. Unknown to me there was a missing $window injection in one of these services.

我試圖解決的服務也調用了它自己的一些依賴項。我不知道其中一個服務中缺少$ window注入。

The Error did not show up in the console I guess that it may have been because of the unique way in which it was accessed (using ui-routers resolve) Either that or my use of Raven in the application has thrown it somewhere that I didnt see it.

錯誤沒有顯示在控制台中我猜它可能是因為它被訪問的獨特方式(使用ui-routers解析)或者我在應用程序中使用Raven或者把它扔到某個地方我沒有看見。

I hope this helps someone else get to the bottom of any issue.

我希望這可以幫助其他人找到問題的根源。

Thanks again everyone.

再次感謝大家。

#2


0  

We have a similar setup that checks localStorage for an token and resolves the promise.

我們有一個類似的設置,它檢查localStorage是否有令牌並解決了這個承諾。

Check the following example:

請檢查以下示例:

var requireUser = { User: [ "$location", "$rootScope", "$q", "API", "Session",
    function ( $location, $rootScope, $q, API, Session )
    {
        var deferred = $q.defer();

            if( Session.get.authToken() )
            {
                if( Session.get.user() )
                {
                    deferred.resolve( $rootScope.user );
                }
                else
                {
                    $location.path( "/login" );
                }
            }
            else
            {
                deferred.reject( "No user token" );
                $location.path( "/login" );
            }

        return deferred.promise;

    } ] };

$routeProvider
    .when( "/users", { templateUrl: "/build/templates/users.html", controller: "UsersCtrl", resolve: requireUser, active: "users" } )

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/12/04/72564d7e3d266a39897121af91486ff6.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com