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.
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.
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.
$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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With