whats wrong in this $http request in angular? - angularjs

Question

Here is the code :
(function () {
angular.module('PillApp').factory('AuthFactory',
['$q', '$timeout', '$http', 'Flash', '$state',
function ($q, $timeout, $http, Flash, $state) {
// create user variable
var user = null;
// return available functions for use in the controllers
return ({
isLoggedIn: isLoggedIn,
getUserStatus: getUserStatus,
login: login,
logout: logout,
register: register
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
function getUserStatus(callback) {
$http.get('/status/user')
// handle success
.then(function (data) {
//console.log(JSON.stringify(data));
if(data.data !== ''){
user = true;
callback(user);
} else {
user = false;
callback(user);
}
});
}
function login(userProfile) {
// create a new instance of deferred
var deferred = $q.defer();
console.log("Authentication Service - to send login to server");
// send a post request to the server
$http.post('/login',
userProfile)
// handle success
.success(function (data, status) {
console.log("Authentication response received");
if(status == 200){
getUserStatus(function(result){
if(result){
deferred.resolve();
$state.go('A');
}else{
deferred.reject();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
$state.go('A');
}
});
} else {
user = false;
Flash.clear();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
}
})
// handle error
.error(function (data) {
console.log("Authentication error - any flash messsage?");
user = false;
Flash.clear();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/logout')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function register(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
console.log("Sending registration to server");
// send a post request to the server
$http.post('/register',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status){
console.log('Registration successful', data, status);
deferred.resolve();
} else {
console.log('Registration unsuccessful', data);
Flash.closeFlash();
Flash.create('danger', "Can't register with us!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
}
})
// handle error
.error(function (data) {
console.log('Registration error', data);
Flash.clear();
Flash.create('danger', "Ooops something went wrong!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
})();
ERROR :
angular.js:14324 TypeError: $http.post(...).then is not a function
at Object.login (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/services/auth.factory.js:55:22)
at AppCtrl.vm.login (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/app.controller.js:35:25)
at fn (eval at compile (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/bower_components/angular/angular.min.js:236:285), <anonymous>:4:167)
at e (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/bower_components/angular/angular.min.js:281:195)
I tried $http.post().success also and it gives error like success is not defined
Than i tried $http.post().then also and it gives error like then is not defined
I have injected $http in a right way.it worked on localhost but during production it gives this kind of errors.

Answer 1

You need to define functions containing http post directive in this manner :
$scope.getUserCallback = function (callback) {
$http.get('/status/user')
// handle success
.then(function (data) {
//console.log(JSON.stringify(data));
if(data.data !== ''){
user = true;
callback(user);
} else {
user = false;
callback(user);
}
});
};
then you can call it from inside the script wherever required as
$scope.getUserCallback();
and from an html element like this
<my element ng-click="getUserCallback()"></my element>

Answer 2

I think the $http.post call is failing due to CORS. You may need to enable CORS or send the appropriate HTTP headers in your request. The error you are getting because the $http.post is not returning the expected object which can execute the next success or then methods.
It would work correctly on your localhost as there is no CORS restriction in local development environment.