The factory sends data to the server and its processed correctly but after that the ".then" in the controller is not being called below.
Kindly let me know why the "then" part is not being executed in the controller here after the successful ajax call.
factory
myapp.factory('startCampFactory',function($http,$q,$rootScope){
return {
startNewCampaign : function(){
var e = $("input#email");
var email = e.val();
var campname = $("input#campaignname").val();
var about = $("textarea#about").val();
var tamt = $("input#targetamount").val();
var edate = $("input#enddate").val();
var invitees = $("input#invitees").val();
var file_data = $("#file").prop("files")[0];
var form_data = new FormData();
form_data.append("file",file_data);
form_data.append("email",email);
form_data.append("campaignname",campname);
form_data.append("about",about);
form_data.append("targetamount",tamt);
form_data.append("enddate",edate);
form_data.append("invitees",invitees);
console.log(email+about+campname);
var deferred = $q.defer();
$.ajax({
type:'POST',
url: "http://localhost:8080/startcampaign",
data:form_data,
contentType:false,
processData:false,
cache:false,
dataType:"json",
success:function(msg,status)
{
//if(status=="success")
deferred.resolve("success");
$rootScope.$apply();
},
error:function()
{
deferred.reject();
$rootScope.$apply();
}
});
return deferred.promise;
}
}
});
conrtoller
function startCampCtrl($scope,startCampFactory)
{
$scope.startcamp = function(){
$("#submit").prop('disabled',true);
startCampFactory.startNewCampaign().then(function(d){
alert("here");
var temp = "<div class=\"alert alert-dismissable alert-success\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button> <strong>Campaign Saved successfully</strong></div>";
$(temp).prependTo("#startcamp");
$("#submit").prop('disabled',false);
$("input#campaignname").val('');
$("textarea#about").val('');
$("input#targetamount").val('');
$("input#enddate").val('');
$("input#invitees").val('');
$("input#file").val('');
},
function(){//On error
var temp = "<div class=\"alert alert-dismissable alert-warning\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button> <strong>Campaign could not be saved, please try again</strong></div>";
$(temp).prependTo("#startcamp");
$("#submit").prop('disabled',false);
});
}
}
You're using $.ajax() to trigger the call. The correct way to do it is to use the $http service. When a call is made through that service an $apply is automatically trigerred , and all your promises will get executed in that $apply cycle.
If you want to trigger the promises from your success function inside the $.ajax() call,
I suppose you can do it inside an $apply cycle:
.....
success:function(msg,status){
$rootScope.$apply( function() {
deferred.resolve("success");
});
}
....
Here is the working fiddle with correct way to invoke promise
Related
I have created the service below.
app.factory('userProfileFactory', ['FBDB', 'searchParam', function(FBDB, searchParam) {
var personalKey;
return {
userProfile: function(searchEmail) {
var deferred = $q.defer();
var FBref = new Firebase(FBDB).child('items');
var promise = FBref.orderByChild('email')
.startAt(searchEmail)
.endAt(searchEmail)
.on('value', function(snapshot) {
var data = snapshot.val();
personalKey = Object.keys(data)[0];
deferred.resolve(personalKey);
});
return deferred.promise;
}
};
}]);
My Controller is as below. The issue is that it takes a moment for results to be returned. So when the $save function is called outside factory function, it reports an 'undefined variable'. How can I make it work when $save is outside?
app.controller('profileCtrl', ['userProfileFactory', 'FBDB', '$firebaseArray', function(userProfileFactory, FBDB, $firebaseArray) {
var FBref = new Firebase(FBDB).child('items');
userProfileFactory.userProfile().then(function(res){
var personalKey = res;
item.personalKey = res;
//$firebaseArray(FBref)$save(item); It works here. But moved this from here...
})
$firebaseArray(FBref)$save(item); //...to here. It does not work.
}]);
In your code, the line:
$firebaseArray(FBref)$save(item);
will execute before the resolve function:
function(res){
var personalKey = res;
item.personalKey = res;
}
The resolve function waits for the userProfileFactory.userProfile() promise to resolve (data to be returned) before executing, whereas the firebase.save line does not. You need to put it back inside of the then(resolve) function.
I have a variable this.eligible which I would like to assign to the value of a returned promise instead of the actual promise object.
userService
this.eligible = this.sweepstakesService.checkUser(data);
sweepstakesService
checkUser({profileId}) {
var deferred = this.$q.defer();
var id = profileId.replace(/[{}]/g, "");
this.$q.when(this.getGuid(id)
.then(guid => this.determineEligibility(guid))
.catch(this.handleError))
.then(function(data){
deferred.resolve(data);
});
return deferred.promise;
}
getGuid(profileId){
return this.resourcesService.guid.save({id:profileId}).$promise.then(data => data.guid);
}
determineEligibility(response){
return this.resourcesService.eligibility.save({id:response}).$promise.then(data => data.isEligible);
}
handleError(response){
console.log(response);
}
Currently I'm returning Promise{$$state: Object} instead of the actual resolved value.
In order to access the result of a promise, you need to provide a callback to the then method on the promise object, which will be called asynchronously as soon as the result is available.
this.sweepstakesService.checkUser(data)
.then(function(value){
this.eligible = value;
});
When you're using promise, you're performing some asynchronous request, so you have to pass some callback function in order to retrieve your data, and wait for it.
You can use the $q.defer() promise manager, from the deferred API.
$q.defer() get 2 methods :
resolve(value) : which resolve our associated promise, by giving her the final value
reject(reason) : which resolve an promise error.
Don't forget that you are doing some asynchronous work...
Moreover, a good tips can be to save the current context into a variable, in order to bind your data.
Controller
(function(){
function Controller($scope, Service) {
//Save the current context of our controller
var self = this;
self.success = '';
self.fail = '';
//Declare our promise
var promise1 = Service.get(2);
var promise2 = Service.get(6);
promise1.then(function(response){
//Retrieve our response and set it to our success variable
//We use self as our Controller context
self.success = response;
}).catch(function(error){
self.success = error;
});
promise2.then(function(response){
self.fail = response;
}).catch(function(error){
//Retrieve our error and set it to our fail variable
self.fail = error;
});
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
Service
(function(){
function Service($http, $q) {
function get(n){
//using $q.defer() from deferred API
var defer = $q.defer();
//Simulate latency
setTimeout(function(){
n < 3
? defer.resolve(n)
: defer.reject('Error');
}, 1500);
//Return our promise
return defer.promise;
}
return {
get: get
}
}
angular
.module('app')
.factory('Service', Service);
})();
Then, you can instantiate your controller by using the controllerAs syntax.
HTML
<body ng-app='app' ng-controller='ctrl as self'>
<div>Success : {{self.success}}</div>
<div>Fail : {{self.fail}}</div>
</body>
You can see an example on this Working Plunker
I havea factory call HTTP end point to fetch user:
.factory('me', function($resource, VAS_API_URL, $q) {
return {
getUser: function() {
var deferred = $q.defer();
var url = VAS_API_URL + 'api/me';
$resource(url)
.get(function(user) {
deferred.resolve(user);
}, function(response) {
deferred.reject(response);
});
return deferred.promise;
}
};
})
I use this factory in many controllers and, i bind the data to the DOM successfully, but at times i want to use the data returned from the factory in my controller like to save the user name with a notification so i had to do the following:
.controller('createNotificationCtrl', function($scope, VAS_API_URL, me) {
var Burl = VAS_API_URL + 'api/notification';
$scope.profile = me.getUser();
$scope.profile.then(
function(user) {
$scope.owner = user;
$scope.item = {};
$scope.item.message = $scope.message;
$scope.item.owner = $scope.owner.displayName;
},
function(response) {
console.log(response);
}
);
})
I had to creat $scope.item = {}; in the factory call so i could get the displayName then send the object to save a notification but what if i want to save also another filed from another factory. How it could be done?
The factory should create the object and hold it as a state.
The controller's should use the reference from the factory and update it for everyone.
factory code sample:
this.stateObj = {};
....
....
this.getUser = function(){
var promise = $http.get(url);
promise.then(function(res){
// update stateObj
});
return promise;
}
ctrl code sample:
factory.getUser().then(function(res){
$scope.stateObj = factory.getStateObj();
});
I'm using &http in angular js to make REST calls. And when I make a new call, I want to dismiss the previous call. So I wrap the data call in the service and call the service in the controller. And I'm using the global parameter to save the last call object. So whenever I call the function getsth(), it will replace the lastcall with the new one. But when I debug, it did replace the lastcall with new one, but the previous then still triggers. One solution is the cancel the previous call and I tried it works. But my question is can I overwrite the $http object so that I don't have to handle it. Thanks
Controller:
var lastCall;
$scope.getsth = function(){
lastcall = service.datacall();
lastcall.then()
}
Service:
service.datacall = function(){
var promises = [];
promises.push($http({url:method...}).then(function))
return $q.all(promises);
}
This blogpost explains your use-case pretty well:
http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx
app.factory("movies", function($http, $q){
var getById = function(id){
var canceller = $q.defer();
var cancel = function(reason){
canceller.resolve(reason);
};
var promise =
$http.get("/api/movies/slow/" + id, { timeout: canceller.promise})
.then(function(response){
return response.data;
});
return {
promise: promise,
cancel: cancel
};
};
return {
getById: getById
};
});
app.controller("mainController", function($scope, movies) {
$scope.movies = [];
$scope.requests = [];
$scope.id = 1;
$scope.start = function(){
var request = movies.getById($scope.id++);
$scope.requests.push(request);
request.promise.then(function(movie){
$scope.movies.push(movie);
clearRequest(request);
}, function(reason){
console.log(reason);
});
};
$scope.cancel = function(request){
request.cancel("User cancelled");
clearRequest(request);
};
var clearRequest = function(request){
$scope.requests.splice($scope.requests.indexOf(request), 1);
};
});
I am having a method in my service as below.
module.service('Service', function($state, $rootScope) {
var getRemoteItems = function(page, displayLimit) {
var defferer = $q.defer()
var query = new Parse.Query("Item");
query.limit(displayLimit);
query.skip(page * displayLimit);
query.descending("createdAt");
var items = [];
query.find({
success: function(results) {
//process results
return results;
},
error: function(e) {
return null;
}
});
}
}
Although it's working, I am trying to make changes so that in the controller which calls this method, can use success and failure checks instead of doing it in the service method.
I am not able to understand how to use promises in this example. I am expecting somehting like below.
Service.getRemotItems(1,10).then()...error()..
Please excuse me for any syntax issues in the example as I am new to Angular.
You've already created the promise with $q.defer() you just need to resolve/reject it in the success & error callbacks
module.service('Service', function($state, $rootScope, $q) {
var getRemoteItems = function(page, displayLimit) {
var deferred = $q.defer();
var query = new Parse.Query("Item");
query.limit(displayLimit);
query.skip(page * displayLimit);
query.descending("createdAt");
var items = [];
query.find({
success: function(results) {
deferred.resolve(results);
},
error: function(e) {
deferred.reject(e);
}
});
return deferred.promise;
}
}