In my angular application I have the following controller (I have deleted some methods due privacy policy):
.controller('ArticleCtrl', ['$http', '$scope', '$location', '$localStorage', '$q', '$templateCache', 'authService',
'uploaderService', 'settings',
function($http, $scope, $location, $localStorage, $q, $templateCache, authService, uploaderService, settings) {
$scope.isAuth = authService.checkAuthStatus() || false;
if ($scope.isAuth == false) {
$location.path('/signin');
}
$scope.username = $localStorage.authStatus.userName;
$scope.getCompany = function(id) {
$http.get(settings.apiBaseUri + '/app/' + id, {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
}
})
.success(function(response) {
$scope.company = response;
$scope.company.Email = $scope.username;
})
.error(function(data, status, headers, config) {
console.log('operation failed, status: ' + data);
$location.path('/signin');
});
$scope.$apply();
};
if ($scope.isAuth == true) {
$scope.company = $localStorage.selectedCompany;
$templateCache.removeAll();
$scope.getCompany($localStorage.selectedCompany.Id);
}
}
]);
I have spend a lot of time, but still I don't understand why does only this contoller gets cached (other controllers were made via copy-paste).
But when this method is called for the first time: all is ok, in debugger I see that it goes to server via GET method, but when I refresh the page, and then go again to this controller - in Firefox and IE I see that there are no new requests to the server. But why? Only when I refresh the page with Ctrl + F5 all is ok. But users will do not do that, I need working application...
Maybe somebody knows how to fix this issue? How to disable angularjs view and controller caching?
UPD:
I see that after update my localstorage isn't changing in IE and Firefox. Why?
Sorry, I do not directly answer the question, but what is coming seems important.
I, and other people, strongly discourage to use ngStorage right now.
Indeed, ngStorage, seems very, very handy. You just directly change the object, and voilà, everything works. I used this a bit, this was cool :)
But, sadly, when you try to make an advanced use, or when you take a look at the source code, you see there are several problems. This awesome "immediate localStorage object modification" is made watching stuff with the $rootScope. That's not a good idea for performance. Moreover, you probably saw that some GitHub issues are stating similar sync problems, like you do. Also, be aware that the project is now completely unmaintained. Use such a library in production is a bad idea.
So, you may give a try to another solution to make the link with the localStorage, such as Angular Locker, becoming more and more used. This will lead to some code refactoring, but you future self will thank you to not have used a problematic library.
First be sure that id parameter is correct. And second be sure that the request headers has no-cache. Probably you have request interceptor and this interceptor override the headers. Track this request in firebug for firefox.
If you see the 'no-cache' values check the server out. Maybe server could cache this.
Related
I am trying to let UI development proceed without needing to be coupled to a backend. My the normal REST api is being built like:
a.factory('Sample', ['$resource',
function($resource){
return $resource(baseUrl() + '/sample/:id', {}, {
query: {method:'GET', params:{id:''}, isArray:true, cache:false},
update: { method:'PUT' },
remove: { method:'DELETE'}
});
}]);
This is fine when there is an actual backend. However, for development purposes (NOT Testing), canned data from a file is desired. This can be achieved like:
['$scope', '$http',
function($scope, $http) {
$http.get('data/sampleList.json').success(function(data) {
$scope.sampleData = data;
});
}]
Obviously, I'm no expert here, but I am wondering if there is an easy way to combine these two approaches such that the $resource REST instance can return (for GET requests anyway), canned data from a file?
Why didn't you say this was such a newb question or that you never RTFM? Oh wait, this is my own question! So, sorry folks, didn't realize this was quite so trivial - there is a 'URL' parameter available on every such method. While this will only work for Mockups or UI dev before the backend is done, for the above, all I needed to do was:
a.factory('Sample', ['$resource',
function($resource){
return $resource(baseUrl() + '/sample/:id', {}, {
query: {url: 'data/sampleList.json', method:'GET', params:{id:''}, isArray:true, cache:false},
update: { method:'PUT' },
remove: { method:'DELETE'}
});
}]);
qed
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.
I've been hunting for a few hours now and can't seem to find any information specific to my setup so here goes.
I'm using the MEAN stack and wanting to use the Twitter API in my angular app. I have all the required keys and trigger a twitter api authentication on the server side using Node, then pass the token I get in response to my angular pages. I was hoping to be able to use this token to make requests to the api from an angular service. The request I'm trying to get working the moment is to fetch a given user's profile object. I've attached my service method below. The error I get when I run it is a 405 method no allowed, no access-control-allow-origin header is present.
angular.module('tms.system').factory('Twitter', ['$log', '$q', '$http', '$window', 'twitter', 'Global', function($log, $q, $http, $window, twitter, Global) {
return {
findProfile: function(handle) {
var deferred = $q.defer();
var config = {
timeout:3000,
headers: {
'Authorization': 'Bearer ' + Global.twitterToken,
'X-Testing' : 'testing'
}
};
$http.get('https://api.twitter.com/1.1/users/show.json?screen_name=' + handle, config).
success(function(data) {
$log.info(data);
deferred.resolve(data);
}).
error(function(status) {
$log.error(status);
});
return deferred.promise;
}
};
}]);
Just for future reference, as stated in the comments of maurycy's answer {and being myself trying to get tweets just from Angular without succes}, the best approach for this would be to get them from some backend.
I believe you should use $http.jsonp with a JSON_CALLBACK to get it to work, it's not going to happen with $http.get for sure
In my angularjs application I am communicating with a backend server that requires basic access authentication via http header. I have implemented the authentication mechanism on the client side as described here.
angular.module('myAuthModule')
.config(['$httpProvider', '$stateProvider',
function ($httpProvider, $stateProvider) {
$httpProvider.interceptors.push('securityInterceptor');
}])
.factory('securityInterceptor', ['$location', '$window', '$q',
function ($location, $window, $q) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers['Auth-Key'] = $window.sessionStorage.token;
}
return config;
},
response: function (response) {
if (response.status === 401 || response.status === 403) {
$location.path('/login');
}
return response || $q.when(response);
}
};
}
]);
So far so good, handling xhr requests within the angular app works as expected.
The problem is that I need to provide a download link for pdf documents. My backend server has a /Document/Pdf/:id resource that serves a application/pdf response with ContentDisposition: attachment which also requires authentication. I understand that I cannot initiate a download using xhr, however both providing a link to the document download via ngHref and calling a function that does for example $window.open('/Document/Pdf/13') lead to a 401 Unauthorized response by the server.
What am I missing here?
Having explored the possibilities given by #Geoff Genz with the addition of a fourth - data-uri option, which unfortunately does not allow defining filenames - I decided to go for a different approach.
I added a method to the API which generates a one-time download link based on a normally authenticated request and download it straight away. The angular handler becomes very simple
.factory('fileFactory', ['$http', '$window',
function ($http, $window) {
return {
downloadFile: function (fileId) {
return $http(
{
method: "POST",
data: fileId,
url: '/api/Files/RequestDownloadLink',
cache: false
}).success(function (response) {
var url = '/api/File/' + response.downloadId;
$window.location = url;
});
}
};
}]);
This is not perfect but I feel is least hack-ish. Also this works for me because I have full control of the front- and back-end.
There is not a simple solution to this. You've already discovered that you cannot download via Ajax, so you can't set a custom header that way. Nor can you set a custom header on a browser generated GET (like an href) or POST (like a form submit). I can suggest three different approaches, all of which will require some modifications on your server:
(1) Use Basic or Digest auth on your web page, so the browser will generate and send the Authorization header with those credentials.
(2) Set the token in "authorization" cookie that will be passed with the request and validate the token server side.
(3) Finally, the way we've implemented this is to use a POST request instead of a GET for the download. We POST to a hidden IFrame on the same page and have the server set the appropriate Content-Disposition header such as "attachment; filename="blah.pdf"" on the response. We then send the authorization token as a hidden field in the form.
None of these are ideal, and I know our solution feels kind of hacky, but I've not seen any more elegant approaches.
A controller has $http that calls an api backend on Flask. I have some basic authentication and crossdomain is set. The first time it enters the cpuListCtrl controller the $http calls takes cca. ~14sec. The next time i visited the controller in angular it takes just 23ms. But every time i press the browsers refresh, back to ~14sec. Direct api call from browser also takes just 23ms. So my question is my does it takes so long, did i miss something, or where specific should i look?
EDIT: updated the code to reflect recent changes:
var app = angular.module('RecycleApp', ['ngRoute', 'appControllers']);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when("/cpu", {
templateUrl:'static/js/partials/cpu.html',
controller:'cpuCtrl'
})
}]);
var appControllers = angular.module('appControllers', []);
appControllers.controller('cpuCtrl', ['$scope','$http',
function($scope,$http){
$http({
url: 'http://SOME_IP/api/v1/cpus',
method: 'POST',
data: JSON.stringify({"latitude":46.1948436, "longitude":15.2000873}),
headers: {"Content-Type":"application/json"}
})
.success(function(data,status,headers,config){
console.log(data.list);
$scope.cpus = data.list;
})
.error(function(data,status,headers,config){
console.log("something went wrong.");
})
}]);
Server side:
#app.route('/api/v1/cpus', methods=["GET"])
#cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list():
result = session.query(RecycleReUseCenter)\
.options(load_only("Id", "CpuName"))\
.all()
return list_json(result)
#app.route("/api/v1/cpus", methods=["POST"])
#cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list_with_locations():
content = request.get_json(force=True)
given_latitude = content['latitude']
given_longitude = content['longitude']
result = RecycleReUseCenter.get_all_with_distance(given_latitude, given_longitude)
return list_json(result)
Do you know for sure when does the http call starts? The angular app may be stuck somewhere else, and getting to the http call only in the last second. For example - in the config you are using a "token" where do you get it from? in many angular app this is fetched from some oauth service, in a seperete call. Your slow call won't start until http is configured. After token is there, the next calls would be faster since we got the token already.
To limit some guessing you can use a proxy tool like charles - or deflect.io chrome extension to watch all the out going http calls and figure this out
I have recently had the same problem, and found that the delay oddly enough actually seems to be on the Flask end, but only happens when using an Angular app running in Chrome. This answer from the python stackexchange forum is the best one I have seen - https://stackoverflow.com/a/25835028/1521331 - it provides a 'solution' of sorts, if not an explanation for this mystery!
I was having the same problem, and none of the above worked for me. Here's what did:
Slow Requests on Local Flask Server
Effectively, certain browsers will attempt to access IPv6 sockets before IPv4. After commenting out the offending lines in /etc/hosts and restarting apache the problem was fixed.