How to redirect to another page using AngularJS?

Question

I am using ajax call to perform functionality in a service file and if the response is successful, I want to redirect the page to another url. Currently, I am doing this by plain JS code window.location = response['message'];. But I need to replace it with AngularJS code. I have looked various solutions on stackoverflow, they used $location. But I am new to AngularJS and having trouble to implement it.

$http({
            url: RootURL+'app-code/common.service.php',
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            dataType: 'json',
            data:data + '&method=signin'

        }).success(function (response) {

            console.log(response);

            if (response['code'] == '420') {

                $scope.message = response['message'];
                $scope.loginPassword = '';
            }
            else if (response['code'] != '200'){

                $scope.message = response['message'];
                $scope.loginPassword = '';
            }
            else {
                window.location = response['message'];
            }
            //  $scope.users = data.users;    // assign  $scope.persons here as promise is resolved here
        })

Why do you need to use angular for that? Any specific reason? document.location is the proper way and probably more efficient than the angular way — casraf
– casraf, Commented Jan 14, 2015 at 11:31

Atomic Star · Accepted Answer · 2015-01-15 09:11:24Z

236

You can use Angular $window:

$window.location.href = '/index.html';

Example usage in a contoller:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('LoginCtrl', LoginCtrl);

    LoginCtrl.$inject = ['$window', 'loginSrv', 'notify'];

    function LoginCtrl($window, loginSrv, notify) {
        /* jshint validthis:true */
        var vm = this;
        vm.validateUser = function () {
             loginSrv.validateLogin(vm.username, vm.password).then(function (data) {          
                if (data.isValidUser) {    
                    $window.location.href = '/index.html';
                }
                else
                    alert('Login incorrect');
            });
        }
    }
})();

edited Jan 15, 2015 at 9:11

answered Jan 14, 2015 at 11:33

Atomic Star

5,5356 gold badges42 silver badges48 bronze badges

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

5 Comments

Farjad Hasan Over a year ago

I have used $window.location.href but it gives an error of undefined function $window.location. Do I need to include any dependency for this?

Atomic Star Over a year ago

No, but you may need to inject $window into your controller. See my edited answer.

Junaid Over a year ago

Its window.location.href not $window.location.href

Ben Over a year ago

@user3623224 - it's not, actually ;)

Mikel Bitson Over a year ago

@Junaid window.location.href is for the traditional window object, $window.location.href is for the AngularJS $window object, here: docs.angularjs.org/api/ng/service/$window

Cristi Berceanu · Accepted Answer · 2015-01-14 11:37:15Z

123

You can redirect to a new URL in different ways.

You can use $window which will also refresh the page
You can "stay inside" the single page app and use $location in which case you can choose between $location.path(YOUR_URL); or $location.url(YOUR_URL);. So the basic difference between the 2 methods is that $location.url() also affects get parameters whilst $location.path() does not.

I would recommend reading the docs on $location and $window so you get a better grasp on the differences between them.

answered Jan 14, 2015 at 11:37

Cristi Berceanu

1,6931 gold badge10 silver badges12 bronze badges

Comments

sudhansu63 · Accepted Answer · 2015-05-28 05:20:26Z

16

$location.path('/configuration/streaming'); this will work... inject the location service in controller

edited May 28, 2015 at 5:20

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

answered May 28, 2015 at 4:55

user2266928

4755 silver badges3 bronze badges

Comments

Sanchi Girotra · Accepted Answer · 2015-06-12 06:10:39Z

13

I used the below code to redirect to new page

$window.location.href = '/foldername/page.html';

and injected $window object in my controller function.

answered Jun 12, 2015 at 6:10

Sanchi Girotra

1,38614 silver badges13 bronze badges

Comments

Anil Singh · Accepted Answer · 2015-01-14 11:37:04Z

It might help you!!

The AngularJs code-sample

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

  // For any unmatched url, send to /index
  $urlRouterProvider.otherwise("/login");

  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "login.html",
      controller: "LoginCheckController"
    })
    .state('SuccessPage', {
      url: "/SuccessPage",
      templateUrl: "SuccessPage.html",
      //controller: "LoginCheckController"
    });
});

app.controller('LoginCheckController', ['$scope', '$location', LoginCheckController]);

function LoginCheckController($scope, $location) {

  $scope.users = [{
    UserName: 'chandra',
    Password: 'hello'
  }, {
    UserName: 'Harish',
    Password: 'hi'
  }, {
    UserName: 'Chinthu',
    Password: 'hi'
  }];

  $scope.LoginCheck = function() {
    $location.path("SuccessPage");
  };

  $scope.go = function(path) {
    $location.path("/SuccessPage");
  };
}

Vignesh Subramanian · Accepted Answer · 2018-03-09 18:17:56Z

5

I faced issues in redirecting to a different page in an angular app as well

You can add the $window as Ewald has suggested in his answer, or if you don't want to add the $window, just add an timeout and it will work!

setTimeout(function () {
        window.location.href = "http://whereeveryouwant.com";
    }, 500);

answered Mar 9, 2018 at 18:17

Vignesh Subramanian

7,31915 gold badges98 silver badges161 bronze badges

Comments

double-beep · Accepted Answer · 2020-01-27 16:20:32Z

5

In AngularJS you can redirect your form (on submit) to other page by using window.location.href=''; like below:

postData(email){
    if (email=='undefined') {
      this.Utils.showToast('Invalid Email');
    } else {
      var origin = 'Dubai';
      this.download.postEmail(email, origin).then(data => { 
           ...
      });
      window.location.href = "https://www.thesoftdesign.com/";      
    }
  }

Simply try this:

window.location.href = "https://www.thesoftdesign.com/";

edited Jan 27, 2020 at 16:20

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Apr 10, 2018 at 6:56

Rizwan

4,5232 gold badges31 silver badges23 bronze badges

Comments

raghavsood33 · Accepted Answer · 2016-04-05 17:09:02Z

2

The simple way I use is

app.controller("Back2Square1Controller", function($scope, $location) {
    window.location.assign(basePath + "/index.html");
});

answered Apr 5, 2016 at 17:09

raghavsood33

7787 silver badges18 bronze badges

Comments

gsalgadotoledo · Accepted Answer · 2016-08-19 16:05:32Z

A good way to do this is using $state.go('statename', {params...}) is faster and more friendly for user experience in cases when you don't have to reload and bootsraping whole app config and stuff

(function() {
    'use strict';

    angular
        .module('app.appcode')
        .controller('YourController', YourController);

    YourController.$inject = ['rootURL', '$scope', '$state', '$http'];

    function YourController(rootURL, $scope, $state, $http) {

        $http({
                url: rootURL + 'app-code/common.service.php',
                method: "POST",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                dataType: 'json',
                data:data + '&method=signin'

            }).success(function (response) {
                if (response['code'] == '420') {

                    $scope.message = response['message'];
                    $scope.loginPassword = '';
                } else if (response['code'] != '200') {

                    $scope.message = response['message'];
                    $scope.loginPassword = '';
                } else {
                    // $state.go('home'); // select here the route that you want to redirect
                    $state.go(response['state']); // response['state'] should be a route on your app.routes
                }
            })
    }

});

// routes

(function() {
    'use strict';

    angular
        .module('app')
        .config(routes);

    routes.$inject = [
        '$stateProvider',
        '$urlRouterProvider'
    ];

    function routes($stateProvider, $urlRouterProvider) {
        /**
         * Default path for any unmatched url
        */
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/app/home/home.html',
                controller: 'Home'
            })
            .state('login', {
                url: '/login',
                templateUrl: '/app/login/login.html',
                controller: 'YourController'
            })
            // ... more routes .state
   }

})();

Orestis Zekai · Accepted Answer · 2019-12-02 14:15:30Z

1

Using location.href="./index.html"

or create scope $window

and using $window.location.href="./index.html"

edited Dec 2, 2019 at 14:15

Orestis Zekai

9221 gold badge15 silver badges31 bronze badges

answered Dec 2, 2019 at 13:22

shashank raveendran

112 bronze badges

Comments

Ruben.sar · Accepted Answer · 2015-09-03 13:58:18Z

0

 (function () {
"use strict";
angular.module("myApp")
       .controller("LoginCtrl", LoginCtrl);

function LoginCtrl($scope, $log, loginSrv, notify) {

    $scope.validateUser = function () {
        loginSrv.validateLogin($scope.username, $scope.password)
            .then(function (data) {
                if (data.isValidUser) {
                    window.location.href = '/index.html';
                }
                else {
                    $log.error("error handler message");
                }
            })
    }
} }());

edited Sep 3, 2015 at 13:58

answered Sep 3, 2015 at 13:50

Ruben.sar

3863 silver badges12 bronze badges

Comments

Nour Lababidi · Accepted Answer · 2018-01-17 02:04:03Z

0

If you want to use a link then: in the html have:

<button type="button" id="btnOpenLine" class="btn btn-default btn-sm" ng-click="orderMaster.openLineItems()">Order Line Items</button>

in the typescript file

public openLineItems() {
if (this.$stateParams.id == 0) {
    this.Flash.create('warning', "Need to save order!", 3000);
    return
}
this.$window.open('#/orderLineitems/' + this.$stateParams.id);

}

I hope you see this example helpful as it was for me along with the other answers.

answered Jan 17, 2018 at 2:04

Nour Lababidi

4444 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to redirect to another page using AngularJS?

12 Answers 12

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related