O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Ionic

Book Description

Build real-time and hybrid mobile applications with Ionic

In Detail

With this book, you will learn hybrid mobile application development using Ionic. This book uses Cordova 5.0.0, Ionic CLI 1.5.0, and Ionic 1.0.0 to explain the concepts and build apps.

To begin with, the book helps you understand where Ionic fits in today's world. Then, you will dive deep into Ionic CSS components and Ionic-AngularJS directives and services. You will also examine theming Ionic apps using the built-in SCSS setup.

Next, you will learn to build an Ionic client for a secure REST API, where you will implement user authentication and token-based development. Cordova and ngCordova will be explored, and you will learn how you can integrate device-specific features such as a camera and Geolocation with an Ionic app. We will wrap up the book by building a messaging app, which deals with talking to Firebase (a real-time data store), as well as device features.

By the end of this book, you will be able to develop a hybrid mobile application from start to finish, and generate device-specific installers.

What You Will Learn

  • Learn how a hybrid mobile application works
  • Familiarize yourself with Cordova and see how it fits into hybrid mobile application development
  • Seamlessly work with Ionic CSS components and Ionic-Angular JavaScript components such as directives and services
  • Learn how to theme Ionic apps as well as customize components using Ionic SCSS support
  • Develop an app that builds a client for a secure REST API using Ionic and AngularJS
  • Develop a real-time chat app using Firebase that consumes ngCordova
  • Learn how to generate a device-specific installer for an Ionic app using Ionic CLI as well as Ionic cloud services

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning Ionic
    1. Table of Contents
    2. Learning Ionic
    3. Credits
    4. Foreword
    5. About the Author
    6. Acknowledgments
    7. About the Reviewers
    8. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    9. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    10. 1. Ionic – Powered by AngularJS
      1. Understanding the separation of concerns
      2. AngularJS components
      3. AngularJS directives
      4. AngularJS services
      5. AngularJS resources
      6. Summary
    11. 2. Welcome to Ionic
      1. Mobile Hybrid Architecture
      2. What is Apache Cordova?
      3. What is Ionic?
      4. Software setup
        1. Install Node.js
        2. Install Git
        3. Install Bower
        4. Install Gulp
        5. Install Sublime Text
        6. Install Cordova and Ionic CLI
      5. The platform guide
      6. Hello Ionic
      7. The browser developer tools setup
        1. Google Chrome
        2. Mozilla Firefox
      8. The Ionic project structure
        1. The config.xml file
        2. The www folder
      9. Scaffolding the tabs template
      10. Scaffolding the side menu template
      11. generator-ionic
        1. Installing generator-ionic
      12. Summary
    12. 3. Ionic CSS Components and Navigation
      1. Ionic CSS components
        1. The Ionic grid system
        2. The page structure
        3. Buttons
        4. Lists
        5. Cards
        6. Ionicons
        7. Form elements
        8. Integrating Ionic CSS components with AngularJS
      2. The Ionic router
        1. A simple two-page app
      3. Summary
    13. 4. Ionic and SCSS
      1. What is Sass?
      2. Setting up SCSS in our Ionic project
        1. The manual setup
        2. The Ionic CLI task
      3. Working with Ionic SCSS
        1. Basic swatch
      4. Understanding the Ionic SCSS setup
        1. Using variables and mixins
      5. The SCSS workflow
      6. Building a swatch
      7. Summary
    14. 5. Ionic Directives and Services
      1. Ionic directives and services
      2. The Ionic Platform service
        1. registerBackButtonAction
        2. The on method
        3. Headers and footers
      3. Content
        1. ion-content
        2. ion-scroll
        3. ion-refresher
        4. ion-infinite-scroll
        5. $ionicScrollDelegate
        6. Navigation
        7. ion-view
        8. Ionic view events
        9. ion-nav-bar
        10. ion-nav-buttons
        11. $ionicNavBarDelegate
        12. $ionicHistory
        13. Tabs and side menu
      4. Ionic loading
        1. The Action Sheet service
        2. Popover and Popup services
        3. $ionicPopup
      5. The ion-list and ion-item directives
      6. Gesture directives and services
        1. Utilities
      7. Summary
    15. 6. Building a Bookstore App
      1. An introduction to the Bookstore application
      2. The Bookstore architecture
        1. The server architecture
        2. The server-side API documentation
        3. The client architecture
        4. Code on GitHub
        5. A Bookstore demo
          1. The development flow
      3. Setting up the server
      4. Building the application
        1. Step 1 – Scaffolding the side menu template
        2. Step 2 – Refactoring the template
          1. Refactoring the menu
          2. Refactoring the module name
          3. Adding a run method and modifying routes
          4. Refactoring templates
        3. Step 3 – Building authentication, localStorage, and the REST API factory
          1. The Ionic loading factory
          2. The localStorage factory
          3. The Authentication factory
          4. The REST API factory
        4. Step 4 – Creating controllers for each route and integrating with the factory
          1. The application controller
          2. The browse controller
          3. The book controller
          4. The cart controller
          5. The purchase controller
        5. Step 5 – Creating templates and integrating with the controller data
          1. The Login template
          2. The Browse template
          3. The Book template
          4. The Cart template
          5. The Purchase template
      5. Summary
    16. 7. Cordova and ngCordova
      1. Setting up a platform-specific SDK
        1. The Android setup
        2. The iOS setup
      2. Testing the setup
        1. Testing for Android
        2. Testing for iOS
      3. Getting started with Cordova plugins
      4. The Ionic plugin API
        1. Add a plugin
        2. Remove a plugin
        3. List added plugins
        4. Search plugins
      5. The Cordova whitelist plugin
      6. ngCordova
        1. Setting up ngCordova
        2. Legend
        3. $cordovaToast
        4. $cordovaDialogs
        5. $cordovaFlashlight
        6. $cordovaLocalNotification
        7. $cordovaGeolocation
      7. Summary
    17. 8. Building a Messaging App
      1. The Ionic Chat app
        1. Firebase
          1. Setting up a Firebase account
          2. AngularFire
      2. The application architecture
        1. Authentication
        2. The application flow
        3. Previewing the app
        4. Data structure
        5. Cordova plugins
        6. Code on GitHub
      3. Developing the application
        1. Scaffolding and setting up the app
        2. Installing the required Cordova plugins
        3. Getting the Google API key
        4. Setting up routes and route authentication
        5. Setting up services/factories
        6. Setting up a map directive
        7. Setting up controllers
        8. Setting up templates
        9. Setting up SCSS
      4. Testing the application
      5. Summary
    18. 9. Releasing the Ionic App
      1. Preparing the app for distribution
        1. Setting up icons and splash screens
        2. Updating the config.xml file
      2. The PhoneGap service
      3. Generating installers using the Cordova CLI
        1. Android installer
        2. iOS installer
      4. The Ionic package
        1. Uploading the project to Ionic cloud
        2. Generating the required keys
      5. Summary
    19. A. Additional Topics and Tips
      1. Ionic CLI
        1. Ionic login
        2. Ionic start task
          1. No Cordova flag
          2. Initialize a project with SCSS support
          3. Listing all Ionic templates
          4. App ID
        3. Ionic link
        4. Ionic info
        5. Ionic templates
        6. Ionic browsers
        7. Ionic lib
        8. Ionic state
        9. Ionic ions
        10. Ionic resources
        11. Ionic server, emulate, and run
        12. Ionic upload and share
          1. Ionic view
          2. Ionic help and docs
      2. Ionic Creator
      3. Ionic.io apps
      4. Ionic Push
      5. Ionic Deploy
      6. Ionic Vagrant box
      7. Ionic Sublime Text plugins
      8. Summary
    20. Index