NodeJs Forum News: [AngularJS] Angular UI Router issue when redirecting to a template after resolve() throws error

Hello all !

So It took me a very long time to understand this issue and get to amcve. Here is the case : I'm trying to redirect a user to a login page when he's not authenticated (this is very basic). Here is the code :

index.html :


<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script id="login.html" type="text/ng-template">
    l</script>
<script id="welcome.html" type="text/ng-template">
    w</script>
</body>
</html>

app.js :


angular.module('starter', ['ui.router'])
.run(["$rootScope", "$state", function($rootScope, $state) {
    $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
        if (error === "nope") {
            $state.go("login");
        }
    });
}])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/welcome');

    $stateProvider
        .state('welcome', {
            url: '/welcome',
            templateUrl: 'welcome.html',
            resolve: {
                "auth": ["$q", function($q) {
                    return $q.reject("nope");
                }]
            }
        })

        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html'
        })
});

And just for fun, views/login.html :

vl

So, when the above code is ran, the output is good (it shows "vl"), but look at the Chrome console :

Now, the crazy part of it, is if you modify the JS and replace


templateUrl: 'views/login.html'

in the login state by simply

templateUrl: 'login.html'

using the ng-template defined in the html, ALL IS GOOD ! No errors. So well, I guess using a file as template must trigger some watcher or whatever... Well no, I'm just out of ideas.

here are two things that could help :

There is no error when using ngRoute in place of UI Router
There is no error if replacing Angular version with the 1.2.25

So I think it's a bug with UI Router and Angular 1.3. But don't know at all what to do to solve it.

Thanks ahead for your help !

Here is the solution if anyone needs it (someone answered to me on Stackoverflow) :

You need to call event.preventDefault() before you call $state.go().
See here: http://plnkr.co/edit/eUosIpdN7adJFxfDo3kV?p=preview

Thanks anyway !

NodeJs Forum News

2014년 12월 31일 수요일

[AngularJS] Angular UI Router issue when redirecting to a template after resolve() throws error

댓글 없음:

댓글 쓰기