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.

Secern

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. – Polyanthus

you need the native location object using $window.location=... – Meng

INstead you could consider to make it all a AngularJS including your authentication -- see this post frederiknakstad.com/2013/01/21/… – Dolomites

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. – Polyanthus

Answer 1

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"

Canaan

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

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. – Canaan

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 – Polyanthus

What have you defined as your route for your login view? – Canaan

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. – Polyanthus

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. – Canaan

Ah just saw your edit now. This would indeed solve it. My issue seemed to be the lack of http:// before the hostname – Polyanthus

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. – Sportsmanship

It's also worth mentioning you should probably use $window instead of window (source: #28906680) – Palumbo

Answer 2

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

Gastrolith

Answer 3

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>

Kith

Answer 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.

Procreate

Answer 5

You have to put:

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

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

Strongroom

Don't be afraid! – Cosmography