Using $window or $location to Redirect in AngularJS

Question

The app I am working on contains various states (using ui-router), where some states require you to be logged in, others are publicly available.

I have created a method that validly checks whether a user is logged in, what I am currently having issues with is actually redirecting to our login-page when necessary. It should be noted that the login page is not currently placed within the AngularJS app.

app.run(function ($rootScope, $location, $window) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.data.loginReq && !$rootScope.me.loggedIn) {
            var landingUrl = $window.location.host + "/login";
            console.log(landingUrl);
            $window.open(landingUrl, "_self");
        }
    });
});

The console.log shows the intended URL properly. The line after that, I have tried practically everything from $window.open to window.location.href and no matter what I've tried no redirect happens.

Should probably add that there is server side authentication on the data as well, so the above is not the only authentication, it is more a matter of convenience to redirect to the login-page, instead of showing a mostly empty page. — Thorbjørn Kappel Hansen
– Thorbjørn Kappel Hansen, Commented Jul 17, 2014 at 2:56
you need the native location object using $window.location=... — charlietfl
– charlietfl, Commented Jul 17, 2014 at 3:20
INstead you could consider to make it all a AngularJS including your authentication -- see this post frederiknakstad.com/2013/01/21/… — Soren
– Soren, Commented Jul 17, 2014 at 3:23
The plan is to include everything (including login) inside the AngularJS app eventually, but as we are currently making the transition to AngularJS, the registration/login screen seems to be the least important at this stage. — Thorbjørn Kappel Hansen
– Thorbjørn Kappel Hansen, Commented Jul 17, 2014 at 3:36

Stephen Ostermiller · Accepted Answer · 2022-06-21 16:21:42Z

86

I believe the way to do this is $location.url('/RouteTo/Login');

Say my route for my login view was /Login, I would say $location.url('/Login') to navigate to that route.

For locations outside of the Angular app (i.e. no route defined), plain old JavaScript will serve:

window.location = "http://www.my-domain.example/login"

edited Jun 21, 2022 at 16:21

Stephen Ostermiller♦

25.8k18 gold badges96 silver badges117 bronze badges

answered Jul 17, 2014 at 2:58

m.casey

2,60919 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Thorbjørn Kappel Hansen Over a year ago

Just tried that. Unfortunately, that redirects to www.domain.com/app/RouteTo/login rather than www.domain.com/login

m.casey Over a year ago

Right, that wasn't mean to be literal. I don't know what you've defined as the route for your login view. Place whatever that route might be in the the argument for the $location.url() method. I've edited the answer for clarity.

Thorbjørn Kappel Hansen Over a year ago

Ah right. The issue here is that $location.url still redirects to a sub-path of the app. So using $location.url('/login') redirects to www.domain.com/app/login rather than www.domain.com/login

Thorbjørn Kappel Hansen Over a year ago

Well, as stated in the question, currently the login page sits outside the AngularJS app. Hence the need to redirect to www.domain.com/login rather than a path within the app.

Caleb Faruki Over a year ago

It's also worth mentioning you should probably use $window instead of window (source: stackoverflow.com/questions/28906180/…)

|

Diego Ferri · Accepted Answer · 2016-06-29 10:58:27Z

42

It seems that for full page reload $window.location.href is the preferred way.

It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.

https://docs.angularjs.org/guide/$location

edited Jun 29, 2016 at 10:58

answered Sep 8, 2015 at 14:07

Diego Ferri

2,7972 gold badges31 silver badges38 bronze badges

Comments

Anil Singh · Accepted Answer · 2016-08-05 11:28:49Z

20

It might help you! demo

AngularJs Code-sample

var app = angular.module('urlApp', []);
app.controller('urlCtrl', function ($scope, $log, $window) {
    $scope.ClickMeToRedirect = function () {
        var url = "http://" + $window.location.host + "/Account/Login";
        $log.log(url);
        $window.location.href = url;
    };
});

HTML Code-sample

<div ng-app="urlApp">
    <div ng-controller="urlCtrl">
        Redirect to <a href="#" ng-click="ClickMeToRedirect()">Click Me!</a>
    </div>
</div>

edited Aug 5, 2016 at 11:28

answered Jun 17, 2015 at 10:47

Anil Singh

4,2224 gold badges45 silver badges49 bronze badges

Comments

CularBytes · Accepted Answer · 2016-03-28 21:57:51Z

4

Not sure from what version, but I use 1.3.14 and you can just use:

window.location.href = '/employee/1';

No need to inject $location or $window in the controller and no need to get the current host address.

answered Mar 28, 2016 at 21:57

CularBytes

10.4k8 gold badges83 silver badges110 bronze badges

Comments

Efrain Luna Villafuerte · Accepted Answer · 2015-09-15 15:25:09Z

-11

You have to put:

<html ng-app="urlApp" ng-controller="urlCtrl">

This way the angular function can access into "window" object

answered Sep 15, 2015 at 15:25

Efrain Luna Villafuerte

2913 silver badges3 bronze badges

1 Comment

Mika Over a year ago

Don't be afraid!

Collectives™ on Stack Overflow

Using $window or $location to Redirect in AngularJS

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related