Added by: Sam Deering
Use this service to grey out your web page and display a loading icon and message while you wait for angularjs promises to be resolved. This service supports greying out just parts of your page if you don't want to block the entire page waiting for async data. This service supports handling multiple promises at the same time.
To use the service in your app add the loadDisplay module to your list of app dependencies. So: angular.module("appName", ["loadDisplay"]). Make sure loadDisplay.js and loadDisplay.css are included in your app. Also make sure to pull in
ajax-loader.gif into your app. I assume its located at
img/ajax-loader.gif from the root folder of your app but you can change it's location in the
loadTemplate value at the bottom of the
The service provides one function,
addDisplay. This function takes an AngularJs promise, a message string, and an optional ID string. It will then display a loading icon until the given promise is resolved or rejected. If an ID is given then only the html element with that ID will be greyed out. If no ID is given then the entire page will be greyed out.
demo/ for an example.
In the root folder just run
karma start to run the test.
You can open demo/demo.html in your web browser. I have tested against Mozilla and Chrome.
Module stats last updated: 2017-07-20 16:00:05