Ng-route-ext

Extended version of AngularJS ngRoute module that supports namings and different animations between views

View the Project on GitHub allaud/ng-route-ext

AngularJS module for simple routing with animations support

The problem

One of the worst pains of the original ngRoute module is weak animations support. It only supports one type of animation for all views changes. The main idea of this module is to provide support for different animations for different views (e.g. next and previous pages animated with left and right transitions, or flip left/right between some kind of pages).

Solution

The module provides small extention of Angular's DSL for describing routes. So that you can use different animations for different views.

Example

$routeProvider
  .when('/',
    templateUrl: 'index.html'
    controller: 'IndexController'
    name: 'index'
    animations:
      pictures: ['slide-to-top', 'slide-from-bottom']
  )
  .when('/pictures',
    templateUrl: 'pictures.html'
    controller: 'PicturesController'
    name: 'pictures'
    animations:
      index: ['slide-from-bottom', 'slide-to-top']
  )

How it reads

First, notice two new fields: name and animations. animations is a hash which reads as follows:

    name: 'pictures'
    animations:
      index: ['slide-from-bottom', 'slide-to-top']

when moving to "pictures" page from "index" page use "slide-from-bottom" animation for index and "slide-to-top" animation for pictures page

Demo

Please check out the demo here