We Keep Coding

How include HTTP request in app.run() in ionic

I'm made android project with ionic V1. I want make app send some function before app close with Cordova event. I try use pause to send data to server but I have stuck in sending data in app.run(). This my code in app.js
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
document.addEventListener("pause", onPause, false);
});
function onPause($http) {
$http.get('https://localhost:88/web.php?tN=off&f12=123456789')
.then(function(response){
console.log(response);
}, function(error){
//there was an error fetching from the server
});
}
});
And this error from debugger
Uncaught TypeError: Cannot read property 'get' of undefined
I don't know where what wrong with this code. I used in controller.js it work correctly but in app.js it doesn't work. Please help me to solved this problem. Thanks

$http is missing is your run() parameters

Local development not possible with error: No 'Access-Control-Allow-Origin' header is present on the requested resource

I am pretty new in angularjs, and I am developing my first app. I prepared a backend Restful service in another system, which cannot be touched, and I developed my service. This the code:
var MainService = angular.module('MainService', [])
MainService.factory('MainData', ['$http', function ($http) {
var urlBase = 'http://demoint:1234/rest.oms/basvc/barest';
var MainData = {};
MainData.getData = function () {
return $http.get(urlBase + '/0/usecases?generation=true&UseCase=0.0.3550d.a6000015');
};
console.log(MainData);
return MainData;
}]);
But then I get this error on my browser:
XMLHttpRequest cannot load http://demoint:1234/rest.oms/basvc/barest/0/usecases?generation=true&UseCase=0.0.3550d.a6000015. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.
I tried to bypass the problem in these ways but without luck:
adding this option to Chrome (startup parameter):
--disable-web-security
Adding this extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
adding the config code below on my main app:
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";
}
]);
Any idea about how to solve?
Thanks in advance!
Fabio

First of all JavaScript can't grant itself permission to access another website. means using only JavaScript you cant fix this issue.You have to enable CORS in back end server.
If you just want run this only on your browser you can disable web-security in chrome. For this close all the instance of chrome and run chrome.exe --disable-web-security.
For Chrome 49 plus check the link- Chrome 49 plus --disable-web-security

Angular Cross-Origin Request CORS failure, but node http.get() returns successfully

I am trying to access an API using AngularJS. I have checked the API functionality with the following node code. This rules out that the fault lies with
var http = require("http");
url = 'http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10';
var request = http.get(url, function (response) {
var buffer = ""
response.on("data", function (chunk) {
buffer += chunk;
});
response.on("end", function (err) {
console.log(buffer);
console.log("\n");
});
});
I run my angular app with node http-server, with the following arguments
"start": "http-server --cors -a localhost -p 8000 -c-1"
And my angular controller looks as follows
app.controller('Request', function($scope, $http){
// functional URL = http://www.w3schools.com/website/Customers_JSON.php
$scope.test = "functional";
$scope.get = function(){
$http.get('http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10',{
params: {
headers: {
//'Access-Control-Allow-Origin': '*'
'Access-Control-Request-Headers' : 'access-control-allow-origin'
}
}
})
.success(function(result) {
console.log("Success", result);
$scope.result = result;
}).error(function() {
console.log("error");
});
// the above is sending a GET request rather than an OPTIONS request
};
});
The controller can parse the w3schools URL, but it consistently returns the CORS error when passed the asterank URL.
My app avails of other remedies suggested for CORS on this site (below).
Inspecting the GET requests through Firefox shows that the headers are not being added to the GET request. But beyond that I do not know how to remedy this. Help appreciated for someone learning their way through Angular.
I have tried using $http.jsonp(). The GET request executes successfully (over the network) but the angular method returns the .error() function.
var app = angular.module('sliderDemoApp', ['ngSlider', 'ngResource']);
.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

You should understand one simple thing: even though those http modules look somewhat similar, they are totally different beasts in regards to CORS.
Actually, the node.js http.get() has nothing to do with CORS. It's your server that makes a request - in the same way as your browser does when you type this URL in its location bar and command to open it. The user agents are different, yes, but the process in general is the same: a client accesses a page lying on an external server.
Now note the difference with angular's $http.get(): a client opens a page that runs a script, and this script attempts to access a page lying on an external server. In other words, this request runs in the context of another page - lying within its own domain. And unless this domain is allowed by the external server to access it in the client code, it's just not possible - that's the point of CORS, after all.
There are different workarounds: JSONP - which basically means wrapping the response into a function call - is one possible way. But it has the same key point as, well, the other workarounds - it's the external server that should allow this form of communication. Otherwise your request for JSONP is just ignored: server sends back a regular JSON, which causes an error when trying to process it as a function call.
The bottom line: unless the external server's willing to cooperate on that matter, you won't be able to use its data in your client-side application - unless you pass this data via your server (which will act like a proxy).

Asterank now allows cross origin requests to their API. You don't need to worry about these workarounds posted above any more. A simple $http.get(http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10')
will work now. No headers required.I emailed them about this issue last week and they responded and configured their server to allow all origin requests.
Exact email response from Asterank : "I just enabled CORS for Asterank (ie Access-Control-Allow-Origin *). Hope this helps!"

I was having a similar issue with CORS yesterday, I worked around it using a form, hopefully this helps.
.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
})
.controller('FormCtrl', function ($scope, $http) {
$scope.data = {
q: "test"//,
// z: "xxx"
};
$scope.submitForm = function () {
var filters = $scope.data;
var queryString ='';
for (i in filters){
queryString=queryString + i+"=" + filters[i] + "&";
}
$http.defaults.useXDomain = true;
var getData = {
method: 'GET',
url: 'https://YOUSEARCHDOMAIN/2013-01-01/search?' + queryString,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
};
console.log("posting data....");
$http(getData).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
});
}
})
<div ng-controller="FormCtrl">
<form ng-submit="submitForm()">
First names: <input type="text" name="form.firstname">
Email Address: <input type="text" ng-model="form.emailaddress">
<button>bmyutton</button>
</form>
</div>
Seems to work with the url you posted above as well..
ObjectA: 0.017DEC: 50.2413KMAG: 10.961KOI: 72.01MSTAR: 1.03PER: 0.8374903RA: 19.04529ROW: 31RPLANET: 1.38RSTAR: 1T0: 64.57439TPLANET: 1903TSTAR: 5627UPER: 0.0000015UT0: 0.00026
I should also add that in chrome you need the CORS plugin. I didn't dig into the issue quite as indepth as I should for angular. I found a base html can get around these CORS restrictions, this is just a work around until I have more time to understand the issue.

After lots of looking around. The best local solution I found for this is the npm module CORS-anywhere. Used it to create AngularJS AWS Cloudsearch Demo.

How can I prevent angularJS from squelching script errors?

On my AngularJS sample project, I know that I have a service method which SHOULD throw a JavaScript error.
Using Firebug, I confirm that a JS error is thrown when resolving a promise from a $resource (TypeError: phone.images is undefined); but, the error never appears in the Firebug console.
How can I get the resource to 'fail fast' and propagate the error up the call stack?
Here is the service code:
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
Here is the controller (which fails silently):
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
function($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
//JS error SHOULD be thrown here:
$scope.mainImageUrl = phone.images[0];
});
...
}]);
I don't want the code to fail silently! How can I fix it?
Ideally, I would like to fix it throughout the framework, rather than putting in special error handling code for each service or resource call.

You need to add the error callback to your get call:
Phone.get({phoneId: $routeParams.phoneId}, function(phone){
// Do Stuff with phone object
}, function(error) {
alert("Y U NO RETURN PHONE?");
// Handle error accordingly
});
Here is the documentation for $resource
If you'd like to generically handle errors for AJAX requests through the angular framework, then you'd probably like something like an http interceptor (Check the interceptors section). This kind of paradigm requires that all requests pass through your interceptor service to be handled in a generic fashion.

AngularJS API call error with $http GET

I'm trying to create a simple app using Angular that will consume my API. I'm using a VM to run the code, and I access it on my computer, so to call the API from my machine I can use cURL or any other HTTP client and everything works. An example:
curl -k --user damien#email.com:password https://api.my.domain.com/v1/traveler/get
And that would return a list of travelers for example. I need to "trust" the certificate as it is not valid. So on the browser at first the call would return net::ERR_INSECURE_RESPONSE, so I'm just going to the API URL and add the exception and now I don't have this issue anymore. Then I had to add basic authentication, and it seems to work. Let's see what is my code and please let me know if you see anything wrong, I'm following this tutorial that consume an external API: http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
app.js:
angular.module('TravelerApp', [
'TravelerApp.controllers',
'TravelerApp.services'
]);
services.js:
angular.module('TravelerApp.services', [])
.factory('TravelerAPIService', function($http) {
var travelerAPI = {};
$http.defaults.headers.common.Authorization = 'Basic ABC743HFEd...=';
travelerAPI.getTravelers = function() {
return $http({
method: 'GET',
url: 'https://api.my.domain.com/v1/traveler/get'
});
}
return travelerAPI;
});
Finally, the controllers.js:
angular.module('TravelerApp.controllers', [])
.controller('travelersController', function($scope, TravelerAPIService) {
$scope.travelersList = [];
TravelerAPIService.getTravelers()
.success(function(data) {
console.log('SUCCESS');
$scope.travelersList = data;
})
.error(function(data, status) {
console.log('ERROR');
$scope.data = data || "Request failed";
$scope.status = status;
});
});
The error status code is 0, and the error data is an empty string.

Precisions:
I have the same behavior with an HTTP POST query.
I am sure :
no request have been made on the server
it's angular that don't sent the query
And finally I find the answer:
Since I (and probably you) are sending on a self signed httpS server. Chrome flag it as none safe.
I fix this issue by putting the address on my browser and manually accept the certificate.
Probably related : XMLHttpRequest to a HTTPS URL with a self-signed certificate

I would suggest to use Trusted CA Signed SSL Certificate rather then Self-Signed Certificates which would solve your problem as most browsers do not accept the self signed certificates like Google Chrome,Firefox,etc.