JarCasting
JarCasting JarCasting

angular-ui-view-spinner

WebJar for angular-ui-view-spinner

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-ui-view-spinner
Last Version

Last Version

1.0.0
Release Date

Release Date
Type

Type

jar
Description

Description

angular-ui-view-spinner
WebJar for angular-ui-view-spinner
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/rpocklin/angular-ui-view-spinner

Download angular-ui-view-spinner

Filename Size
angular-ui-view-spinner-1.0.0.pom
angular-ui-view-spinner-1.0.0.jar 10 KB
angular-ui-view-spinner-1.0.0-sources.jar 22 bytes
angular-ui-view-spinner-1.0.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-view-spinner/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ui-view-spinner</artifactId>
    <version>1.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-view-spinner/
implementation 'org.webjars.bower:angular-ui-view-spinner:1.0.0'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-view-spinner/
implementation ("org.webjars.bower:angular-ui-view-spinner:1.0.0")
'org.webjars.bower:angular-ui-view-spinner:jar:1.0.0'
<dependency org="org.webjars.bower" name="angular-ui-view-spinner" rev="1.0.0">
  <artifact name="angular-ui-view-spinner" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-ui-view-spinner', version='1.0.0')
)
libraryDependencies += "org.webjars.bower" % "angular-ui-view-spinner" % "1.0.0"
[org.webjars.bower/angular-ui-view-spinner "1.0.0"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.2.26,2)
org.webjars.bower : angular-spinner jar [0.6.1,0.7)
org.webjars.bower : angular-ui-router jar [0.2.14,0.3)

Project Modules

There are no modules declared in this project.

Angular UI View Spinner

Build Status Coverage Status

A declarative, powerful drop-in addition to UI Router, enabling spinners to be shown when executing resolves before the route change is complete.

Motivation: Global spinners suck, UX and humans desire to know what part of the screen is loading. UI Router gives us the hooks we need and this directive is the easiest drop-in replacement to complicated per-view or global loading indicators.

Most importantly, this works as you nest multiple <ui-view> elements, and comes with a good set of defaults to not show if the data is loaded within a certain amount of time (avoids the spinner being flashed on /off).

Demo / Example

Demo

Installation

  1. Install the plugin into your Angular.js project, manually or via:
bower install angular-ui-view-spinner --save
  1. Include angular-ui-view-spinner.css in your app:
<link rel="stylesheet" href="bower_components/angular-ui-view-spinner/src/angular-ui-view-spinner.css" />
  1. Include angular-ui-view-spinner.js in your app:
<script src="bower_components/angular-ui-view-spinner/src/angular-ui-view-spinner.js"></script>
  1. Add angular-ui-view-spinner as a new module dependency in your angular app.
var myapp = angular.module('myapp', ['angular-ui-view-spinner']);
  1. Ensure that the other Angular.js module dependencies are included:
var myapp = angular.module('myapp', ['angularSpinner', 'ui.router' .. ]);

Creating the Directive

  1. [ required ] Replace <ui-view ...> or <div ui-view ...> with <ui-loading-view ...> or <div ui-loading-view ...>.
  2. [ required ] Define the root-state for that <ui-loading-view> based on the parents route.
  3. [ optional ] Specify the preset size of the spinner size="small | medium | large".
  4. [ optional ] Customise the angularSpinner spinner dimensions directly: spinner-size="{ radius: 50, width: 10, length: 60 }".

NOTE: The spinner will appear on any view where you have resolve: defined with an async loader, whether it's one async request or many.

Complete (minimal) example:

  
  <div>
    <a ui-sref="example.one">Route 1</a>
    <a ui-sref="example.two">Route 2</a>
  </div>
  <ui-loading-view root-state="example"></ui-loading-view>

Notes

  • You can use either the SASS styles directly file under /src or the compiled CSS files, up to you.
  • You may wish to customise the margin-top of the spinner to the <ui-view> containers, or use flex-box or another method to vertically center the spinner but it depends which browsers / versions you are targeting - the default is margin-top: 50px.

Running Locally

  1. Checkout git repository locally: git clone [email protected]:rpocklin/angular-ui-view-spinner.git
  2. npm install
  3. bower install
  4. grunt serve
  5. View http://localhost:9000/example/ in your browser to see the example.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Make your changes, run grunt to ensure all tests pass. (Ideally add more tests!)
  4. Commit your changes (git commit -am 'Added some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

History

  • 1.0.0 Initial release

TODO

  1. Investigate showing a spinner while angular bootstraps and loads initially (on initial route lifecycle).
  2. Allow this to be used with a pure icon and CSS instead of angularSpinner (via transclude).

License

Released under the MIT License. See the LICENSE file for further details.

Versions

Version
1.0.0