Protected: Getting Started With Ionic – Javascript – Part2

In this blog post we will look at important directive which ionic provides.


Ionic provides a very powerful directive which can be used as a content area of your app. This directive has a custom scroll (i.e all scroll events a managed inside this directive itself rather than default OS) which gives it lot of advantage to implement things like pull to refresh, infinite scrolling, displaying huge lists.

The drawback is, since this directive manages all scrolling through javascript rather than navtive OS, its not very smooth. In latest version of ionic (and android lollipop), ion-content supports native scrolling with all its features. More about it can be read here

ion-content is a must use component for your apps and is one of the reason why ionic is so famous.

Read more about it


This directive is use together with ion-content to provide a pull to refresh feature on your apps.


This directive is used to implement infinite scrolling in your apps, this again needs to be used with ion-content


Another very important directive to be used, this is used to manage the top navigation bar in your app.

This is parent container of ion-content, and is used to manage history (cache views) etc.

It has many directives to manage navigation bar, history, back button, etc


Many apps these days a side menu, will slides from left/right as the user drags it.

This directive provides side menus out of the box

Tap and Other Events

Modals, Popups, Popovers, Actionsheet

Ionic provide many different kind of directive which float over the main content area and can be used for different purposes$ionicPopover/$ionicModal/$ionicPopup/$ionicActionSheet/

Spinners, Loading, Backdrop

Showing spinners or loading text is very common in apps while the page loads$ionicLoading/$ionicBackdrop/

Sliders, Zooms


Hide/Show System Keyboard

Manage Very Long Lists with Images