Angular redirection not working

Question

I'm sure this has been answered a thousand times but I can't figure out why I can only redirect using window.location.href after hours of searching. What's going on?

angular.module(..., [])
.config([..., function(...) {
        /* Route Provider and ngRoute reference removed as per comment below */
         $stateProvider
            .state('login', {
                url : '/login',
                controller: 'loginCtrl',
                templateUrl: '/login'
            })

            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            });
        $locationProvider.html5Mode(true);
    }
])
   .run(['$state',  '$rootScope', function ($state, $rootScope) {
    $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
            if ($rootScope.username == null || $rootScope.password == null) {
                if (toState.templateUrl == "/login") {

                } else {
                        event.preventDefault();
                        $state.go("login");

                }
            }
        });
    }
]);

Update: StateChangeStart is being called twice, the second time with the login state. There are no errors thrown in the console. I'm very new to angular, so I'm open to any suggestions if I'm doing something drastically wrong. If you need any additional code (ex: controller, service) let me know and I'll post it.

However, on displaying the welcome page, even though username and password are null, it stays on the welcome page. Entering /login in the browser works as expected.

As per Angular $location.path not working:

                /* snip */ else {
                    $rootScope.$apply(function () {
                        $location.path('login');
                    });
                } /* snip */

gives me an error: $digest already in progress.

Further details: I just found out that if I remove the $locationProvider.html5Mode(true); line, stateChangeStart is not called when I load the page. Server is ASP.Net.

Edit 2 It looks like angular is actually getting the login page, but doesn't know where to put it?

I'm pretty sure you're mixing up Angular's native `ngRoute` and `UI-Router` modules. — muenchdo, Sep 02 '15 at 09:50
Place event.preventDefault(); after your redirection and also use $state.go('login') and remove $location.path('login'); — makeitmorehuman, Sep 02 '15 at 09:52
@XGreen So you mean `$rootScope.$apply(function(){$state.go("login");event.preventDefault();});`? Doesn't seem to have any effect either - stays on homepage with no errors. — David, Sep 02 '15 at 09:55

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

Within the run function of angular use:

$rootScope.$on('$stateChangeStart', function (event, toState) {
    if (toState.name != 'login') {
        $state.go('login');
        event.preventDefault();
    }
});

only use stateProvider to setup routes.

Follow the guidance here using AngularJS html5mode with nodeJS and Express

or on apache:

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

in order to correctly setup html5 pushstate for angular js on node (if thats what youre using on the server)

edited May 23 '17 at 12:14

Community

1
1

answered Sep 02 '15 at 09:57

makeitmorehuman

11,287
3
52
76

it's not taking effect. Take a look at this screencap: http://i.giphy.com/3oEdv7sewygkOhGidi.gif – David Sep 02 '15 at 10:04
try only using state provider. I don't think it's designed to work along side routeprovider. – makeitmorehuman Sep 02 '15 at 10:08
I've just tried that now actually, let me update the code. – David Sep 02 '15 at 10:09

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

Click here and read what I've wrote for an authentication problem, more or less is something that you can find useful.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 02 '15 at 10:12

Matteo Gabriele

164
8

The first thing I can suggest to you is to remove the $locationProvider.html5Mode(true) if you don't have an .htaccess ( if you are in linux ) this one can be problematic. – Matteo Gabriele Sep 02 '15 at 10:19
Thats a very good point, david do you have server side implementation that supports the html5 mode? – makeitmorehuman Sep 02 '15 at 10:20
You need to setup redirection for the html5 pushState to work property. Its not just a clientside thing. http://stackoverflow.com/questions/17777967/using-angularjs-html5mode-with-nodejs-and-express – makeitmorehuman Sep 02 '15 at 10:21
Read this article to setup a better environment with .htaccess file on Linux https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/ – Matteo Gabriele Sep 02 '15 at 10:24
@MatteoGabriele if I remove the locationProvider line, stateChangeStart is never called. – David Sep 02 '15 at 10:37
Can you please update your snippet with the new version? just to check if there's something missing. – Matteo Gabriele Sep 02 '15 at 10:39
@MatteoGabriele Updated – David Sep 02 '15 at 11:03
you have the $digest error because $location is already part of the angular life cycle so you don't need to use the $apply method. – Matteo Gabriele Sep 02 '15 at 11:07
by the way, since you are in a .NET env, for now I suggest you to remove the html5Mode and check how to deal with it later on. – Matteo Gabriele Sep 02 '15 at 11:09

Angular redirection not working

2 Answers2