ngArise

Simple AngularJS loader


Keywords
Arise, AngularJS, loader, load, screen, loading, wait, angular, javascript, loadingscreen
License
MIT
Install
bower install ngArise

Documentation

ngArise

Build Status GitHub release

Demo

Visit the Github page for a demo

Installing

Download directly

Download ngArise files from GitHub

Yarn

yarn add ngArise --save

NPM

npm install ngArise --save

Bower

bower install ngArise --save

How to Use

Add the dependency ngArise

angular.module('app', ['ngArise']);

Add provider to make configurations (optional)

.config(['ariseProvider', function (ariseProvider) {
    ariseProvider.setOptions(
        {
            title: 'Custom title',
            message: 'Here a message',
            templateUrl: 'path/to/views/message.html'
        }
    );
    
    ariseProvider.setDebug(true); // default is false
}]);

Inject Arise service to show / hide or destroy

.controller(['Arise', function(Arise) {
    Arise.show();
    // and / or
    Arise.hide();
    // and / or
    Arise.destroy();
}]);

Note: Arise.destroy() will remove all the Arises (put count on 0 and loading false) since multiple Arises can occur

Place directive in html as element or attribute

<ng-arise></ng-arise>
<!-- or -->
<div ng-arise></div>

Provider API

Options can be passed to configuration provider globally

The options list:

Option Type Default value Description
title String "Please wait" Message that is shown as H2 in default template
message String "We're loading data" String that is shown as a paragraph in default template
templateUrl String "views/default.html" Specify which template should be loaded

Factory API

Calling the factory Arise to show or hide the loading box an option object can be passed to it.

.controller(['Arise', function(Arise) {
    Arise.show({
        title: 'Changed title on the fly',
        message: 'Message can be changed too'
    });
    // and / or
    Arise.hide();
}]);

The functions list:

Option Type Parameter
show function Object
hide function
change function Object
destroy function

Note: Arise.hide() will reset the values to the standard provided provider settings

The options list:

Option Type Optional Description
title String true Message that is shown as H2 in default template
message String true String that is shown as a paragraph in default template