AngularJS disable button after logging in

Question

html:

<button class="submit" ng-disabled="dataloading" ng-class="{'vloader':newclass}" type="submit" flex="none"></button>

controller:

loginModule.controller("loginController", ['$window', '$rootScope', '$scope', '$location', 'authenticationService', function($window, $rootScope, $scope, $location, authenticationService){
    $scope.newclass = false;
    $scope.login = function(){
        if($scope.form_login.$invalid){
            return false;
        }else{
            $scope.newclass = true;
            $scope.dataloading = true;
            authenticationService.login($scope.username, $scope.password, function(response){
                if(response.data.status_code == 200){
                    $window.location.href = 'view/home.html';
                }
            });
        }
    };
}]);

service:

loginModule.factory('authenticationService', ['$http', '$cookieStore', '$rootScope', '$timeout', function($http, $cookieStore, $rootScope, $timeout){

    var service = {};

    service.login = function(username, password, callback){

        $http({
            method: 'POST',
            url: 'services/login',
            data: {usrname: username, password: password}
        }).then(function(response){
            callback(response);
        }, 
        function(response){
            alert('error');

 //need to set newclass and dataloading when http error occurs here ??

        })
    }
    return service;
}])

I'm trying to do a login page with angular, the variables newclass and dataloading above are to change the class and to disable button after submitting form. I have some questions here

I don't know how to change the value of newclass and dataloading if http error occurs (there is no way to access these two variables in the comment line in service).
How should I encode json data (username and password) when sending them?

score 0 · Accepted Answer · edited May 23 '17 at 12:04

For point 1:

In your callback include an 'err' parameter, and when an error occurs in the service, send that as the response.

controller:

loginModule.controller("loginController", ['$window', '$rootScope', '$scope', '$location', 'authenticationService', function($window, $rootScope, $scope, $location, authenticationService){
    $scope.newclass = false;
    $scope.login = function(){
        if($scope.form_login.$invalid){
            return false;
        }else{
            $scope.newclass = true;
            $scope.dataloading = true;
            authenticationService.login($scope.username, $scope.password, function(err, response){
                if(err) {
                  // Do Stuff
                }
                if(response.data.status_code == 200){
                    $window.location.href = 'view/home.html';
                }
            });
        }
    };
}]);

service:

loginModule.factory('authenticationService', ['$http', '$cookieStore', '$rootScope', '$timeout', function($http, $cookieStore, $rootScope, $timeout){

    var service = {};

    service.login = function(username, password, callback){

        $http({
            method: 'POST',
            url: 'services/login',
            data: {usrname: username, password: password}
        }).then(function(response){
            callback(null, response);
        }, 
        function(response){
            alert('error');
            callback(response);

 //need to set newclass and dataloading when http error occurs here ??

        })
    }
    return service;
}])

For point 2 please check this answer

thanks for you answer, but I am confused, in the callback function, I'm gonna do something only when there is no error status of the response. So, there should not be a callback when http error occurs (second function after .then) ? — vincentf, Jan 17 '16 at 09:16
you should not do something in the service, error or success send the response to the controller and handle it from there. And in callbacks the convention is to send the 'err' as the first parameter. And when an error occurs in your service you call the callback with the error object only so in you controller you can check if there is an error object and do whatever you wish to do. A better approach however would be to use promises. — war1oc, Jan 17 '16 at 09:19

AngularJS disable button after logging in

1 Answers1