Redirect to a new page with AngularJS

Question

I'm trying to develop a web page with MEAN with login system. I'm developing the front-end first. The server is starting and the index.html is loading correctly, but I'm having problem to redirect to another page after a successful login. I tried with $state.go but I need to full load a new page, I've tried with $window.location.href but it's not working and my URL is a mess.

My index.html base href is "/"

My login controller:

var app = angular.module('SantaUTIApp', []);
app.controller('loginCtrl', function($scope, $window, $timeout) {


    $scope.showGreeting = false;
    var link = "https://" + $window.location.host + "/home";
    $scope.showInvalidUserPasswordMessage = function() {
        $scope.msg="Usuario e/ou Senha inválidos.";
        $scope.showGreeting = true;
        $timeout(function(){
            $scope.showGreeting = false;
        }, 10000);
    };

    $scope.login = function(){
        if($scope.user === '1' && $scope.password === '2')
            $window.location=link;
        else
            $scope.showInvalidUserPasswordMessage();
    };

});

My angular route file:

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

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

    $stateProvider
        .state('login',{
            url:'/',
            templateUrl: 'views/index.html',
            controller: 'loginCtrl',
        })
        .state('home',{
            url: '/home',
            controller: 'homeCtrl',
            templateUrl: 'views/home/home.html'
        });

    $locationProvider.html5Mode(true);
});

After a successful login I want to go to my home page. Which is the best way to do this? Please, I've tried everything.

You will have to use window.location.href with the full url of where you want to go. That's one option. Another would be to use nested states, so you have "login" as a base state and once the user logs you send him to "app.xxx" (app.index, app.edit, etc). — yBrodsky
With $location.path("/home") I got the URL: localhost:3000/#/home and the page does not change. With $window.location I got the URL: localhost:3000/home'' and a error Cannot GET /home/. Disregard the quotation marks — Raphael Cardoso Fernandes

Aurel Tirnovanu Aurel Tirnovanu · Accepted Answer · 2017-02-13T17:43:44

In order to redirect the correct usage is

$window.location.href=link;

Here are more alternatives:

1. If you saved the login status in a service and you don't want to reload all SPA, use $location since 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.

var app = angular.module('SantaUTIApp', []);
app.controller('loginCtrl', function($scope, $location, $timeout) {


  $scope.showGreeting = false;
  var link = $location.protocol() + $location.host() + '/home';
  $scope.showInvalidUserPasswordMessage = function() {
    $scope.msg="Usuario e/ou Senha inválidos.";
    $scope.showGreeting = true;
    $timeout(function(){
        $scope.showGreeting = false;
    }, 10000);
  };

  $scope.login = function(){
    if($scope.user === '1' && $scope.password === '2')
        $location.path(link);
    else
        $scope.showInvalidUserPasswordMessage();
  };

});

2. Furthermore, you can also use the $state of Angular routing.

Replace $window with $state in your controller, then when you want the redirect, do this. As $location, will not do a full page reload.

$state.go('home');

Note: If you are still looking to use $window, then wrap it in a timeout.

$timeout(function() {
  $window.location.href= link;
});

Redirect to a new page with AngularJS

1 Answers