AngularJS Tips / Progress bar on route change

If you need an effect of progressbar-like between different states of an application. Here is quick and dirty solution.

Dependencies

• ui-router - of course you can use ngRoute, but I don't recommend so.
• ngprogress-lite github official page - to get filling how it's works follow to the official page and look on the top of the page;

Ideal

Use something like that between states:

$rootScope.$on('$stateChangeStart', function(){
  ngProgressLite. start ();
});

$rootScope.$on('$stateChangeSuccess', function(){
  ngProgressLite.done();
});

$rootScope.$on('$stateChangeError',  function(){
  ngProgressLite.done();
});

and fetch all needed dependencies in the resolve section of the states.

Good luck.

Follow the blog to get quick tips for software development.

Angularjs Tips / Parallax

If you need some popular effects in your angularjs page it is very easy to implement it with library called: angular-parallax Github

Install

Bower

Download

Here is source file: angular-parallax.js put it in your lib foulder

Setup

index.html

<script type='text/javascript' src='path/to/angular-parallax.js'></script>

main.js

angular.module('myApplication', ['angular-parallax']);

main.css

.background {
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}    

using

<div parallax-background parallax-ratio="0.2" class="background"></div>

or

<img parallax parallax-ratio="0.4" src="some/image.jpg" />

Links

Github