Http progress function? - angularjs

$http({
url: Config.ApiURL + "/site/go",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(testimony)
}).progress(function (data, status, headers, config) { //Not sure about this line
console.log('progressing');
}).success(function (data, status, headers, config) {
console.log('success');
});
I want to display something before it successes or error, so im not sure about .progress part, i just inserted it there as an example and for you to imagine my problem.. is it possible? is there a built-in function for that?
BTW, im new to angular. TIA :)

According to some post I found on github (https://github.com/angular/angular.js/issues/1934 , see the post from 26th april 2014), you should be able to do it like that :
$http({method: 'GET', url: '/someUrl',progress:trackProgress}).then(function(result){
// handle result
});
Where tarckProgress would be a callback to call to handle the progress state.

If you want to show the progress spinner / bar, and in addition to that if you want to show something else, you can use angular-loading-bar

Related

AngularJS HTTP Post Conditional in Data or Params

Understand that for POST method, the key - Data is being used instead of Params, however if the data is being used for filtering is it possible to have conditions for these Data ?
var proxyData = {
lecturer_id: "e9d0bea0-76cb-11e8-adc0-fa7ae01bbebc",
status: ["pending", "accepted"]
};
try {
$http({
method: $scope.proxyMethod,
url: url,
data: proxyData
}).
success(function(data, status, headers, config) { }).
error(function(data, status, headers, config) { });
In the above example, I would like to filter out lecturer_id with the exact match, but with status of either "pending" or "accepted".
Is it possible to do something like GET params - "?status=pending,accepted"
Thanks in advance and sorry if my question has any misunderstanding of how AngularJS works as I am still new to it.

How to post a request and download file to disk with angular?

In angular, I want to download a text file containing a csv of userdata. Usually I have a form with a post action, but I want the user to stay on the same page, but return the csv data without any page referesh. The following is my post command:
$http({
url: "api/getUserData",
method: "POST",
data:{user_id:app.user_id}
}).success(function(data, status, headers, config) {
// data gets returned here
}).error(function(data, status, headers, config) {
$scope.status = status;
});
My problem is, the "data" that comes back from the post is a csv file. how can I get the data to actually "download" to the user's computer instead of living in the javascript? Is this even possible?
Here is the link to solution. It uses HTML5 FileSaver API to save the file as BLOB
You can do this :
Create temporary anchor ,
encode, your data & name your file using download attribute,
and then, fire a click event on it.
finally, remove the inserted element .
$http({
url: "api/getUserData",
method: "POST",
data:{user_id:app.user_id}
}).success(function(data, status, headers, config) {
// data gets returned here
var anchor = angular.element('<a/>');
angular.element(document.body).append(anchor); // Attach to document
anchor.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
target: '_blank',
download: 'myFileName.csv'
})[0].click(); // fire a click event.
anchor.remove(); // Clean it now ...
}).error(function(data, status, headers, config) {
$scope.status = status;
});

Sending data from form to POST request in Angular

I want to make a POST request using Angular. I am using ng-submit to submit the form to the controller where I access the factory to make the request using:
$http.post('/droplets', data)
I need the data from the form fields to put in the "data" variable above to send to my API but I can't work out how to do this when it is more than one field. How is this done?
Try this...
$http({
url: '/droplets',
method: "POST",
data: JSON.stringify({application:app, from:data1, to:data2}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
Ref:https://docs.angularjs.org/api/ng/service/$http

"Must specify grant_type field" error when getting Oauth2 token

I've got a simple node.js backend build on Restify with OAuth2 authorization (restify-oauth2 plugin).
I've got a problem requesting a token. When I call POST method with my REST client, everything works correctly and I get access_token and token_type.
The problem occurs when I try to do the same thing in my frontend aplication made in Angular.
Here's my code:
var req = {
method: 'POST',
url: 'http://localhost:8080/token',
headers: headers,
data: {},
params: {grant_type: "client_credentials"}
};
$http(req).success(function(data, status, headers, config){
console.log('success');
}).error(function(data, status, headers, config){
console.log('error');
});
So as you can see, grant_type parameter is provided. But still the server responds with:
{"error":"invalid_request","error_description":"Must specify grant_type field."}
And here's devtools screenshot:
How do I need to change my request to make it work?
I finally solved it. The thing is that grant_type field must be passed inside a request body, not in the parameters.
Working request code:
var req = {
method: 'POST',
url: 'http://localhost:8080/token',
headers: headers,
data: "grant_type=client_credentials"
};
$http(req).success(function(data, status, headers, config){
console.log('success');
}).error(function(data, status, headers, config){
console.log('error');
});

Paypal API with angular and cURL

Currently I'm working with paypal API and flowing with this document make your first call.
When I sent a request through angular $http to paypal, I got a Status Code 415. It's seems like I missed something, does anyone can help me? :)
here is my code
$http({
url: 'https://api.sandbox.paypal.com/v1/oauth2/token',
method: 'POST',
headers: {'Content-Type': 'application/json',
'auth-token': 'EOJ2S-Z6OoN_le_KS1d75wsZ6y0SFdVsY9183IvxFyZp EClusMEUk8e9ihI7ZdVLF5cZ6y0SFdVsY9183IvxFyZp',
'Accept-Language': 'en_US'
},
data: { 'grant_type': 'client_credentials' }
}).success(function (data, status, headers, config) {
console.log(data)
}).error(function (data, status, headers, config) {
console.log(data)
});
Referring to the Paypal doc
Tip: If you're using Windows, we recommend you make cURL calls using a
Bash shell. If you're not using cURL calls, set the content-type to
application/x-www-form-urlencoded for this request.
Try set the content_type as application/x-www-form-urlencoded

Resources