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.

Answer 1

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