Charleston JS – 2014 – IonicFramework

Lists

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...

</div>

Complex Lists

• AngularJS Directive
• Buttons exposed by swiping
• Reorder
• Delete

<ion-list>
  <ion-item ng-repeat="item in items" class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>

Collection Repeat

• Similar to Angular's ng-repeat
• Scroll through thousands of items
• Only renders the viewable items
• Smooth jank-free scrolling
• Low memory footprint

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

Tabs

• Nested views
• Each tab has its own nav history

<ion-tabs class="tabs-icon-only">

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

  <ion-tab title="Feedback" icon="ion-thumbsdown">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Messages" icon="ion-chatbubble-working">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

</ion-tabs>

Side Menu

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <div class="title">Projects</div>
    </header>
    <ion-content has-header="true">
      <div class="list">
        <a href="#/work" class="item">Work</a>
        <a href="#/home" class="item">Home</a>
      </div>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

$ionicActionSheet.show({
  titleText: 'Modify your album',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Pull to Refresh

<ion-content on-refresh="refreshData()">
  <ion-refresher></ion-refresher>
  <!-- content -->
</ion-content>

Navigation

• Shows back button when possible
• Each tab has its own history stack
• Works with Android's back button

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right">
  <!-- content -->
</ion-nav-view>

$cordovaCamera

• Cordova Plugin
• Promises API

module.controller('PictureCtrl', function($scope, $cordovaCamera) {

$scope.takePicture = function() {
  var options = {
    quality : 75,
    destinationType : Camera.Dest...Type.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    encodingType: Camera.EncodingType.JPEG,
    popoverOptions: CameraPopoverOptions
  };

  $cordovaCamera.getPicture(options)
  .then(function(imageData) {
    // Success! Image data is here
  }, function(err) {
    // An error occured.
  });
}
});

$cordovaContacts

• Cordova Plugin
• Promises API

module.controller('MyCtrl', 
 function($scope, $cordovaContacts) {
  $scope.addContact = function() {
    $cordovaContacts.save($scope.contactForm)
    .then(function(result) {
      // Contact saved
    }, function(err) {
      // Contact error
    });
  };

  // Many more features will be added shortly
});