In this blog post we will look at important directive which ionic provides.
ion-content
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 http://ionicframework.com/docs/api/directive/ionContent/
ion-refresh
This directive is use together with ion-content to provide a pull to refresh feature on your apps.
http://ionicframework.com/docs/api/directive/ionRefresher/
ion-infinite-scroll
This directive is used to implement infinite scrolling in your apps, this again needs to be used with ion-content
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/
ion-nav-view
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
http://ionicframework.com/docs/api/directive/ionNavView/
ion-side-menus
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
http://ionicframework.com/docs/api/directive/ionSideMenus/
Tap and Other Events
http://ionicframework.com/docs/api/directive/onHold/
http://ionicframework.com/docs/api/page/tap/
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
http://ionicframework.com/docs/api/service/$ionicPopover/
http://ionicframework.com/docs/api/service/$ionicModal/
http://ionicframework.com/docs/api/service/$ionicPopup/
http://ionicframework.com/docs/api/service/$ionicActionSheet/
Spinners, Loading, Backdrop
Showing spinners or loading text is very common in apps while the page loads
http://ionicframework.com/docs/api/directive/ionSpinner/
http://ionicframework.com/docs/api/service/$ionicLoading/
http://ionicframework.com/docs/api/service/$ionicBackdrop/
Sliders, Zooms
http://ionicframework.com/docs/api/directive/ionSlideBox/
http://ionicframework.com/docs/api/directive/ionScroll/
Tabs
http://ionicframework.com/docs/api/directive/ionTabs/
Hide/Show System Keyboard
http://ionicframework.com/docs/api/page/keyboard/
Manage Very Long Lists with Images
http://ionicframework.com/docs/api/directive/collectionRepeat/