How to redirect from view to another view

Question

I try to make an authentication using angualrJS and php. I tested it by console.log, when the password is incorrect I get error message, and when the password is correct I don't get anything, in this case, I want to be riderected to other view, how can I do please:

app.js

app.controller('loginCtrl', function($scope, $location,$state,$http,$window){

    $scope.submit = function()
    {
        data = {
            'NomClient' : $scope.NomClient,
            'mdp' : $scope.mdp
        };

        $http.post('http://localhost/deb/login.php', data)
        .success(function(data, status, headers, config)
        {
          // $window.location.href = '#/admin';
            console.log(data);
        })
        .error(function(data, status, headers, config)
        {
            console.log('error');
        });
    }

});

login.php

 <?php  

$data = json_decode(file_get_contents("php://input"));

 $connect = mysqli_connect("localhost", "root", "", "test");  


 if(count($data) > 0)  
 { 
$NomClient=mysqli_real_escape_string($connect, $data->NomClient);
$mdp=mysqli_real_escape_string($connect, $data->mdp);


$query = 'SELECT * FROM `client` WHERE NomClient = "'.$NomClient.'" AND   mdp= "'.$mdp.'"';

$q = mysqli_query($connect , $query);

if(mysqli_num_rows($q) > 0 )
        { 
            $_SESSION["logged_in"] = true; 
            $_SESSION["naam"] = $NomClient; 
        }
        else
        {
            echo 'The username or password are incorrect!';
        }

}
 ?>

As you see, I have a comment line in app.js: // $window.location.href = '#/admin'; I put it as comment because when I put it, it redirects me to admin view however the password is incorrect.

Thanks in advance

Answer 1

With AngularJS you can use the $location service

$Location - Documentation

Try using:

$location.path("your new path here")

For an example: please refer to the following answer to another post:

https://stackoverflow.com/a/14387747/7018180

Answer 2

.success is a property of $http service so if there would be some value in data variable the $window.location is eventually going to get called.. so to improve that you can use if condition inside $http service which would check the passed username and password with the response that it would get from the service and then in if condition you can redirect it to another page.

app.service('AuthenticationService', function ($http, $window){
    this.login = function (username, password) {
        return $http({
            url: 'http://localhost/deb/login.php',
            method: 'POST',
            params: {
                NomClient : username,
                mdp : password
            }
        })
    };
});

app.controller('loginCtrl', function ($scope, $state, $http, $window, AuthenticationService, $remember) {
    $scope.submit = function()
    {
        AuthenticationService.login($scope.NomClient,$scope.mdp)
        .then(function(response) {
            if (response.data.NomClient == $scope.NomClient && response.data.mdp == $scope.mdp) 
            {
                $state.go('application.home');
            }
            else {
                alert('Credentials do not match our records. Please try again.');
            }
        })
    }
});

and instead of $window.location you can use $state.go functionality of angularJS. It would redirect your page to the specific state that would be mentioned and it would look for that state in route file and would execute that state along with its templateUrl and controller.

Answer 3

Try this code in login.php

if(mysqli_num_rows($q) > 0 )
  { 
       $_SESSION["logged_in"] = true; 
       $_SESSION["naam"] = $NomClient; 
       $result['code'] = 200;
       $result['message'] ='Logged In';
  }
  else
  {

       $result['code'] = 603;
       $result['message'] ='The username or password are incorrect!';
  }

$resultstring = json_encode($result);
$resultstring = str_replace("null",'""',$resultstring);
echo $resultstring ;
die;

And check result code in js if it is 200 then it will be in succes other wise in error.

Answer 4

Change .success\.error to .then(), Change your code like :

   $http.post('http://localhost/deb/login.php', data).then(function(response) {          
            console.log(response.data);
            $window.location.href = '#/admin';
          }, function(error) {
            console.log('error');
     });

Answer 5

Here's properly working code for your question tested properly. if you are still looking for a solution

app.js

app.controller('loginCtrl', function ($scope, $http,$state) {
    $scope.submit = function ()
    {
        $scope.data = {
            username: $scope.username,
            password: $scope.password
        }

        $http.post('http://localhost/HTML5Application/public_html/login.php', {serviceData: $scope.data})
                .success(function (data) {
                    alert(data);
                    $state.go('newState');
                })
                .error(function (data) {
                    alert("problem with service call");
                });
    };
});

login.php

    $data = json_decode(file_get_contents("php://input"));

    $connect = mysqli_connect("localhost", "root", "", "embroidery");

    if (count($data) > 0) {
        $username = mysqli_real_escape_string($connect, $data->serviceData->username);
        $password = mysqli_real_escape_string($connect, $data->serviceData->password);
        $query = 'SELECT * FROM `client` WHERE username = "' . $username . '" AND   password= "' . $password . '"';

        $q = mysqli_query($connect, $query);

        if (mysqli_num_rows($q) > 0) {
            $_SESSION["logged_in"] = true;
            $_SESSION["name"] = $username;
            echo $_SESSION["name"];
        } else {
            echo 'The username or password are incorrect!';
        }
    }
    ?>

login.html

<div class="list list-inset" ng-controller="loginCtrl">
    <label class="item item-input">
        <input type="text" placeholder="Username" required="" ng-model="username"> 
    </label> 
    <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="password"> 
    </label> 
    <button class="button button-block button-positive" name="submit" ng-click="submit()">Login</button>       
</div>

Answer 6

Thank you all, this is the solution of this question, solved by "Mr_Perfect": we have just to add a condittion in suceess:

$http.post('http://localhost/deb/login.php', data)
        .success(function(data, status, headers, config,result)
        {

            console.log(data);
            if(data.code == 200){
            $state.go('admin');
          }
        })
        .error(function(data, status, headers, config, rsult)
        {

            console.log('error');

        });

Thanks to you all