Currently working on building a MEAN stack web page with a login system. Started off by focusing on the front-end development. The server is up and running, successfully loading the index.html page. However, encountering difficulty in redirecting to another page post successful login. Attempted using $state.go for navigation, but it requires full page load. Also tried $window.location.href but faced issues and ended up with a messy URL.
The base href in my index.html is set to "/"
Below is my login controller code:
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="Invalid Username or Password.";
$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();
};
});
Angular route configuration:
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);
});
Seeking advice on the best method to navigate to the home page after a successful login. Any suggestions would be greatly appreciated as I have exhausted all options so far.