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, Jul 17 '14 at 02:56
you need the native `location` object using `$window.location=...` — charlietfl, Jul 17 '14 at 03:20
INstead you could consider to make it all a AngularJS including your authentication -- see this post http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/ — Soren, Jul 17 '14 at 03: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, Jul 17 '14 at 03:36

score 85 · Accepted Answer · edited Jun 21 '22 at 16:21

85

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 '22 at 16:21

Stephen Ostermiller

23,933
14
88
109

answered Jul 17 '14 at 02:58

m.casey

2,579
17
10

Just tried that. Unfortunately, that redirects to www.domain.com/app/RouteTo/login rather than www.domain.com/login – Thorbjørn Kappel Hansen Jul 17 '14 at 03:01
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. – m.casey Jul 17 '14 at 03:08
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 Jul 17 '14 at 03:12
What have you defined as your route for your login view? – m.casey Jul 17 '14 at 03:14
1

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. – Thorbjørn Kappel Hansen Jul 17 '14 at 03:15
I apologize; I missed that detail. I've edited my answer accordingly. I tested to ensure it works in an Angular app of my own to be sure. – m.casey Jul 17 '14 at 03:22
Ah just saw your edit now. This would indeed solve it. My issue seemed to be the lack of http:// before the hostname – Thorbjørn Kappel Hansen Jul 17 '14 at 03:38
https://docs.angularjs.org/guide/$location says: 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. So... if you need to ensure reloaded page...use $window.location.href. – Nawlbergs Mar 08 '16 at 22:13
5

It's also worth mentioning you should probably use `$window` instead of `window` (source: http://stackoverflow.com/questions/28906180/difference-between-window-and-window-in-ionicframework) – Caleb Faruki Nov 17 '16 at 14:51

Diego Ferri · Answer 2 · 2016-06-29T10:58:27.913

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 '16 at 10:58

answered Sep 08 '15 at 14:07

Diego Ferri

2,657
2
27
35

Anil Singh · Answer 3 · 2016-08-05T11:28:49.763

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>

score 4 · Answer 4 · answered Mar 28 '16 at 21:57

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 '16 at 21:57

CularBytes

9,924
8
76
101

score -11 · Answer 5 · answered Sep 15 '15 at 15:25

-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 '15 at 15:25

Efrain Luna Villafuerte

291
3
3

Don't be afraid! – Mika Aug 02 '19 at 14:54

Using $window or $location to Redirect in AngularJS

5 Answers5

Linked