Getting Started with Ionic
eBook - ePub

Getting Started with Ionic

  1. 168 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Getting Started with Ionic

About this book

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

Tools to learn more effectively

Saving Books

Saving Books

Keyword Search

Keyword Search

Annotating Text

Annotating Text

Listen to it instead

Listen to it instead

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 <ion-header-bar> directive
The <ion-footer-bar> directive
Ionic Tabs
The <ion-tabs> directive
The <ion-tab> directive
Ionic side menu
The <ion-side-menus> directive
The <ion-side-menu> directive
The <ion-side-menu-content> 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 <ion-checkbox> directive
The <ion-radio> directive
The <ion-toggle> directive
Gestures and events
The $ionicGesture service
The on method
The off method
Gesture events
Lists
The <ion-list> 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
Plugi...

Table of contents

  1. Getting Started with Ionic

Frequently asked questions

Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn how to download books offline
Perlego offers two plans: Essential and Complete
  • Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
  • Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
Both plans are available with monthly, semester, or annual billing cycles.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 990+ topics, we’ve got you covered! Learn about our mission
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more about Read Aloud
Yes! You can use the Perlego app on both iOS and Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app
Yes, you can access Getting Started with Ionic by Rahat Khanna in PDF and/or ePUB format, as well as other popular books in Computer Science & Programming in JavaScript. We have over one million books available in our catalogue for you to explore.