Ionic view lifecycle

To improve performance, Ionic developers have implemented and improved ability to cache view elements and scope data. With enabled caching, once initialized, a controller will persist throughout the app’s life, even if it’s hidden and removed from the watch cycle. Since the scope already exists, events were added for which we should listen when entering the watch cycle again.

These events can be used as an excellent tool if you want to trigger a piece of code during the view (re)initialization.

LOADED
At this point, the view is loaded into the DOM. This event will only happen once per view being created. If a view is cached but not active, this event will not fire again on a subsequent viewing.

This state is an excellent step if you want to initiate app configurations or anything that’s required to trigger only once ( the view must be cached).

$ionicView.loaded

$scope.$on('$ionicView.loaded', function(){
  // Anything you can think of
});

ENTER
At this point, a view is active. This event will trigger, no matter it was the first load or a cached view.

This state is an excellent step if you want to do something every time view is active.

$scope.$on('$ionicView.enter', function(){
  // Anything you can think of
});

LEAVE
At this point, a view is no longer active. This event will trigger, no matter if it was the first load or a cached view.

Opposite to the enter event, This one is an excellent step if you want to do something every time view is nonactive (cached) or destroyed.

$scope.$on('$ionicView.leave', function(){
  // Anything you can think of
});

BEFOREENTER
This event will trigger when the view is about to enter and become the active view.

$scope.$on('$ionicView.beforeEnter', function(){
  // Anything you can think of
});

AFTERENTER
This event will trigger when the view has fully entered and is now the active view.

$scope.$on('$ionicView.afterEnter', function(){
  // Anything you can think of
});

BEFORELEAVE
his event will trigger when the view is about to leave and no longer be the active view.

$scope.$on('$ionicView.beforeLeave', function(){
  // Anything you can think of
});

AFTERLEAVE
This event will trigger when the view has finished leaving and is no longer the active view.

$scope.$on('$ionicView.afterLeave', function(){
  // Anything you can think of
});

UNLOADED
The view’s controller has been destroyed including its DOM elements.

This is an excellent point if you want to persist view data before it’s destroyed.

$scope.$on('$ionicView.unloaded', function(){
  // Anything you can think of
});

First time view initialization
1. View 1 – loaded
2. View 1 – beforeEnter
3. View 1 – enter
4. View 1 – afterEnter

Transaction from one view to another
1. View 2 – loaded
2. View 2 – beforeEnter
3. View 1 – beforeLeave
4. View 2 – enter
5. View 1 – leave
6. View 2 – afterEnter
7. View 1 – afterLeave