AngularJS Factory im doing it wrong - angularjs

Question

i am trying to write a Factory for my WebApiCall
so ive written this :
mod.factory('AccountService', function($http) {
var service = {};
var onError = function(response) {
if (response == '') {
return ['Timeout Occured !'];
}
var errors = [];
for (var key in response.ModelState) {
for (var i = 0; i < response.ModelState[key].length; i++) {
errors.push(response.ModelState[key][i]);
}
}
return errors;
};
var onSuccess = function(response) {
return true;
}
service.Login = function(credentials) {
$http.put('http://localhost:9239/Api/Account/', credentials).success(function(data) {
return onSuccess(response);
}).error(function (response) {
return onError(response);
});
};
return service;
});
The Controller :
mod.controller('accountCtrl', function ($scope, $http, $window, $location, ConfigService, AccountService) {
$scope.credentials = { username: '', password: '' };
$scope.Errors = [];
$scope.registerModel = { username: '', password: '', passwordrepeat: '', email: '', emailrepeat: '' };
$scope.isLoading = false;
$scope.Login = function () {
$scope.Errors = [];
$scope.isLoading = true;
AccountService.Login($scope.credentials).onSuccess(function(response) {
$window.sessionStorage.setItem('loginToken', data.SuccessMessages[0]);
if (data.SuccessMessages[1] != '') {
$window.sessionStorage.setItem('groupId', data.SuccessMessages[1]);
}
$scope.isLoading = false;
$location.path('/Home');
}).onError(function(errors) {
$scope.Errors.push(errors);
$scope.isLoading = false;
});
Ok when i Login the Login MEthod is called. But wenn the Success or Error Method from $http is called it doesnt return my onSuccess or onError function.
I think i made some mistakes did i ?

Answer 1

A few things, $http promises don't have onSuccess or onError callbacks, they're sucess and error instead. In your service you are not returning the $http promise, and then you call sucess and error on it, of course it won't work! $http calls, much like Ajax calls anywhere take place asynchronously, meaning that you cant simply return a value in the success/error callback, you can however return a promise:
service.Login = function(credentials) {
return $http.put('http://localhost:9239/Api/Account/', credentials)
};
and in your controller you could use that like:
AccountService.Login($scope.credentials).then(function(data) {//success callback
$window.sessionStorage.setItem('loginToken', data.SuccessMessages[0]);
if (data.SuccessMessages[1] != '') {
$window.sessionStorage.setItem('groupId', data.SuccessMessages[1]);
}
$scope.isLoading = false;
$location.path('/Home');
},function(errors) {//error callback
$scope.Errors.push(errors);
$scope.isLoading = false;
})
when you call then on the promise, it gets executed when the promise is resolved, the first function is success callback and the second is the error callback.