I am currently working on some project where I am writing UI code in angularjs.
I am stuck at framing the error handling.
The scenario is: I am writing some forms in angularJS. inside the controller I am making several $http calls which eventually call the servlets defined.
I need to notify the user about the success/failure of the servlets.
How can I achieve this?
Also, how can I handle the errors in this scenario?
For ex. when I submit the form below function gets executed:
`$scope.submitForm = function(form) {
console.log("--> Submitting form");
if(confirm("Are you sure to finish?")){
$http({
method : 'POST',
url : '/XMLParser',
dataType: 'JSON',
data : JSON.stringify($scope.form), //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
console.log(data);
if (data.errors) {
// Showing errors.
$scope.errorName = data.errors.name;
$scope.errorUserName = data.errors.username;
$scope.errorEmail = data.errors.email;
} else {
$scope.message = data.message;
}
alert("successful");
});
$scope.redirectToHome();
}
};`
The servlet /XMLParser will either successfully executed or may produce some errors. How can I handle those?
//Hope this could make sense
$http.get('your api url').then(success, failure);
function success(){
//your code when request respond success
};
function failure(){
//your code when request respond failure
};
Related
I am creating a registration form in AngularJS, wherein once the admin fills the form and on submit, I am doing two things: 1. Saving the data into the DB. 2. Sending an email to the person with his username and password. So on submitting my application is taking some time (around 5-7 seconds) to post the success message back on the screen. So I want to show some message while these background operations complete. I need your help as I am new to AngularJS.
createUserService.Register(obj, function(data) {
if (data.error) {
console.log("Check " + data.error);
} else {
alertify.alert("Successfully Registered");
$state.reload();
}
This is my service:
function Register(obj, callback) {
$http({
method : 'POST',
url : '/api/addUserOps',
data : obj
}).then(function(response) {
callback(response.data);
}, function(error) {
callback(error);
});
}
});
You can try this way.
Service function
function Register(obj) {
return $http({
method : 'POST',
url : '/api/addUserOps',
data : obj
});
}
Calling your function
// Trying using https://github.com/cgross/angular-busy for showing a loader here.
createUserService.Register(obj)
.then(function(data){
// stop your loader here with a success message.
})
.catch(function(error) {
// your error message here.
})
Hope you find this useful.
In my controller i want send a request using get method if $http, in that get method i want to send the sessionID in headers. Below am giving the code snippet please check.
this.surveyList = function () {
//return session;
return $http.get('http://op.1pt.mobi/V3.0/api/Survey/Surveys', {headers: { 'sessionID': $scope.sessionid}})
.then(function(response){
return response.data;
}, function(error){
return error;
});
}
but this is not working when i send this vale in backend they getting null.
So how to resolve this.
we have a issue where the api is getting called twice from angular , however it works only once when called with the POSTMAN. And here with the custom header passed to the api, the action is called twice. What could be the reason for it?
Try in this way,
$http({
method: 'GET',
url: 'http://op.1pt.mobi/V3.0/api/Survey/Surveys',
headers: {
'sessionId': $scope.sessionid
}
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs,
// or server returns response with an error status.
});
I am trying to get a $http REST GET call working in my Appgyver project working but nothing I do seems to come right, always returns an error.
Please note the angular app will be running on mobile devices eventually and then connect to my remote web service.
I've double checked that my custom API is working and returning data correctly in a number of ways, namely:
hard coded cUrl request running from sh files in terminal - Returns data and correct 200 code
Tested the API end points in both POSTMAN and Firefox's SOA client.
Putting in my test end point of http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term returns data as below:
[{"tid":"1","vid":"2","name":"ACME Ltd.","description":"","format":"filtered_html","weight":"0","parent":"0","uri":"http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term/1"},{"tid":"2","vid":"2","name":"ABC Films LTD","description":"","format":"filtered_html","weight":"0","parent":"0","uri":"http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term/2"}]
Even a simple CSRF Token request gives me errors.
Could someone possibly point out where I am going wrong here, the Appgyver site is badly documented and I have tried the Angular RESTful sample which my code below is based upon from https://docs.angularjs.org/api/ng/service/$http and https://docs.angularjs.org/api/ng/service/$http#setting-http-headers
Please note the code below is basically Angular.js using Javascript syntax (as opposed to Coffeescript), logging output follows the code
angular
.module('main')
.controller('LoginController', function($scope, supersonic, $http) {
$scope.navbarTitle = "Settings";
$scope.stoken = "Response goes here";
$scope.processLogin = function(){
var csrfToken;
steroids.logger.log("START CALL: processLogin");
// $form_login_email_address = $scope.login_email;
// $form_login_password = $scope.login_password;
$local_get = "http://somesite.com/quote-and-buy-performance/services/session/token";
$hal_get_taxterm_index = "http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term";
// $http.defaults.headers.common.contentType('application/json');
var req = {
method: 'GET',
url: $hal_get_taxterm_index,
headers: {
'Content-Type': 'application/json'
}
}
$http(req)
.success(function(data, status, headers) {
steroids.logger.log("Inside http.get() success");
}).error(function(data, status, headers){
steroids.logger.log("Inside http.get() WITH ERROR");
steroids.logger.log('data: ' + data);
steroids.logger.log('status: ' + status);
}).then(function(data, status, headers){
steroids.logger.log("Inside http.get() then");
});
steroids.logger.log("END CALL: processLogin");
}
});
Logging output from calls to steroids.logger.log
View Time Level Message
main#login 16:01:55.219 info "Inside http.get() WITH ERROR"
main#login 16:01:55.219 info "data: null"
main#login 16:01:55.219 info "status: 0"
main#login 16:01:55.64 info "END CALL: processLogin"
main#login 16:01:55.64 info "START CALL: processLogin"
Here's what I would do:
Separate out your http call into a service. This is a pretty standard way to modularize your code in angular:
angular.module('main').factory("SomeService", function($http) {
return {
get: function() {
$http({
url: "http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term",
method: "GET",
headers: {
"Content-Type": "application/json"
}
}).success(function(data, status, headers, config) {
console.log("Success!");
console.log(data);
}).error(function(data, status, headers, config) {
console.log("Error!");
console.log(status);
console.log(data);
});
}
}
})
Then to use this in your controller, just include it in your controller declaration and call get like you would a normal method:
angular.module('main').controller('LoginController', function($scope, supersonic, SomeService) {
$scope.navbarTitle = "Settings";
$scope.stoken = "Response goes here";
$scope.processLogin = function(){
var csrfToken;
steroids.logger.log("START CALL: processLogin");
SomeService.get();
steroids.logger.log("END CALL: processLogin");
}
})
Do this and then comment back with your results and we can work from there.
If your angular's app is within a certain domain, then HTTP request must be made within the same domain.
In your case, you are trying a cross domain request (a request on another domain). You must then make a cross domain request.
You can see this question.
The author uses $http.jsonp() to send cross domain requests. There migth be another way to do it.
i am trying to post my form data via service but if i am trying to get the response in console i am finding undefined can you suggest me what mistake i am committing,
i am new to angular so finding difficult to catch the issue.Here is my code
commonApp.service('CommonServices',function($http){
this.saveData=function(DataToInsert){
$http({
method :"POST",
data :DataToInsert,
url : 'myurl',
//headers :{'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(programApiResponse){
console.log(programApiResponse);
return programApiResponse;
}).error(function(programApiResponse){
return programApiResponse;
});
};
});
and my controller
$scope.makeprogram=function(){
//console.log($scope.programdata);
$scope.ProgInsResponse=CommonServices.saveData($scope.programdata);
console.log('1'+$scope.ProgInsResponse);
}
You aren't returning the promise at
this.saveData = function(DataToInsert){
$http({
...
This should probably be
this.saveData=function(DataToInsert){
return $http({
...
Then if you can add your own handlers
CommonServices.saveData($scope.programdata)
.then(...)
Last but not least if you have a half decent browser you can just log objects, don't log strings.
CommonServices.saveData($scope.programdata)
.then(function(){
console.log(arguments);
});
This is async nature issue. Try this
$scope.makeprogram=function(){
CommonServices.saveData($scope.programdata).then(function() {
console.log('1'+$scope.ProgInsResponse);
});
}
Since you are returning promise you need to wait before response comes.
I have a service where I am pulling data from server. When I click the button to send out the request to server through this service, the window freezes until I receive a response from server. Is there anything I can do to make this request asynchronous ?
Here is my service.
app.factory('service', function($http) {
return {
getLogData : function(startTime,endTime){
return $http({
url: baseURL + 'getLogData',
method: 'GET',
async: true,
cache: false,
headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
params: {'startTime': startTime , 'endTime': endTime}
});
}
};
)};
HTML.
<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />
Code
$scope.getData = function(){
service.getLogData().success(function(data){
//process data
}).error(function(e){
//show error message
});
}
While there is some argument about the pros and cons of your approach, I am thinking that the problem is answered here: AJAX call freezes browser for a bit while it gets response and executes success
To test if this in fact part of the problem, dummy up a response and serve it statically. I use Fiddler or WireShark to get the response and then save to a file like testService.json. XHR and all of it's various derivatives like $HTTP $.ajax see it as a service though the headers might be slightly different.
Use the success promise, and wrap up the log data in a set of objects that you can attach to a $scope.
So instead of having your service have a blocking method, have it maintain a list of "LogEntries".
// constructor function
var LogEntry = function() {
/*...*/
}
var logEntries = [];
// Non-blocking fetch log data
var getLogData = function() {
return $http({
url : baseURL + 'getLogData',
method : 'GET',
async : true,
cache : false,
headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
params : {'startTime' : startTime , 'endTime' : endTime}
}).success(function(data) {;
// for each log entry in data, populate logEntries
// push(new LogEntry( stuff from data ))...
};
}
Then in your controller, inject your service and reference this service's log data array so Angular will watch it and change the view correctly
$scope.logEntries = mySvc.logEntries;
Then in the HTML, simply do something over logEntries:
<p ng-repeat="logEntry in logEntries">
{{logEntry}}
</p>
use this code to config
$httpProvider.useApplyAsync(true);
var url = //Your URL;
var config = {
async:true
};
var promise= $http.get(url, config);
promise.then(
function (result)
{
return result.data;
},
function (error)
{
return error;
}
);