AngularJS [Ionic] - Google apis XMLHttpRequest cannot load - angularjs

I would like get the json data from Google Api but with get method and jsonp method this is not work.
Her is my code :
$http({
method: 'get',
url: 'https://maps.googleapis.com/maps/api/place/search/json?location=46.2030350,6.1522080&radius=500&types=restaurant&sensor=false&key=MY_KEY&callback=?'
}).then(function successCallback(response,data) {
console.log(data)
}, function errorCallback(response) {
console.log('nope')
});
I'have XMLHttpRequest cannot load.

This is mostly like you are trying to run the file without a server directly via browser. You would need either xampp or other webserver.
OR just install python 2.7 and use the following command from where your project files are location python -m SimpleHTTPServer 8000 and then navigate to localhost:8000

Related

Send data from nodejs to angularjs

In WebStorm, can I run Angular and Node in the same project? Is there a project template for this?
i want to send an array from nodejs route to angularjs
Thank you!
this is my code
conroller.js
$http({
method: 'GET',
url: '/Profil'
}).then(function (success){
console.log("i get the data");
$scope.items=success;
},function (error){
});
Nodejs file :
personne1={FirstName:"a", contry:"usa",LastName:"sfn"};
personne2={FirstName:"b", contry:"usa",LastName:"sfn"};
personne3={FirstName:"x", contry:"usa",LastName:"sfn"};
list=[personne1,personne2,personne3];
console.log("hello from profil");
res.render('Profil',{items:list});
Angular is a frontend JavaScript library. NodeJS is a runtime environment using Chrome's V8 engine for your backend. Using them together is quite possible. One such example is a MEAN stack (MongoDB, Express, Angular, Node).
To get started in Webstorm, Jetbrains has a help page. There is also a starter that you can grab from Github.
Happy coding!

Angular with wordpress jwt auth

I'm trying to make wordpress as a backend to my angularjs app, so I'm using the plugin rest-api with the jwt-auth
so when trying to login I get the following error
XMLHttpRequest cannot load http://localhost/back/wp-json/jwt-auth/v1/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://imider.ma' is therefore not allowed access. The response had HTTP status code 500.
I know i have to add CROS access, but I'm not familiar with wordpress, so any help?
https://docs.google.com/document/d/17zgUHZrvL5KVG2yKQE8NWgxNZn6V08xr65DBox5WVZ0/edit?usp=sharing
here is my tutorial of how to access the api
then you can use this to get the token
$http({
method:'post',
url:'',
data: {
username: '',
password: ''
}
}).then(function(results){
console.log(results);
})
then you can use this
$http({
method:'get',
url:'',
headers: { 'Authorization': 'Bearer <myTokenId>' }
}).then(function(results){
console.log(results);
})
I created a video detailing the process of installing and setting up the plugin. If you follow the steps I outlined there you should be good.
https://youtu.be/Mp7T7x1oxDk
The idea is that you also need to modify .htaccess and wp-config.php to make the plugin work with the existing API endpoints as well.
Just by installing the plugin and adding a SECRET_KEY, used to sign the token will make the JWT setup work but it will not allow you to use the tokens generated through that API with the existing REST API endpoints.

Angular & Ionic, $http not working in real device Android

I am working on ionic application and using $http for get the data from web service. I have tested and its working on browser perfectly but i don't know why its not working on my android mobile, it just keep processing and after 3 to 5 mins it shows:
ionic.bundle.js:25000 POST http://xyz-domain.com/api/ net::ERR_CONNECTION_TIMED_OUT
Even i have installed cordova-plugin-whitelist plugin but still getting same.
My Code:
var ApiURL = 'http://xyz-domain.com/api/';
$http({
url: ApiURL,
method: 'POST',
data: 'action=activate&app_secret=123456',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res){
alert(res);
});
Can any one please tell me how i can solve this issue ?
Thanks
This might be the case that your white list plugin and android platform version are not compatible.Happened to me also.Updating the platform and the plugin resolved the issue.Also can you alert the data, status, headers, config that are returned by the service.

In Angular project reference to php script give 404 (Not Found) locally, but works on live site

I'm new to Angular and I'm using Yeoman for scaffolding and Grunt for builds. I'm attempting a post to a php script with the following code:
$http({
method : 'POST',
url : '/components/contact/test.php',
data : $.param($scope.user), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
});
When I run this on my local server I get the following error
POST http://localhost:9000/components/contact/test.php 404 (Not Found)
How ever when I do a build and push to my web site it does find the php script (I have checked and it is there locally). I tried a number of different variations on the file path and none seem to work. Can anyone explain what's going on here?

angularJS $http.get() success callback not be called on cross domain

I am developing a small application use angularJS. The html pages are local file which will not deploy on web server. I defined a service module which will call the remote webapi to get the json data, however my success callback not be invoked.
$http({ method: 'GET', url: remoteServiceUri }).
success(function (data, status) {
var response = data;
}).
error(function (data, status) {
var error = data;
});
it always call into the error method. how can I resolve this issue please?
I can confirm that the service api work fine, as I tried deploy the page and webapi on the same site, in this case, it works.
is this caused by the cross domain or any configuration required?
Thanks.
You need to configure your remote web service to handle the preflight OPTIONS request.
Your web service must add the following headers to the response of the preflight OPTIONS request as well as the actual request:
{
"Access-Control-Allow-Origin": "*",
"Access-Control-Expose-Headers": "Content-Type",
"Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
}
You can find details about what which headers are required, and what do they mean here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
If you are using Apache, you could use proxypass to redirect requests. This way your angular app talks "locally" with your apache server, and it will pass the request to a different domain.
For example, in your httpd.conf set:
ProxyPass /foo http://foo.example.com/bar
In your angular app call
$http({ method: 'GET', url: "/foo/action" }).then(...);
Your apache will translate "/foo/action" to "http://foo.example.com/bar/action".
Bye bye cross domain issues!
For more info, see apache proxy module

Resources