What techniques do you use to deal with latency in AngularJS

[Jay Nathan]

Given that there are no page refreshes with AngularJS apps, latency from a 3rd party service such as mongolab can cause noticeable delays in the fluidity of the UI. Are there techniques or libraries that you all are using? I'm thinking loading messages, spinners, and/or client caching techniques/libraries (local storage?).

[Ivo Reis]

Have you checked this vid from John Lindquist? Is a pretty slick solution: http://www.youtube.com/watch?v=P6KITGRQujQ

[Joshua Miller]

That video also addresses a related and important technique: preventing routing when the resource targeted doesn't exist.

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[lorenzofox3]

But beware that if the resource targeted does not exist, using this technique, the url will still change in your browser.
it means that the addressability of the resource can be compromised : the user may bookmark a resource using a bad url.

Laurent 

[Witold Szczerba]

Long time ago I was thinking about this. I wanted to create a blog
entry, but never actually did it...
So, the solution is similar to ng-cloak, this is to use a directive,
for example:
<div cover-until='some message'>...</div>
This directive will set some predefined class. The CSS will match and
hide all the inner content, showing some spinner as a background
(defined in CSS).
Now, from within your controller, once your data are available, you will:
$scope.$broadcast('uncover:some message');
and the cover-until directive will remove the predefined class. That
will disable CSS style, as it will no longer apply.

I have never implemented it though. The directive will be trivial
(just add a class and remove it on message), but I cannot foresee if
the generic CSS definition is trivial or not. If that would help, the
directive could maybe append some extra div, so it would be simpler to
match CSS to show some spinner, like:

original markup:
<div cover-until="some text'>
...
</div>

modified by directive:
<div cover-until="some-text" class="covered">
...
<div class="cloak"></div>
</div>

and after scope emits message:
<div cover-until="some-text">
...
<div class="cloak"></div>
</div>

and CSS:
.covered * {
display: none;
}
div.cloack {
display: none;
}
.covered div.cloak {
display: block; /* overrides display:none */
background: ........
}

Regards,
Witold Szczerba

[Jim Lavin]

Another good way to intercept calls to show and hide spinners is to use a response interceptor. they have a good example in the doco at http://docs.angularjs.org/api/ng.$http

I use this to handle my spinners and to handle errors that are returned from the server.

Good Luck!

[Pawel Kozlowski]

Hi!

On Mon, Dec 31, 2012 at 5:42 PM, Jim Lavin <jim.la...@gmail.com> wrote:
> Another good way to intercept calls to show and hide spinners is to use a
> response interceptor. they have a good example in the doco at
> http://docs.angularjs.org/api/ng.$http

Hmm, this is interesting... How do you show your spinner? Since as for
now there is no support for request interceptors in AngularJS.
Do you show it from the place where you do the call and then hide it
from an interceptor? If so I would find it confusing since the code
dealing with the spinner would end up in 2 different places. Do you
have your code accessible anywhere?

The easiest pattern to implement spinner showing / hiding I can think
of is by using the pendingRequests property of
http://docs.angularjs.org/api/ng.$http

Here is an example:
https://github.com/angular-app/angular-app/blob/master/client/src/common/services/httpRequestTracker.js

It is kind of catch-all solution but at least doesn't require any code
writing for each and every individual $http call.

Cheers,
Pawel

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/