ngArise

Simple AngularJS loader


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

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