Protected: Getting Started With Ionic – Javascript – Part2

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/

http://ionicframework.com/docs/api/utility/ionic.Platform/

http://ionicframework.com/docs/api/directive/ionCheckbox/

excellence-social-linkdin
excellence-social-facebook
excellence-social-instagram
excellence-social-skype