My question is similar but not the same as this one.
Here is my fiddle
I'm working with a public resource. I don't think it is jsonp. (the flag they use is pjson which i think, to them , means pretty json).
If i have the method as JSONP it will call out and return but then i get an invalid label error. If i have the method set as GET i get the OPTIONS error in firebug (which i typically associate with cross-domain violations).
Oddly, my app calls out to other external resources without issue - so i'm not sure how it is getting that done and can't do this. Am I SOL if i have no control over this outside resource?
$scope.serviceDesc = layerRes.get();
It looks like you can make JSONP calls to this service you're using by specifying a callback=JSON_CALLBACK in the url parameters when using the $http service, or in your case the $resource service
Have a look at this example that I've written up: http://plnkr.co/edit/7EE85Mr8bZBUroQTp5A9?p=preview
$http.jsonp('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/0?f=json&callback=JSON_CALLBACK')
.success(function(data) {
console.log('The data from their server:');
console.log(data);
$scope.worldPhysicalMap = data;
});
Converting this to use $resource shouldn't be much different.
Related
I am attempting to implement a sample application with Angular that interacts with a backend REST API using $resource objects. However, the backend system does not generate id's for the resources, so these need to be defined on the objects being created on the client. This causes a problem when invoking the $save method on the new'ed resource because it forces the JSON data to be POSTed to the wrong URL, i.e., it POSTs to:
/resources/employees/1234
rather than:
/resources/employees
I would prefer not to have to drop down to using the low level $http service if I can avoid it.
Does anyone know how I can work around this issue?
Thanks.
This is because of the fact that you configured your $resource constructor in this way, for example:
$resource('resources/employees/:employeeId', {
employeeId: #id
});
That means that when you call methods like $save or $delete etc. on the resource objects made by this constructor, the variable :employeeId in the url will be filled with the value id that exist on the object on which you called the method. To avoid this you have to modify the constructor config so that the url variable does not depend on the object id property.
So I'm trying to AJAX a single solr doc from my results list to a "doc view" view. I'm trying to use AngularJS to AJAX to my view render method and display the doc that way, but I can't seem to get the angular to work and I'm not sure I'm doing things correctly on the Play side either. Would you at least be willing to tell me if what I'm trying to do will work? The Angular error comes from the docText.text(); call. Here is my code:
Angular controller code:
var docText = $resource("http://localhost:9000/views/full-doc-text.html", {
text: {method: 'PUT'}
});
$scope.handleViewText = function(value) {
docText.text({doc: value});
}
Java code:
public static Result viewText() {
JsonNode json = request().body().asJson();
//do stuff here
return ok(viewtext.render(json));
}
route:
GET /views/full-doc-text.html controllers.Application.viewText()
I see three problems with the code above;
1.The definition of docText resource is not correct. if your read the angularjs manual here you'll see that $resource has 4 parameters. First one is resource url, second is parameter defaults, third one is custom actions and forth one is resource options where last three of them are optional. In your code you pass custom actions as the second parameter, which should be the third. And since you don't have any parameters in your resource url second parameter must be null. So first correction is:
var docText = $resource("http://localhost:9000/views/full-doc-text.html", null, {
text: {method: 'PUT'}
});
2.You define your text action's HTTP method as PUT however in your routes file you are handling GET requests for your desired action. You should change your route definition as:
PUT /views/full-doc-text.html controllers.Application.viewText()
3.PUT method is usually used for update operations when implementing a RESTFULL service. In your case you don't seem to be updating anything. So I suggest to use POST method just for convention.
I've been pulling my hair out trying to get the $http.json() to properly return a result set of objects. I have locally stored examples of the same response and they work fine.
Can anyone look at this code and tell me what I'm doing wrong? It has to do with returning $http or something in that bit.
Demo: http://plnkr.co/edit/x325wZ4mwi9DNM8tAxgH?p=preview
You seem to have changed your plunker. The first one where you were using $http.jsonp call seems close but with CORs issues it is hard to test - you should definitely check the encoding type of your JSONP returned data is correct. However...
I would structure the $http.get as per the code below. Now that you have dropped $http.jsonp in favour of $http.get, also note that you may now need to explicitly unpack the returned JSON data string into a javascript object via jsonDecode. Lastly you will likely have to unwrap your server response to return just the json payload with no JSON_CALLBACK() wrapper.
var url = 'http://sitesbyjoe.com/angular-tests/typeahead/schools.php?callback=JSON_CALLBACK'
$http.get(url).success(function(data) {
console.log(data);
$scope.schools = angular.jsonDecode(data);
});
I'm trying to use this attribute on methods in the web API for a custom module:
[DnnModuleAuthorize(AccessLevel = DotNetNuke.Security.SecurityAccessLevel.Edit)]
but no matter what SecurityAccessLevel I set, I always get a 401 unauthorized response.
I was able to make the code work by adding:
[AllowAnonymous]
on the method, and adding:
if (!ModulePermissionController.CanEditModuleContent(this.ActiveModule))
return Request.CreateErrorResponse(HttpStatusCode.Unauthorized, "You do not have permission to access this content.");
to the beginning of my method, but it seems like this is a workaround that I really shouldn't need because it's exactly what that attribute is there for. I'm running DNN 7.2.1.
Anyone have any idea where I'm going wrong with the attribute?
Turns out it was actually related to the anti-forgery token. I'm using Angular so I'm setting my headers manually in my Angular service rather than using the built-in ServicesFramework setModuleHeaders method and was only setting the TabId and ModuleId. I didn't think the [AllowAnonymous] attribute would override the anti-forgery stuff but it looks like it definitely does (which is good to know).
Full solution for those doing the same:
var baseUrl = sf.getServiceRoot('[yourmodulename]') + '[controller]';
var config = {
headers: {
'ModuleId': sf.getModuleId(),
'TabId': sf.getTabId(),
'RequestVerificationToken': sf.getAntiForgeryValue()
}
};
Do you have the SupportedModules attribute applied to your controller (or action method)? If so, I'd guess there's a mismatch between the name you're passing in there and the real name in DNN (you should be passing in the desktop module name). Try removing that attribute and seeing if it helps.
The same process that sets ActiveModule and the current user (and would thus make your check in the action method work) should be responsible for implementing the DnnModuleAuthorize attribute's check. So, that's definitely perplexing. Maybe that changed, and if you just pass ModuleId but not TabId in the headers, then it sets ActiveModule, but won't authenticate?
Have you looked at the traffic in Fiddler and made sure that the ModuleId and TabId headers are being sent correctly? Does being logged in as a super-user (i.e. host-level user) affect any of the auth checks (if so, perhaps the URL isn't being constructed properly, and DNN is identifying the wrong portal)?
When you initialize the ServicesFramework, make sure you do it inside a document.ready function.
var self = {};
jQuery(document).ready(function ($) {
self.sf = $.ServicesFramework(<%=ModuleID %>);
});
More info: www.dnnsoftware.com/forums/threadid/507753/scope/posts/services-framework-problems
I want to intercept console log message from AngularJS and display them in a div on the page. I need this in order to debug ajax traffic in a PhoneGap app.
This is an example of the kind of errors I want to capture:
I tried this Showing console errors and alerts in a div inside the page but that does not intercept Angular error messages.
I also tried the solution gameover suggested in the answers. No luck with that either. Apparently $http is handling error logging differently.
I guess the answer you tried has the right idea but you're overriding the wrong methods. Reading here I can see angularJs uses $log instead of console.log, so to intercept you can try to override those.
Something like this:
$scope.$log = {
error: function(msg){document.getElementById("logger").innerHTML(msg)},
info: function(msg){document.getElementById("logger").innerHTML(msg)},
log: function(msg){document.getElementById("logger").innerHTML(msg)},
warn: function(msg){document.getElementById("logger").innerHTML(msg)}
}
Make sure to run that after importing angular.js.
EDIT
Second guess, override the consoleLog method on the LogProvider inner class on angular.js file:
function consoleLog(type) {
var output ="";
//arguments array, you'll need to change this accordingly if you want to
//log arrays, objects etc
forEach(arguments, function(arg) {
output+= arg +" ";
});
document.getElementById("logger").innerHTML(output);
}
I've used log4javascript for this purpose. I create the log object via
var log = log4javascript.getLogger('myApp')
log.addAppender(new log4javascript.InPageAppender());
I then use this in a value dependency, and hook into it where needed (e.g. http interceptor).
A more lightweight approach might be to use $rootScope.emit and then have a component on your main page which prepends these log messages to a visible div, but this will require you to change all your calls to console.log (or redefine the function in your js).
I think that this message is not even displayed from AngularJS. It looks like an exception which has not been caught in any JavaScript (angular.js just appears on top of your stack because that's the actual location where the HTTP request is being sent).
Take a look at ng.$exceptionHandler. That should be the code you seem to be interested in. If not, take a quick web search for „JavaScript onerror“ which should tell you how to watch for these kinds of errors.
I would rather user an $http interceptor.
Inside the responseError function, you can set a property on a service that will be exposed to the div's scope.