(REST) Response-Handling (error/success) & Feedback

[Matthias Andrasch]

Hey,

I'm using angularjs for about half a week now and I'm really impressed with the progress I made and the simplicity of angularjs. I used to develop with ExtJS3 before and recently with jquery. ExtJS was heavy, but kind of structured (ExtJS4 does it better finally) and developing only with jquery was light-weight, but a real pain in the ass to structure an app with it, so I really like the way angularjs handles this and it gives a good starting-point with the angular-seed. Regarding the future it would be nice (esp. for new developers) to have a tutorial where a full set of CRUD-operations with REST is shown. Long story short, my questions:

At the moment I'm in heavy development for a project which will be released in october, so please don't feel spammed with the questions that are coming to my mind while developing. ;)

For my application I want to have a "smart" custom response handling for my REST-actions. Mainly I need it for form validation (server-side). 

Goals:

• "global" success & error method which is called on every request
• custom callback function which are executed after the "global" ones
• e.g. FUEL.save({},function(){ // my custom callback success}));

Use-Cases/Examples:

• Form Submission
• my success()-method will check for a json field named "form_validation_errors" on form submit actions
• if no errors are present: execute custom callback function for "success" (redirect to another page e.g.)
• if there are errors use the scope and mark the form fields with css-class 'invalid' (Problem: How do I get the scope there?)
• (Growl-Like) Notifications
• my success()-method could check if there is a field named "notifications" and show them, e.g.
• 404/500/errors
• my error()-method shows error to the user

Main Questions:

• Where can I trigger the execution of a global success/error-callback? (In $xhr or in my resource?)
• How do I get the scope in my global method? (to access controllers this.form e.g.)

I started to develop a kind of prototype:

http://pastie.org/2422206

ExtJS has a response handling like the one describe above and with jquery it is also possible with global options for $.ajax and $.ajax.error. Would be nice If that would be possible with angularjs as well. I know there is this discussion about overriding xhr.error, but I don't really like this. I also noticed that the way the resource-requests work is kind of different (with returning an empty reference immediately) in angularjs and that the callbacks are not really needed.

Has somebody implemented something like this already? 

Thanks in advance for any tips!

Cheers, Matthias

[Igor Minar]

Hi there,

Currently there is no concept of global xhr handlers in angular, if you need that functionality you'll need to call a function in each request callback in your app. The example you are have in pastie seems incomplete.

Where is the following located?

// Usage - how to do this simpler? (Because right now it has to be copied to every function)
// No custom callback possible also with this implementation
FUEL.save(this.form,{
            'c':'user'
        },ResponseValidator);

I'd expect to see it in a controller somewhere. Maybe something like this:

function MyCtrl(FUEL, ResponseValidator) {

  this.saveFuel = function() {

    FUEL.save(this.form,{
              'c':'user'
              },ResponseValidator);

  }

}

/i

--
You received this message because you are subscribed to the Google Groups "angular" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/tQcpbVx7bg4J.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Matthias Andrasch]

Hey Igor, 

my pasted snippet was supposed to be used as you posted above, but I let out the controller part for simplification.

I'm still stuck at the problem how to implement the server-side form validation. The validator widget async does what I want to do with the whole form.

The example code: http://pastie.org/2449045

Sample Server Response would be: (fieldName: errorMessage)

• {form_errors:{title:"Sample Error Message")} (JSON)

My problems:

• How can I access the the scope of the controller in my ResponseValidator-service to set the form errors?

Thanks in advance!

[Witold Szczerba]

Hello,
one comment in-line:

On 24 August 2011 15:28, Matthias Andrasch

<matthias...@googlemail.com> wrote:
> Where can I trigger the execution of a global success/error-callback? (In
> $xhr or in my resource?)

You cannot create global success/error callbacks for $xhr, but you can
very easily introduce your own, let's call it 'myXhr', service which
will delegate everything to $xhr plus you can add there your global
error/success handlers. More than that: in case "global' is too coarse
grained, you can create yet another 'myYetAnotherXhr' service and use
other error/success callbacks there.
I have not read new $http service yet (to be introduced soon), but
they might have had cooked something nice there to address your
requirements, so have a look at it.

Regards,
Witold Szczerba

[Matthias Andrasch]

Hey Witold,

thank you for the suggestions! I thought about this too, but I want to keep the benefits of the Resource-class (and I want to prevent to recode/doublecode everything). I looked into the source of src/service/resource.js and src/Resource.js and there are basically only a few lines which I would change. 

Is there a way to achieve the changes with a custom service (angular.service) and "copied" code from resource.js/Resource.js?   I don't want to compile/fork my "own" angularjs by now, because I do not want to modify source files.

The $http-service sounds interesting, looking forward to it.

[Witold Szczerba]

Hi,
you are right, poking with Angular internals would be problematic, as
you would have to maintain all the changes, applying them to next
Angular versions.
Wrapping is a different beast though. You create new service, inject
there original service and then you use your own version, not the
original. Now I see the problem, because you want to use $resource and
$resource uses $xhr internally, so creating your own version of xhr
will not change the fact that $resource would still use original $xhr,
not the one you have registered. You could of course create your own
version of $resource (myResource), but it won't help because you would
have to re-wire services - that is not possible as far as I know.
The good thing is it is all gonna be replaced in new 0.10.x Angular.

Regards,
--
Witold Szczerba

On 30 August 2011 12:17, Matthias Andrasch

> --
> You received this message because you are subscribed to the Google Groups
> "angular" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/bUxjKESPsocJ.

[Matthias Andrasch]

Alright thanks, that's what I thought. Then I will stick to my solution and wait for the 0.10.x.

Regards,

Matthias

[Vojta Jina]

Hey guys,

it's not documented anywhere, but I believe you can do this:

angular.service('$resource').$inject = ['yourSpecialXhr];

This will inject your service instead of the default $xhr...

V.