https://github.com/rickerd/ngarise
https://github.com/rickerd/ngarise
angular javascript loadingscreen
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/rickerd/ngarise
- Owner: rickerd
- Created: 2016-09-03T23:04:48.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-16T00:27:28.000Z (almost 8 years ago)
- Last Synced: 2025-02-20T23:04:04.680Z (over 1 year ago)
- Topics: angular, javascript, loadingscreen
- Language: JavaScript
- Homepage:
- Size: 223 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## ngArise
[](https://travis-ci.org/rickerd/ngArise)
[](https://github.com/rickerd/ngArise)
## Demo
Visit the [Github page](https://rickerd.github.io/ngArise) for a demo
## Installing
#### Download directly
[Download ngArise](https://github.com/rickerd/ngarise/archive/master.zip) files from GitHub
#### Yarn
```bash
yarn add ngArise --save
```
#### NPM
```bash
npm install ngArise --save
```
#### Bower
```bash
bower install ngArise --save
```
## How to Use
Add the dependency ngArise
```javascript
angular.module('app', ['ngArise']);
```
Add provider to make configurations (optional)
```javascript
.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
```javascript
.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
``` html
```
## 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.
```javascript
.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 | title, message |
| hide | function | |
| change | function | Object | title, message |
| 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 |