Once upon the time I used to work with jQuery Mobile. It used to be an exciting time, playing with a now dead framework, learning new stuff. Somewhere around that point I found something called page events. They were a jQuery Mobile answer to jQuery document ready event. Essentially you were able to watch a whole life cycle of a single jQuery Mobile page, including page transitions.
 
I missed this feature when I finally decided to switch to Ionic some time ago last year. And what would you know, this feature is now available to Ionic framework; ok it was available since January 2015. Regrettably I haven’t had time to write about it until now.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...
 

Intro

 
To improve performance, Ionic developers have implemented and improved ability to cache view elements and scope data. Just like in the case of jQuery Mobile, 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.
 

View LifeCycle

 
These are available events:
 

1loaded

 
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).
 
$scope.$on('$ionicView.loaded', function(){
  // Anything you can think of
});
 

2enter

 
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
});
 

3leave

 
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
});
 

4beforeEnter

 
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
});
 

5afterEnter

 
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
});
 

6beforeLeave

 
This 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
});
 

7afterLeave

 
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
});
 

8unloaded

 
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
});
 

View LifeCycle order

 
Take a look at provided example if you want to see an order in which events are being executed.
 

First time view initialization

 
  1. View 1 – loaded
  2. View 1 – beforeEnter
  3. View 1 – enter
  4. View 1 – afterEnter
 

Transition 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
 

Usage examples

 
 
Continue Reading

  • chandramuralis

    Thanks for the article…… was looking for something similar just yesterday

    • Thank you, I’m here if you need more information

  • Excellent article! most importantly with Ionic 😀

  • Amazing article, it was very educational!

  • Rob Laverty

    the api key is expired :X

    • Thank you, it’s fixed. Now we need to wait several hours before server remove old cached file.

  • Fernando Fabreti

    Hello there! Is it 100% sure that transition from one view to another ALWAYS happens in that given order ?

    • Best place to ask this question, if you want a 100% correct answer, is official Ionic forum. Developer will tell you everything.

  • 文壮 刘

    Great post. And I have a question which I can’t resolve: after I use ionic.Platform.exitApp() in Android to exit app, and then reopen the app, the SplashScreen is not working, but white screen. Could you help me about this? Thank you.

    • Have you tried using remote debug? It’s the best way to find an error, or in your case the error.

      • 文壮 刘

        Thank you for replying. And I found cordova-plugin-splashscreen@2.1.0 has this issue, and version 2.0.0 work fine.

  • sebastian correa

    i create a github repo to play around with the view lifecycle https://github.com/correasebastian/viewlifeCycle/

    • I approved this comment so that others can see your code

  • mmm test please afterLeave event with Ionic 1.3, is working?

  • KB

    I wonder why does it sometime fire twice? I used $ionicView.unloaded to check if there were any unsaved data and then I would alert user about it. But each time I call this method, it would fired twice.

    By the way, thanks for this and other posts that you have here, they are useful.