Redirect to another HTML page in Angular JS

Question

I've written a simple Login form with no actual server. Just a hard coded login credentials. And if they credentials are matching on angular controller function then I need to show another HTML page. On '/login.html', following code is written

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="/InfoGraph/js/angular/angular.min.js" ></script>
    <script type="text/javascript" src="/InfoGraph/js/angular/angular-route.min.js" ></script>
    <script type="text/javascript" src="/InfoGraph/js/login.js" ></script>  
</head>

<body class="gray-bg" ng-app="login">

    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name">IGraph</h1>
            </div>
            <h3>Welcome to IGraph</h3>           
            <form class="m-t" role="form" name="loginToIGraph" ng-controller="LoginController as login">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Username" required="" ng-model="user.username" >
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password" >
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b" ng-click="login.loginUser(user)">Login</button>
                <a href="#"><small>Forgot password?</small></a>
                <p class="text-muted text-center"><small>Do not have an account?</small></p>
                <a class="btn btn-sm btn-white btn-block" href="register.html">Create an account</a>
            </form>           
        </div>
    </div>
</body>

</html>

And in 'login.js' the code is following :

(function(){
var app = angular.module('login',[]);

app.controller('LoginController', ['$scope','$location', function($scope,$location)
    {
        $scope.loginUser = function(user){
            if(user.username == 'demo' && user.password == 'demo'){
               $location.href('/afterLogin.html');
            }
            else{
                alert('Wrong credentials')
            }
        }

    }]);

})();

But on $location.href('/afterLogin.html'); , it does nothing. Even there is no error. What could be the cause?

you should use $window.location.href for a redirection and if you check the $location documentation : docs.angularjs.org/api/ng/service/$location, you could see that href does not exist, then use $location.path(...) but i think here you want $window.location.href — Cedric Dumont
– Cedric Dumont, Commented Mar 31, 2015 at 7:11
I would suggest you to use routes / ng-view. That would be a more "Angular way" to achieve that. — enguerranws
– enguerranws, Commented Mar 31, 2015 at 7:34
I've tried this. But there is nothing. No error and no success. the link does nothing if my credentials are correct. — user3853055
– user3853055, Commented Mar 31, 2015 at 9:10

sms · Accepted Answer · 2015-03-31 07:07:24Z

3

Can you try like this below:

 var path = "/afterLogin.html";
 window.location.href = path;

answered Mar 31, 2015 at 7:07

sms

4261 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Beri Over a year ago

This will work for sure, but in Angular is better to use their services/utils. Because you could mock those calls inside tests.

sms Over a year ago

You are correct. But putting these lines inside a function and then mocking that function by stub will also help to unit test properly. Anyway i am not sure about angularjs service for redirecting.

sms Over a year ago

Super dude. But this is pure javascript syntax. I am not sure if some proper angular services available to achieve the same.

Jairo Malanay · Accepted Answer · 2015-03-31 07:52:45Z

1

you can use the angular $window. just like sms said in previous answer for redirection.

Another way is through Routing - ngRoute or ui-router

answered Mar 31, 2015 at 7:52

Jairo Malanay

1,3479 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:13Z

0

This might help you. Redirect to new Page in AngularJS using $location

Giving proper path will help you I think.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 31, 2015 at 7:58

Reds

12 bronze badges

3 Comments

user3853055 Over a year ago

Hi @Reds , Both files exists in a same location in my project folder only. What could be the correct path.

Reds Over a year ago

may be You should try different combos of only" ." or "./" or "/." or "../"

user3853055 Over a year ago

Hey it worked. The path it required was with main project folder.

Collectives™ on Stack Overflow

Redirect to another HTML page in Angular JS

3 Answers 3

3 Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Linked

Related