Get started with

Create mobile apps with

web technologies you already know. 

Ionic offers a library of mobile-optimized 

HTML, CSS and JS components, gestures, and tools for building cross-platform apps.

Your App

Ionic

Angular

Webview (Cordova)

Native SDK

Tabs

Side menu

Ready? Set. Go!

$ npm install -g cordova ionic
$ ionic start myApp blank 
// or use ready-made app templates: tabs, sidemenu
$ ionic start myApp tabs 
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

1. Install Ionic

2. Start project

3. Run it

← index.html

← app.js

blankapp
├───hooks
├───plugins
├───scss
└───www
    ├───css
    ├───img
    ├───js
    │   └───app.js
    ├───lib
    │   └───ionic
    │       ├───css
    │       ├───fonts
    │       ├───js
    │       │   ├───angular
    │       │   └───angular-ui
    │       └───scss
    │           └───ionicons
    └───index.html

Building blocks

index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, 
            maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
      </head>
      <body ng-app="starter">
        <ion-pane>
          <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
          </ion-header-bar>
          <ion-content>
          </ion-content>
        </ion-pane>
      </body>
    </html>

app.js

    // Ionic Starter App
    angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard
            .hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    });

index.html

    <!DOCTYPE html>
    <html>
      <head><!-- meta, links, and scripts --></head>
      <body ng-app="starter">
        <ion-pane ng-controller="ListCtrl">
          <ion-header-bar class="bar-stable">
            <h1 class="title">Listy</h1>
            <button class="button button-icon ion-plus" 
                ng-click="addItem()"></button>
          </ion-header-bar>
          <ion-content>
            <ion-list>
              <ion-item ng-repeat="item in items">
                {{ item.name }}
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-pane>
      </body>
    </html>

app.js

    // Ionic Starter App
    angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) { ... })
    // Added controller for list
    .controller('ListCtrl', function($scope) {
      $scope.items = [
        {name: 'Eggs'},
        {name: 'Bacon'},
        {name: 'Sausage'},
        {name: 'Butter'},
        {name: 'English muffins'}
      ];
      $scope.addItem = function() {
        var name = prompt("What do you need to buy?");
        if (name) {
          $scope.items.push({
            "name": name
          });
        }
      };
    })

Static content and
hard-coded values???

Realtime database designed for
use on the client

Read from/write to Firebase instance

// index.html
<!-- Firebase -->
<script src="libs/firebase/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="libs/angularfire/1.1.2/angularfire.min.js"></script>

<body ng-app="starter">
  <ion-pane ng-controller="ListCtrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Listy</h1>
      <button class="button button-icon ion-plus" ng-click="addItem()">
        </button>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="item in items">
          {{ item.name }}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-pane>
</body>
angular.module('starter', ['ionic', 'firebase']) //include dependencies
.value('URL', 'https://fedbb.firebaseio.com/') // Create Angular const.
.factory('Firebase', function($firebase, URL){ // Firebase factory
  return new Firebase(URL);
})
.factory('Items', function(Firebase, $firebaseArray) { // Items factory
  var itemsRef = Firebase.child('items');
  return $firebaseArray(itemsRef);
})
.run(function($ionicPlatform) { ... })
.controller('ListCtrl', function($scope, Items) { // dependencies
  $scope.items = Items;
  $scope.addItem = function() {
    var name = prompt("What do you need to buy?");
    if (name) {
      $scope.items.$add({ // Add new values to Items
        "name": name
      });
    }
  };
});

Read from/write to Firebase instance

    // index.html
    <body ng-app="starter">
      <ion-pane ng-controller="ListCtrl">
        <ion-header-bar class="bar-stable">
          <h1 class="title">Listy</h1>
          <button class="button button-icon ion-plus" 
                ng-click="addItem()">
            </button>
        </ion-header-bar>
        <ion-content>
          <ion-toggle ng-model="shouldShowDelete"> 
            Edit
          </ion-toggle>
          <ion-list show-delete="shouldShowDelete">
            <ion-item ng-repeat="item in items">
              <ion-delete-button class="ion-minus-circled" 
                  ng-click="deleteItem(item)">
                </ion-delete-button>
              {{ item.name }}
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-pane>
    </body>

Read from/write to Firebase instance

    // app.js
    angular.module('starter', ['ionic', 'firebase'])
    ...
    .controller('ListCtrl', function($scope, Items) {
      $scope.items = Items;
      $scope.addItem = function() { ... };
      $scope.deleteItem = function (item) { // Add delete method
        $scope.items.$remove(item);
      }
    });

Read from/write to Firebase instance

Add a side menu

  1. Switch to ion-nav-view
  2. Move from single html file to templates
    1. menu.html
    2. list.html
  3. Create ngConfig using $stateProvider and $urlRouterProvider
  4. Wire everything up

Add a login modal for auth

  1. Create login.html template
  2. Create firebaseAuth factory
  3. Create new Login controller (LoginCtrl)
    1. Include $ionicModal service
      1. At this point, I create a separate controllers.js file
  4. Wire up functions to open/close modal
  5. Wire up doLogin to use firebaseAuth
  6. Test

Add a signup page for new users

  1. Create signup.html template
  2. Create Signup controller (SignupCtrl)
  3. Wire up functions to create new user onSubmit
  4. Create new state in app config 
  5. Test

Add some style

1. Setup Sass automagically

$ ionic setup sass
$positive:  #1b88b0 !default;
$balanced:  #9cbe30 !default;
$calm:      #b8d94c !default;
$assertive: #e57770 !default;
$dark:      #443f39 !default;

2. Add custom styles to ionic.app.scss

This is you

(hopefully)

Resources

Ionic Brownbag

By Carlos Filoteo

Made with Slides.com

Ionic Brownbag

  • 714

More from Carlos Filoteo