Getting Started with Ionic

Table of Contents

Getting Started with Ionic

Credits

Foreword

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Running the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. All About Hybrid Mobile Apps and Ionic Framework

Introducing a Hybrid Mobile Application

Types of Hybrid Mobile Apps

WebView-based Hybrid Apps

Cross-compiled Hybrid Apps

Anatomy of a Hybrid Mobile App

Custom WebView

Native library

Native to JS Bridge

Using web technologies to develop for mobile

What is AngularJS?

Important concepts in AngularJS

Modules

Directives

Controllers

Services

Templates

Expressions

Filters

Why use Apache Cordova?

Introducing Ionic Framework

Summary

2. Setting up the Environment the Right Way

Setting up Native Mobile development environments

For iOS

Installing and running simulators for testing

For Android

Download links

Setting the environment variables

For Windows

For Linux/Mac OS

Managing Android SDK and emulators

Alternative to Android emulators – Genymotion

Ionic development environment

Installing NodeJS

Basic npm commands

Installing Cordova CLI and Ionic CLI

Installation command for Cordova CLI

Basic Ionic CLI commands

Building a dummy app

Popular issues faced and solutions

Alternative to installation fuss – Ionic Playground

Using Ionic Framework with different Code Editors

Brackets

Sublime Text

Visual Studio

Summary

3. Start Building Your First Ionic App

Starting a new project

Multiple ways to start a project

Method 1 – using CDN-hosted library files

Method 2 – using Ionic Creator to design a prototype and start a project

Method 3 – using Ionic CLI locally

The anatomy of Ionic Project

Project folder structure and important files

Main components

The index.html file

App.js and the root module

Simple content directives – ion-content and ion-pane

ion-content

ion-pane

The Ionic starter template

The blank template

The tabs template

The sidemenu template

The maps template

E-commerce sample app – BookStore

Features

Architecture and design

Summary

4. Navigation and Routing in an Ionic App

Introduction to Angular UI Router

States and URLs

Nested states and views

Using the dot notation

Using the parent property

Using object-based states

Views for nested views

Ways to transition to a state

Abstract state

Multiple and named views

View names – relative versus abstract

State parameters

Basic parameters

Regex parameters

Query parameters

Single parameter

Multiple parameters

The $stateParams service

State events and resolve

Resolve

Ionic header and footer

The directive

The directive

Ionic Tabs

The directive

The directive

Ionic side menu

The directive

The directive

The directive

Other important directives

Navigation and back menus

Navigation and layout to be used in BookStore

Summary

5. Accessorizing Your App with Ionic Components

Ionic CSS components

Header

Footer

Buttons

Icon buttons

Button bar

Lists

List dividers

List icons

List buttons

Item avatars or thumbnails

Cards

Forms

Input elements

Checkbox

Radio button list

Toggle

Range

Tabs

Grid

Utility

Ionic JS components

Actionsheet – $ionicActionSheet

Backdrop - $ionicBackdrop

Form inputs

The directive

The directive

The directive

Gestures and events

The $ionicGesture service

The on method

The off method

Gesture events

Lists

The directive

Loading – $ionicLoading

Modal – $ionicModal

The IonicModal controller

initialize(options)

Popover – $ionicPopover

Spinner – ion-spinner

Miscellaneous components

$ionicPosition

$ionicConfigProvider

Summary

6. Integrating App with Backend Services

$http services

The response object

The $http constructor method

Ionic services vs factories

Ionic service – authentication service

Ionic factory – BooksFactory

$resource and REST API

Demystifying mBaaS

Integrating with Parse

Step 1 – creating an app on Parse

Step 2 – getting API keys

Step 3 – configuring appropriate settings

Step 4 – integrating SDK or integrating using REST API

Using SDK – downloading and overview

Using REST API

Integrating to Firebase

Summary

7. Testing App on Real Devices

Testing on browser emulators

Overview of device mode in Chrome dev tools

Ionic view app

The Ionic upload command

Viewing your app

Making debug build

Android debug build

iOS debug build

Remote debugging

Remote debugging using Chrome dev tools

Android debugging

iOS debugging

Remote debugging using jsconsole.com

Testing using Ngrok

Summary

8. Working with Cordova Plugins – ngCordova

Introduction to Cordova plugins

Plugin management

Integrating ngCordova to Ionic App

Important plugins

Camera plugin

Push Notifications

Geolocation

Contacts

Network

Device sensors

Device motion

Device orientation

Custom Cordova plugin development

Summary

9. Future of Ionic

Ionic cloud services

Ionic Creator

Ionic Market

Ionic Push

Ionic Deploy

Using Ionic Deploy

Ionic Analytics

Ionic Package

Ionic Lab

Ionic v2

New features

Angular 2, ES6, and Typescript

Abstracted annotations

Material design

Enhanced Native Integration

Powerful Theming

Improved navigation and routing

Migration to v2

Summary

Index

Getting Started with Ionic

Getting Started with Ionic

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2016

Production reference: 1070116

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78439-057-0

www.packtpub.com

Credits

Author

Rahat Khanna

Reviewer

Nikola Brežnjak

Commissioning Editor

Dipika Gaonkar

Acquisition Editor

Aaron Lazar

Content Development Editor

Priyanka Mehta

Technical Editor

Dhiraj Chandanshive

Copy Editor

Joanna McMahon

Project Coordinator

Izzat Contractor

Proofreader

Safis Editing

Indexer

Rekha Nair

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

Foreword

This book is the result of four months of intensive writing and coding on the part of Rahat Khanna, a dedicated Ionic community member, experienced developer, and excellent writer. We were really happy to hear that Rahat was writing an Ionic book because we think very highly of his blog posts, which have also been very popular among members of our developer community.

The book is ideal for new Ionic developers who have some prior web development experience. The book contains code samples related to a single app that readers build as they move from chapter to chapter.

In the first few chapters, Rahat offers a solid conceptual base for Angular and for Hybrid Mobile App development in general. He teaches users how to set up a native development environment and use the Ionic command-line interface.

In later chapters, Rahat takes a deep dive into Ionic's architecture and different components. Experienced Ionic developers will appreciate his chapters on integrating backend services and mBaaS with Ionic apps.

In addition, the book touches upon Ionic Platform Services and Ionic 2's new features and migration path.

By the time they complete this book, readers will be able to build a mobile application with a native-looking user interface and interactions with device APIs and publish it to the app stores.

I began my career as a developer and built many internal Hybrid Apps for my company. I chose Ionic because it offered the only complete solution for Hybrid Mobile App development, which allows me to focus on development; whereas Ionic handled architecture and design. Ionic offers a complete ecosystem to build performant, beautiful mobile apps using a single code base, which saves organization's both money and time and allows them to leverage the existing skills of their web developers.

As a core team member of Ionic and Ionic's developer advocate, I travel around the U.S. to speak about Ionic and teach developers how to use it. I hope that you find this book to be a great introduction to Ionic and also a way to build upon your existing skills.

Mike Harlington

Providence, Rhode Island

About the Author

Rahat Khanna is a techno-nerd experienced in developing web and mobile apps for many international MNCs and start-ups. He has completed his Bachelors in Technology with Computer Science & Engineering as specialisation. During the past 7 years, he has worked for a multinational IT service company and ran his own entrepreneurial venture also in his early twenties. He has worked on ranging projects from static HTML websites to scalable web applications and engaging mobile apps. Along with his current job as a Senior UI developer at Flipkart, a billion dollar e-commerce firm, he now blogs on the latest technology frameworks on sites www.airpair.com, appsonmob.com, and so on and delivers talks at community events. He has been helping individual developers and startups in their Ionic projects to deliver amazing mobile apps.

I live in Bangalore, India with my wife Palak who has been instrumental in motivating me to share my knowledge with the world and write this book. Also, I would like to thank my parents and family to support me in my endeavours. I would also like to thank Packt Publishing and their entire team for helping constantly throughout the whole experience of finishing the book. Finally, I am also indebted to all my career mentors and colleagues especially Sunil Khokhar and Rahul Luthra who have helped me in constantly learning new things and growing as a professional.

About the Reviewer

Nikola Brežnjak is an engineer at heart and a jack-of-all-trades kind of guy. For those who care about titles, he has a master's degree in computing. For the past eight years, he worked in the betting software industry where he made use of his knowledge in areas ranging from full stack (web and desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few). Recently, he's been interested in the Ionic Framework, and he likes to help out on StackOverflow where he is currently in the top 0.X%.

He self-published the book Getting MEAN with MEMEs via Leanpub, available at https://leanpub.com/meantodo. Also, he self-published the book about Ionic Framework via Leanpub, https://leanpub.com/ionic-framework. He was a technical reviewer for the book Deploying Node.js, Sandro Pasquali, as well as for the video Beginning Ionic Hybrid Application Development, Troy Miles, both by Packt Publishing. You can find out more about him through his blog at http://www.nikola-breznjak.com/blog.

He lives in Croatia with his lovely wife and daughter whom he would like to thank to support him in all his geeky endeavors. Also, he would like to thank his parents to teach him the power of hard and consistent work.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need