Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to redirect to another page using AngularJS?

People also ask

How to redirect to Another page in AngularJS?

Use the $location Service in AngularJS to Redirect to Another Page. The $location service is used to get the URL of the current page and change it. It can also set up a route and redirect to a new page.

What is $window in AngularJS?

The $window service in AngularJS refer to the browser window object. With reference to JavaScript, window is a global object that includes many methods like prompt, conform, alert, etc. With window object in JavaScript, there is a testability problem due to it is defined as a global variable.

Why use AngularJS?

AngularJS is a great framework for developing high-quality dynamic web applications. This is because AngularJS is feature-rich and developers do not need to depend on any third-party software to support their applications. Developers can save a lot of time and resources while working on their projects with AngularJS.


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');
            });
        }
    }
})();

You can redirect to a new URL in different ways.

  1. You can use $window which will also refresh the page
  2. 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.


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


I used the below code to redirect to new page

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

and injected $window object in my controller function.


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");
  };
}

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/"; 

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);