Angular JS Redirecting to another page

Question

I am working on angular js on a login form. If user name and password is correct then it should redirect to a success page. I am displaying a message for now but got struck on how to redirect to a success page once user enter correct credentials. any help ?

LOGIN.html :

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="Controller.js"></script>
</head>
<body ng-controller="LoginCheckController">
    <h1>Login Page</h1>
    <hr />
    UserName : 
    <input type="text" ng-model="txtUname" required/><br />
    Password  :
    <input type="password" ng-model="txtPwd" required/><br />

    <input type="submit" value="Submit" ng-click="LoginCheck()" /><br />
    <!--    <button ng-click="go('/Successpage')">Submit</button>-->
    <br />
    <div ng-repeat="x in users">

        <div ng-if="txtUname === x.UserName && txtPwd === x.Password">
            You entered UserName and Password correctly.
        </div>

        <div ng-if="txtUname === '' && txtUname !== x.UserName && txtPwd !== x.Password">
            You entered UserName and Password Incorrectly.
        </div>
    </div>


CONTROLLER . js :

function LoginCheckController($scope) {

            $scope.users = [
    { UserName: 'chandra', Password: 'hello' },
    { UserName: 'Harish', Password: 'hi' },
    { UserName: 'Chinthu', Password: 'hi' },
            ];
            $scope.go = function (path) {
                $location.path("/SuccessPage");
            };                 

        }



REGISTRATION . html :


<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="RegistrationController.js"></script>
</head>

<body>
    <h1>Registration Page</h1>
    <hr />
    <div ng-app="myApp">
        UserName : 
        <input type="text" ng-model="Uname" /><br />
        New Password  :
        <input type="password" ng-model="Pwd" /><br />
        Re-enter Password  :
        <input type="password" ng-model="Pwd" /><br />

        <div ng-controller="DemoController">
            <div>
               Gender : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in options">
                </select>               
            </div>
            <br />

          Address : <br />
            <textarea rows="3" cols="20"></textarea>

            <div>
                State : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in states">
                </select> 
            </div>

            <div>
                City : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in cities">
                </select> 
            </div>       
            <input type="Submit" name="btn" value="Register" />
        </div>
    </div>
</body>
</html>


REGISTRATIONCONTROLLER . js :

angular.module('myApp', []).controller('DemoController', function ($scope) {

    $scope.options = [
      { label: 'Male' },
      { label: 'Female' }
    ];

    $scope.cities = [
      { label: 'Mahabubnagar' },
      { label: 'Ranga Reddy' },
      { label: 'Nalgonda' },
      { label: 'Vizag' },
      { label: 'Karnool' },
      { label: 'Kadapa' },
      { label: 'Chennai' },
      { label: 'abc' },
      { label: 'xyz' }
    ];

    $scope.states = [
     { label: 'Telangana' },
     { label: 'Andhrapradesh' },
     { label: 'Tamilanadu' },     
    ];

});

have you maintain route defination?

Shohel
– Shohel

2014-09-09 06:08:15 +00:00
Commented Sep 9, 2014 at 6:08 — Shohel
– Shohel, Commented Sep 9, 2014 at 6:08
no how can I do that?

Kurkula
– Kurkula

2014-09-09 06:08:49 +00:00
Commented Sep 9, 2014 at 6:08 — Kurkula
– Kurkula, Commented Sep 9, 2014 at 6:08
could you bring it in fiddle ,its really hard to read

Narek Mamikonyan
– Narek Mamikonyan

2014-09-09 06:17:59 +00:00
Commented Sep 9, 2014 at 6:17 — Narek Mamikonyan
– Narek Mamikonyan, Commented Sep 9, 2014 at 6:17

Shohel · Accepted Answer · 2014-09-09 06:32:58Z

5

Here is the plunker, I think this will help you. Thanks

http://plnkr.co/edit/XraWvTaR4fGF3Rdo6KBu?p=preview

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

answered Sep 9, 2014 at 6:32

Shohel

3,9645 gold badges41 silver badges80 bronze badges

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

Comments

SUNDARRAJAN K · Accepted Answer · 2014-09-25 13:00:12Z

0

I hope this helps

function test(username,password,$location){
if(username='admin' && password='password'){
$location.path("success page");
}
}

answered Sep 25, 2014 at 13:00

SUNDARRAJAN K

2,2952 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular JS Redirecting to another page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related