Listas

• Directiva de Angular
• Interacción nativa
• Reagrupar
• Borrar

<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>

</ion-list>

Collection Repeat

• Similar a ng-repeat de Angular
• Inspirado por UICollectionView de iOS
• Scroll para miles de elementos
• Solo renderea los elementos visibles
• Scroll suave

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

Navegación

• Usa AngularUI Router
• Muestra el botón Back siempre que sea posible
• Transiciónes siguen la dirección de la navegación
• Funciona con el boton Atrás de Android

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

<ion-nav-view></ion-nav-view>

Tabs

• Vistas anidadas
• Cada tab tiene su historial
• Estados abstractos AngularUI Router

<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>

Menú Lateral

<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>

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

• Servicio de Angular
• Se injecta a los controladores

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

Popover

• AngularJS Service
• Template externa o inline

$ionicPopover.fromTemplateUrl('popover.html',
  function(popover) {
    $scope.popover = popover;
  }
);

<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Popover Title</h1>
  </ion-header-bar>
  <ion-content class="padding">
    Hello!
  </ion-content>
</ion-popover-view>

Modal

• Servicio de AngularJS
• Template inline o externa

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
});

Pull to Refresh

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