Workshop

Ionic Framework

Wilmerson da Silva

@WilmersonSilva

O que é ?

Framework para desenvolvimento de aplicativos híbridos usando HTML, CSS e Javascript.

AngularJS

Rotas

Controllers

Services

UI Components usando Diretivas

Sass

Look and Feel
CSS fácil de sobrescrever
80+ mixins reutilizáveis e úteis

Apache Cordova

Recursos Nativos

Plugins

ngCordova

Cordova com o poder do AngularJS

63+ Extensões

História

Lançado em novembro de 2013 e teve o primeiro Release Candidate lançado em março de 2015.
Foi construído por @benjsperry, @adamdbradley e @maxlynch na Drifty.

Atualmente está na versão 1.6

Project Scaffold

/** Project Scaffold */

ionic-app/
    hooks/
    platforms/
        android/
        ios/
    plugins/
    scss/
        ionic.app.scss
    www/
        css/
        img/
        js/
        lib/
        index.html
    config.xml
    .gitignore
    bower.json
    config.xml
    gulpfile.js
    ionic.project
    package.json


/* hooks directory */
/*Ações "ganchos" que podem ser inseridas em certos 
pontos no processo de build do Cordova.
/*

/* platforms directory */
/* Diretório onde ficam as plataformas adicionadas ao projeto. 
   Ex: Android, WP8, iOS
*/

/* plugins directory */
/* Diretórios para plugins usados no seu projeto Cordova. 
   Ex: Plugin para oauth com Facebook.
*/

/* www directory */
/* Diretório onde ficam os source codes do projeto. 
No processo de build, os arquivos deste diretório são processados e 
inseridos dentro do diretório das plataformas escolhidas para o build.
No caso do Ionic, aqui ficam os diretórios css/, img/, js/, lib/ 
e o arquivo index.html.
As bibliotecas do Ionic e outras ficam no diretório lib/.
*/

/* .gitignore file */
/* Arquivo usado para configurar quais arquivos não serão versionados 
pelo Git*/

/* bower.json file */
/* Usado pelo gerenciador de dependências de front-end Bower, 
esse arquivo guardar informações sobre dependências do projeto, como
jQuery, BootStrap, Moment, Animate. 
As dependências instaladas ficam no diretório www/lib
*/

/* config.xml file */
/* Arquivo comum  que guardam informações sobre o projeto e especifica 
parâmetros que afetam a forma de trabalhar do aplicativo, 
como por exemplo, podemos especificar se o aplicativo responde 
a orientação de tela.
*/

/* gulpfile.js file */
/* Usado pelo Gulp, esse arquivo guardar configurações sobre 
automatização de tarefas, como Minificação, Concatenação 
e Compressão de arquivos.
*/

/* ionic.project file */
/* Aqui ficam algumas configurações específicas de um projeto 
Ionic, como alterações dos comandos da command line, 
root do projeto, entre outro.
*/

/* package.json file */
/* Arquivos usado pelo NPM para as gerenciar as dependências do projeto
*/

UI Components

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

<ion-list>

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

</ion-list>

Diretiva AngularJS

Reorder

Delete

Swiping

Action Sheet

$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;
  }
});

Collection Repeat

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

Similar ao ng-repeat

Inspirado no UICollectionView do iOS

Renderiza apenas os items visualizados

Scroll mais suave

Tabs

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