Kai Kai - 16 days ago 4
AngularJS Question

Angular JS : How to pass the Response from a service to controller?

I try to handle the success/error handling from the service in the controller.

I have tried this :

Service :

.factory('AuthenticationService',
['Base64', '$http', '$cookieStore', '$rootScope',
function (Base64, $http, $cookieStore, $rootScope) {
var service = {};

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

var authdata = Base64.encode(username + ':' + password);

$rootScope.globals = {
currentUser: {
username: username,
authdata: authdata
}
};

$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
$cookieStore.put('globals', $rootScope.globals);

$http.post('http://localhost:8080/v1/login', { username: username, password: password })
.success(function (response) {
callback(response);
});
};

service.ClearCredentials = function () {
$rootScope.globals = {};
$cookieStore.remove('globals');
$http.defaults.headers.common.Authorization = 'Basic ';
};

return service;
}])


and the controller :

.controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
// reset login status
AuthenticationService.ClearCredentials();

$scope.login = function () {
$scope.dataLoading = true;
AuthenticationService.Login($scope.username, $scope.password, function (response) {
if(response.success) {
$location.path('/');
} else {
$scope.error= response.message;
$scope.dataLoading = false;
}
});
};
}]);


If I try with an alert, it only shows in the service but not in the controller.

Answer

Using promises :

.factory('AuthenticationService',
['Base64', '$http', '$cookieStore', '$rootScope', '$q', 
function (Base64, $http, $cookieStore, $rootScope, $q) {
    var service = {};

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

        var deferred = $q.defer();

        var authdata = Base64.encode(username + ':' + password);

        $rootScope.globals = {
            currentUser: {
                username: username,
                authdata: authdata
            }
        };

        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
        $cookieStore.put('globals', $rootScope.globals);

        $http.post('http://localhost:8080/v1/login', { username: username, password: password })
            .then(function (response) {
                deferred.resolve(response);
            }, function(error) {
                deferred.reject(error);
            });

        return deferred.promise;
    };

    service.ClearCredentials = function () {
        $rootScope.globals = {};
        $cookieStore.remove('globals');
        $http.defaults.headers.common.Authorization = 'Basic ';
    };

    return service;
}])

And your controller

.controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
    // reset login status
    AuthenticationService.ClearCredentials();

    $scope.login = function () {
        $scope.dataLoading = true;
        AuthenticationService.Login($scope.username, $scope.password)
            .then(function(success) {
                $location.path('/');
            }, function(error) {
                $scope.error= response.message;
                $scope.dataLoading = false;
            });
    };
}]);