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

Getting Started with Ionic

Book Description

Get up and running with developing effective Hybrid Mobile Apps with Ionic

About This Book

  • Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS
  • Build mobile applications with a native UI and interactions with device APIs using popular web technologies such as HTML, CSS, and JavaScript
  • Create an e-commerce mobile app using tutorials and code samples

Who This Book Is For

This book is ideal for any web developer who wants to enter into the world of mobile app development but has no clue where to start. Ionic is an ideal starting point and provides a smooth learning curve to help you build hybrid apps using web technologies and to develop native apps for iOS and Android, you do not need to know multiple languages. This book will also be useful for Hybrid App developers who have not found the perfect framework to to ensure users get a rich experience from your apps.

What You Will Learn

  • Get to know about Hybrid Apps and AngularJS
  • Set up a development environment to build Hybrid Apps
  • Navigate around the components and routing in Ionic
  • Use different Ionic directives for a mobile-specific experience
  • Integrate an Ionic App with backend web services
  • Work with plugins to include native functionality in your hybrid apps
  • Test your apps on real devices
  • Build an e-commerce app for iOS and Android from scratch

In Detail

Hybrid Apps are a promising choice in mobile app development to achieve cost effectiveness and rapid development. However, they were not preferred over native apps until few years back due to a poor performance and bad user experience, but everything has changed with the release of Ionic. It has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps.

Getting Started with Ionic equips any web developer with the basic knowledge needed to use modern web technologies to build amazing hybrid mobile apps using Ionic.

This fast-paced, practical book explains all the important concepts of AngularJS and Cordova Framework required to develop apps, then gives you a brief introduction to hybrid mobile applications. It will guide you through setting up the environment to develop mobile apps, and through the multiple options and features available in Ionic so you can use them in your mobile apps. Features such as the Side Menu, Tabs, Touch Interactions, and native features such as Bar Code, Camera, and Geolocations are all covered.. Finally, we’ll show you how to use Cordova plugins and publish your apps.

Style and approach

Getting started with Ionic is a compact, easy-to-follow guide to developing hybrid mobile apps using Ionic with real world examples of building an e-commerce app.

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 code file.

Table of Contents

  1. Getting Started with Ionic
    1. Table of Contents
    2. Getting Started with Ionic
    3. Credits
    4. Foreword
    5. About the Author
    6. About the Reviewer
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. 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. Running the example code
        3. Downloading the color images of this book
        4. Errata
        5. Piracy
        6. Questions
    9. 1. All About Hybrid Mobile Apps and Ionic Framework
      1. Introducing a Hybrid Mobile Application
        1. Types of Hybrid Mobile Apps
          1. WebView-based Hybrid Apps
          2. Cross-compiled Hybrid Apps
        2. Anatomy of a Hybrid Mobile App
          1. Custom WebView
          2. Native library
          3. Native to JS Bridge
      2. Using web technologies to develop for mobile
      3. What is AngularJS?
        1. Important concepts in AngularJS
          1. Modules
          2. Directives
          3. Controllers
          4. Services
          5. Templates
          6. Expressions
          7. Filters
      4. Why use Apache Cordova?
      5. Introducing Ionic Framework
      6. Summary
    10. 2. Setting up the Environment the Right Way
      1. Setting up Native Mobile development environments
        1. For iOS
          1. Installing and running simulators for testing
        2. For Android
          1. Download links
          2. Setting the environment variables
        3. For Windows
        4. For Linux/Mac OS
          1. Managing Android SDK and emulators
          2. Alternative to Android emulators – Genymotion
      2. Ionic development environment
        1. Installing NodeJS
          1. Basic npm commands
        2. Installing Cordova CLI and Ionic CLI
          1. Installation command for Cordova CLI
      3. Basic Ionic CLI commands
      4. Building a dummy app
      5. Popular issues faced and solutions
      6. Alternative to installation fuss – Ionic Playground
      7. Using Ionic Framework with different Code Editors
        1. Brackets
        2. Sublime Text
        3. Visual Studio
      8. Summary
    11. 3. Start Building Your First Ionic App
      1. Starting a new project
      2. Multiple ways to start a project
        1. Method 1 – using CDN-hosted library files
        2. Method 2 – using Ionic Creator to design a prototype and start a project
        3. Method 3 – using Ionic CLI locally
      3. The anatomy of Ionic Project
        1. Project folder structure and important files
        2. Main components
          1. The index.html file
        3. App.js and the root module
          1. Simple content directives – ion-content and ion-pane
            1. ion-content
            2. ion-pane
      4. The Ionic starter template
        1. The blank template
        2. The tabs template
        3. The sidemenu template
        4. The maps template
      5. E-commerce sample app – BookStore
        1. Features
        2. Architecture and design
      6. Summary
    12. 4. Navigation and Routing in an Ionic App
      1. Introduction to Angular UI Router
        1. States and URLs
        2. Nested states and views
          1. Using the dot notation
          2. Using the parent property
          3. Using object-based states
          4. Views for nested views
          5. Ways to transition to a state
          6. Abstract state
        3. Multiple and named views
          1. View names – relative versus abstract
        4. State parameters
          1. Basic parameters
          2. Regex parameters
          3. Query parameters
            1. Single parameter
            2. Multiple parameters
              1. The $stateParams service
        5. State events and resolve
          1. Resolve
      2. Ionic header and footer
        1. The <ion-header-bar> directive
        2. The <ion-footer-bar> directive
      3. Ionic Tabs
        1. The <ion-tabs> directive
        2. The <ion-tab> directive
      4. Ionic side menu
        1. The <ion-side-menus> directive
        2. The <ion-side-menu> directive
        3. The <ion-side-menu-content> directive
        4. Other important directives
      5. Navigation and back menus
      6. Navigation and layout to be used in BookStore
      7. Summary
    13. 5. Accessorizing Your App with Ionic Components
      1. Ionic CSS components
        1. Header
        2. Footer
        3. Buttons
          1. Icon buttons
          2. Button bar
        4. Lists
          1. List dividers
          2. List icons
          3. List buttons
          4. Item avatars or thumbnails
        5. Cards
        6. Forms
        7. Input elements
          1. Checkbox
          2. Radio button list
          3. Toggle
          4. Range
        8. Tabs
        9. Grid
        10. Utility
      2. Ionic JS components
        1. Actionsheet – $ionicActionSheet
        2. Backdrop - $ionicBackdrop
        3. Form inputs
          1. The <ion-checkbox> directive
          2. The <ion-radio> directive
          3. The <ion-toggle> directive
        4. Gestures and events
        5. The $ionicGesture service
          1. The on method
          2. The off method
        6. Gesture events
        7. Lists
          1. The <ion-list> directive
        8. Loading – $ionicLoading
        9. Modal – $ionicModal
          1. The IonicModal controller
            1. initialize(options)
        10. Popover – $ionicPopover
        11. Spinner – ion-spinner
      3. Miscellaneous components
        1. $ionicPosition
        2. $ionicConfigProvider
      4. Summary
    14. 6. Integrating App with Backend Services
      1. $http services
        1. The response object
        2. The $http constructor method
      2. Ionic services vs factories
        1. Ionic service – authentication service
        2. Ionic factory – BooksFactory
      3. $resource and REST API
      4. Demystifying mBaaS
      5. Integrating with Parse
        1. Step 1 – creating an app on Parse
        2. Step 2 – getting API keys
        3. Step 3 – configuring appropriate settings
        4. Step 4 – integrating SDK or integrating using REST API
          1. Using SDK – downloading and overview
          2. Using REST API
      6. Integrating to Firebase
      7. Summary
    15. 7. Testing App on Real Devices
      1. Testing on browser emulators
        1. Overview of device mode in Chrome dev tools
      2. Ionic view app
        1. The Ionic upload command
        2. Viewing your app
      3. Making debug build
        1. Android debug build
        2. iOS debug build
      4. Remote debugging
        1. Remote debugging using Chrome dev tools
        2. Android debugging
        3. iOS debugging
        4. Remote debugging using jsconsole.com
      5. Testing using Ngrok
      6. Summary
    16. 8. Working with Cordova Plugins – ngCordova
      1. Introduction to Cordova plugins
        1. Plugin management
      2. Integrating ngCordova to Ionic App
      3. Important plugins
        1. Camera plugin
        2. Push Notifications
        3. Geolocation
        4. Contacts
      4. Network
        1. Device sensors
          1. Device motion
          2. Device orientation
      5. Custom Cordova plugin development
      6. Summary
    17. 9. Future of Ionic
      1. Ionic cloud services
        1. Ionic Creator
        2. Ionic Market
        3. Ionic Push
        4. Ionic Deploy
          1. Using Ionic Deploy
        5. Ionic Analytics
        6. Ionic Package
        7. Ionic Lab
      2. Ionic v2
        1. New features
          1. Angular 2, ES6, and Typescript
          2. Abstracted annotations
          3. Material design
          4. Enhanced Native Integration
          5. Powerful Theming
          6. Improved navigation and routing
        2. Migration to v2
      3. Summary
    18. Index