How to properly block the interface in AngularJS while data is loading?

Question

In my form there are many fields where the data is loaded from server, there are also a dependent data lists and while performs the data loading I want to freeze interface - for example, by showing the progress bar. A layer with a large z-index, which would be over all others and the progress-bar in the corner. For example..

I know how to do it by using GWT or Vaadin:

Modal window with progressbar for long tasks

How to do it by using AngularJS? Basically, I know how to do it by using JavaScript.

The problem is quite common.. Maybe there are ready solutions?

When you say data loading, do you mean loading it from server ?? — Manish Kr. Shukla, Jun 20 '15 at 10:14
Try [this](http://juristr.com/blog/2013/12/nprogress-splash-screen/) — Max, Jun 20 '15 at 10:25

score 0 · Accepted Answer · answered Jun 20 '15 at 10:22

0

The easiest option to integrate into your solution is promise tracker

If you need to block out the screen while your application bootstraps ngCloak allows you to display a message while angular is initializing.

answered Jun 20 '15 at 10:22

Mark Coleman

40,542
9
81
101

score 0 · Answer 2 · answered Jun 20 '15 at 10:23

0

If you're using the angular $http to load your data you can easily use this directive to show a loading screen or progress bar:

https://github.com/cgross/angular-busy

answered Jun 20 '15 at 10:23

iceburg

1,768
3
17
25

How to properly block the interface in AngularJS while data is loading?

2 Answers2