CODEWITHSUNDEEP
javascriptangularjshttp-redirectangular-ui-router
Thorbjørn Kappel Hansen
Thorbjørn Kappel Hansen

Reputation: 1297

Using $window or $location to Redirect in AngularJS

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.

Upvotes: 96

Views: 243105

Answers (5)

m.casey
m.casey

Reputation: 2599

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"

Upvotes: 85

Anil Singh
Anil Singh

Reputation: 4212

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>

Upvotes: 20

Diego Ferri
Diego Ferri

Reputation: 2787

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

Upvotes: 42

CularBytes
CularBytes

Reputation: 10321

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.

Upvotes: 4

Efrain Luna Villafuerte
Efrain Luna Villafuerte

Reputation: 291

You have to put:

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

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

Upvotes: -11

Related Questions