How do I handle rendering in AngularJS when $resource returns error?

Question

If I have a standard factory, creating a person, say:

      $scope.person = Person.get({person: $routeParams.person},function () {
  },function (httpResponse) {
  });

My HTML is:

<div>Person is: {{person}}</div>

Fairly straightforward. My issue is with rendering. My understanding is that when this runs, it immediately returns an empty object; when the async get finally returns, it will fill in $scope.person, and then re-render.

What prevents this from just rendering as Person is: and then rerendering as Person is: John? I don't want that blank, if anything, I want to show some "loading" and then change it when render is complete.
How do I handle errors? If I get a 404 - say the person ID is non-existent - I want to show some form of "sorry, the user you requested doesn't exist". But I want to be sure that shows only after I actually tried, not accidentally render it while waiting for the person to load.

@MKSafi that is great, exactly what I was looking for. Can you post this as an answer, so I can choose it? — deitch
– deitch, Commented Sep 28, 2013 at 18:36

Nikos Paraskevopoulos · Accepted Answer · 2013-09-28 19:22:58Z

How we have handled this:

Implemented a busy directive. In your case it would be applied as:
```
<div busy="!person.$resolved">Person is: {{person.name}}</div>
```
(Note also that I have changed person a bit, to be an object)

The busy directive implementation is more or less as (we are using jQuery):

app.directive("busy", function() {
    return {
        restrict: "A",
        link: function(scope,element,attrs) {
            var wrapper = element.wrap("<div class="busy-wrapper"></div>");
            scope.$watch(attrs.busy, function(busy) {
                if( busy ) wrapper.addClass("busy");
                else wrapper.removeClass("busy");
            });
        }
    });
});

And then the CSS:

.busy-wrapper.busy * {
    display: none; /* we hide the content when busy */
}
.busy-wrapper.busy {
    /* display a spinner */
    background: white url("my-busy-spinner.gif") no-repeat center;
    height: 50px; /* Depends... */
}

When we catch an error, we mark the resource object (here the person) with an $error=true attribute:

$scope.person = Person.get(...,
    function() { /* success */ },
    function(response) {
        $scope.person.$error = true; // and maybe more stuff from the response, e.g. a $message attribute
    }
);

How we handle the $error attribute depends on the context; sometimes we hide the output and display a "retry" link, e.g.:

<div ng-if="!person.$error" busy="!person.$resolved">Person is: {{person.name}}</div>
<div ng-if="person.$error">Something bad happened. <a ng-click="retry()">Retry!</a></div>

This is not the exact code, but I think it gives you a general idea. Also this is not the only correct approach (I am interested in others), just how we are doing it. Oh and you can do all sorts of nice stuff to busy, like adding animations/transitions.

Oh, Nikos, I like that. I already selected the other as an answer, but this is great. It is a pity that this isn't built right into Angular, it is really nicely done

M.K. Safi · Accepted Answer · 2013-09-28 18:39:54Z

1

You can use ngCloak.

From AngularJS

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

answered Sep 28, 2013 at 18:39

M.K. Safi

7,14911 gold badges46 silver badges63 bronze badges

Collectives™ on Stack Overflow

How do I handle rendering in AngularJS when $resource returns error?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related