Codepen to help you understand Ionic Views, UI-Router, Cache


Hello folks,

Posts about navigation or cache problems keep popping up here. Often it’s just a case of the person not understanding yet how ui-router or ionic’s views or ionic’s cache works.

So I whipped up this pen: which I hope can be useful for those that, like me, learn better by kicking things around, opening the hood, seeing the components in action.

The UI is quite crude, but still usable. By now it’s just a resizeable split view (top: ionic app, bottom: debug info) with different colors for the events, toggles for the different event types and the means for you to set the cache flag at runtime for a given state, if you want. Navigating around creates events which will populate the debug view.

Verbose output is being sent simultaneously to the console (full objects, specially interesting to those planning to write code against these events). Notice that, with, you have to manually switch the console’s context from the window’s top frame to the iframe containing the pen. Otherwise, you won’t see anything!

Was it useful to you? What would you like to see there? Did you miss anything? Let me know! Criticism and feedback is greatly appreciated!


Nuba Princigalli

Wrong order for ionic view event

Useful indeed. Particularly, it helped show that, in moving from view1 to view2, $ionicView enter events for view2 happen before $ionicView leave events for view1, which isn’t intuitive. Thanks.