How it all comes together?

Your app

Ionic

Angular JS

WebView (Cordova)

Native SDK

mikehartington.com/ionic-presents/

Benefits

Focused on performance

Effortless native look & feel

Platform continuity

Sass preprocessed 

Built on AngularJS

UI Components

COLLECTION REPEAT

Similar to Angular's ng-repeat

Inspired by iOS’s UICollectionView

Scroll through thousands of items

Only renders the viewable items

Smooth scrolling

mikehartington.com/ionic-presents/

<div class="list">
  <div collection-repeat="c in contacts">
    <h3>{{ c.name }}</h3>
    <p>{{ c.email }}</p>
  </div>
</div>

TABS

Nested views

Each tab has its own nav history

Abstract states in AngularUI Router

mikehartington.com/ionic-presents/

<ion-tabs>

  <ion-tab title="Home" icon="ion-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios7-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

SIDE MENU

mikehartington.com/ionic-presents/

<ion-side-menus>

  <ion-side-menu-content>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>

    <ion-content>
      ...
    </ion-content>

  </ion-side-menu>
</ion-side-menus>

PULL REQUEST

mikehartington.com/ionic-presents/

<ion-content>
  <ion-refresher on-refresh="doRefresh()"
                 pulling-text="Pull to refresh..."
                 refreshing-text="Refreshing!"
                 refreshing-icon="ion-loading-c">

  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items">
        {{item}}
    </ion-item>
  </ion-list>
</ion-content>