Pages and transitions

jqmViewport

The jqmViewport directive defines the element under which the mobile pages are added. This automatically adds ng-view to it.

Page transitions

Defining transitions for pages

Every route can have the extra property transition with the name of the transition to use when going to that page. Transition names:

  1. Fade
  2. Slide
  3. Pop
  4. ... (all transitions of jqm are supported)

Integration with browser history

When going back using the browser back button, the transition that was used to show the page is played backwards, ignoring the transition property of the page that is about to be shown. This is the same behavior as in jqm.

Feature detection

Browsers that don't support 3d animations, all complex transitions (like pop) fall back to the slide transition. This is the same behavior as in jqm.

Cached views

The angular-jqm projects adds caching to angular views (ng-view). Cached views allow to cache views including their scopes using the $jqmViewCache service. By this, changing views with routes gets very fast as there is no need to recompile them on every visit.

To make this work the semantics of routes were changed a little:

  1. If a route for a cached template is activated, the elements and it's scope are taken from the cache. If the template is not yet cached, it is compiled and then added to the cache.
  2. If a route is left, it's scope is disconnected, if it's activated, the scope gets reconnected.
  3. All templates that are in the $templateCache service are compiled with a new disconnected scope on startup.
  4. Route controllers are created only on the first time it's route is activated. Afterwards, they may listen to the $viewContentLoaded event to be notified that their route is activated again.