Visit the Github page for a demo
Download ngArise files from GitHub
yarn add ngArise --save
npm install ngArise --save
bower install ngArise --save
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>
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 |
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 |