Book Image

Getting Started with Ionic

By : Rahat Khanna
Book Image

Getting Started with Ionic

By: Rahat Khanna

Overview of this book

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.
Table of Contents (17 chapters)
Getting Started with Ionic
Credits
Foreword
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Index

A

  • anatomy, Hybrid Mobile Application
    • about / Anatomy of a Hybrid Mobile App
    • custom WebView / Custom WebView
    • native library / Native library
    • native code, calling to JS Bridge / Native to JS Bridge
  • AngularJS
    • about / What is AngularJS?
    • concepts / Important concepts in AngularJS
    • modules / Modules
    • directive / Directives
    • controllers / Controllers
    • services / Services
    • templates / Templates
    • expressions / Expressions
    • filters / Filters
  • Angular UI Router
    • about / Introduction to Angular UI Router
    • states / States and URLs
    • URLs / States and URLs
    • nested states / Nested states and views
    • views / Nested states and views
    • dot notation, using / Using the dot notation
    • parent property, using / Using the parent property
    • object-based states, using / Using object-based states
    • nested views, views / Views for nested views
    • transition, to state / Ways to transition to a state
    • abstract state / Abstract state
    • multiple views, setting / Multiple and named views
    • state parameters / State parameters
  • Apache Cordova
    • using / Why use Apache Cordova?
  • app.js file / App.js and the root module
  • Apple Push Notification Server (APNS) / Push Notifications
  • Apple Push Notification Services (APNS) / Ionic Push
  • attributes, ion-content directive
    • direction [string] / ion-content
    • scroll [boolean] / ion-content
    • overflow-scroll [boolean] / ion-content
    • start-x [string] / ion-content
    • start-y [string] / ion-content
    • has-bouncing [boolean] / ion-content

B

  • blank template / The blank template
  • BooksFactory
    • about / Ionic factory – BooksFactory
  • BookStore
    • about / E-commerce sample app – BookStore
    • features / Features
    • architecture / Architecture and design
    • design / Architecture and design
    • navigation / Navigation and layout to be used in BookStore
    • layout / Navigation and layout to be used in BookStore
  • Brackets
    • URL / Brackets
  • buttons, CSS components
    • about / Buttons
    • icon buttons / Icon buttons
    • bar / Button bar

C

  • camera plugin
    • about / Camera plugin
  • capabilities, Ionic Lab
    • app creation / Ionic Lab
    • app, running / Ionic Lab
    • builds, making / Ionic Lab
    • app, previewing / Ionic Lab
    • app logs / Ionic Lab
  • cards, CSS components / Cards
  • CDN-hosted library files
    • using / Method 1 – using CDN-hosted library files
  • Code Editors
    • about / Using Ionic Framework with different Code Editors
    • brackets / Brackets
    • Sublime Text / Sublime Text
    • Visual Studio / Visual Studio
  • config.xml
    • URL / Project folder structure and important files
  • config method / Modules
  • contacts plugin / Contacts
  • controllers, AngularJS
    • about / Controllers
  • Cordova plugin
    • about / Introduction to Cordova plugins
    • managing / Plugin management
    • custom development / Custom Cordova plugin development
  • Cross compiled Hybrid Apps / Cross-compiled Hybrid Apps
  • CSS components
    • about / Ionic CSS components
    • header / Header
    • footer / Footer
    • buttons / Buttons
    • lists / Lists
    • cards / Cards
    • forms / Forms
    • input elements / Input elements
    • tabs / Tabs
    • grid / Grid
    • utility / Utility

D

  • Dependency Injection (DI) / Modules, Ionic service – authentication service
  • directives, AngularJS
    • about / Directives
  • dummy app
    • building / Building a dummy app

E

  • events, JS components / Gestures and events
  • expressions, AngularJS / Expressions

F

  • features, Ionic v2
    • Angular 2 / Angular 2, ES6, and Typescript
    • ES6 / Angular 2, ES6, and Typescript
    • Typescript / Angular 2, ES6, and Typescript
    • abstracted annotations / Abstracted annotations
    • material design / Material design
    • enhanced native integration / Enhanced Native Integration
    • powerful theming / Powerful Theming
    • improved navigation and routing / Improved navigation and routing
  • files, Ionic Project
    • bower.json / Project folder structure and important files
    • config.xml / Project folder structure and important files
    • gulpfile.js / Project folder structure and important files
    • package.json / Project folder structure and important files
  • filters, AngularJS / Filters
  • Firebase
    • integration / Integrating to Firebase
    • URL / Integrating to Firebase
  • folders, Ionic Project
    • hooks / Project folder structure and important files
    • platforms / Project folder structure and important files
    • plugins / Project folder structure and important files
    • resources / Project folder structure and important files
    • scss / Project folder structure and important files
    • www / Project folder structure and important files
  • footer, CSS components / Footer
  • form inputs, JS components
    • about / Form inputs
    • ion-checkbox directive / The <ion-checkbox> directive
    • ion-radio directive / The <ion-radio> directive
    • ion-toggle directive / The <ion-toggle> directive
  • forms, CSS components / Forms

G

  • Geolocation Cordova plugin / Geolocation
  • gesture events
    • about / Gesture events
    • on-hold / Gesture events
    • on-tap / Gesture events
    • on-double-tap / Gesture events
    • on-touch / Gesture events
    • on-release / Gesture events
    • on-drag / Gesture events
    • on-drag-up / Gesture events
    • on-drag-right / Gesture events
    • on-drag-left / Gesture events
    • on-drag-down / Gesture events
    • on-swipe / Gesture events
    • on-swipe-up / Gesture events
    • on-swipe-right / Gesture events
    • on-swipe-left / Gesture events
    • on-swipe-down / Gesture events
  • gestures, JS components / Gestures and events
  • git
    • URL / Popular issues faced and solutions
  • Google Cloud Messaging (GCM) / Push Notifications, Ionic Push
  • grid, CSS components / Grid

H

  • $http constructor method / The $http constructor method
  • $http services
    • about / $http services
    • response object / The response object
    • $http constructor method / The $http constructor method
  • header, CSS components / Header
  • Hybrid Mobile Application
    • about / Introducing a Hybrid Mobile Application
    • types / Types of Hybrid Mobile Apps
    • anatomy / Anatomy of a Hybrid Mobile App

I

  • $ionicBackdrop / Backdrop - $ionicBackdrop
  • $ionicConfigProvider / $ionicConfigProvider
  • $ionicGesture service
    • abut / The $ionicGesture service
    • on method / The on method
    • off method / The off method
  • $ionicLoading / Loading – $ionicLoading
  • $ionicModal
    • about / Modal – $ionicModal
    • IonicModal controller / The IonicModal controller
  • $ionicPopover
    • about / Popover – $ionicPopover
  • $ionicPosition / $ionicPosition
  • <ion-nav-bar> directive / Navigation and back menus
  • <ion-nav-title> directive / Navigation and back menus
  • <ion-side-menu-content> directive / The <ion-side-menu-content> directive
  • <ion-side-menu> directive / The <ion-side-menu> directive
  • <ion-side-menus> directive
    • about / The <ion-side-menus> directive
    • enable-menu-with-back-views(optional) attribute / The <ion-side-menus> directive
    • delegate-handle(optional) attribute / The <ion-side-menus> directive
  • <ion-tab> directive
    • about / The <ion-tab> directive
    • title attribute / The <ion-tab> directive
    • href (optional) / The <ion-tab> directive
    • icon (optional) / The <ion-tab> directive
    • icon-off (optional) / The <ion-tab> directive
    • icon-on (optional) / The <ion-tab> directive
    • badge (optional) / The <ion-tab> directive
    • on-select (optional) / The <ion-tab> directive
    • on-deselect (optional) / The <ion-tab> directive
  • <ion-tabs> directive
    • about / The <ion-tabs> directive
    • tabs-<theme_name> / The <ion-tabs> directive
    • tabs-icon-only / The <ion-tabs> directive
    • tabs-icon-top / The <ion-tabs> directive
    • tabs-icon-left / The <ion-tabs> directive
    • delegate-handle(optional) attribute / The <ion-tabs> directive
  • <ion-view> directive
    • back menus / Navigation and back menus
  • index.html file / The index.html file
  • input elements, CSS components
    • about / Input elements
    • checkbox / Checkbox
    • radio button list / Radio button list
    • toggle control / Toggle
    • range control / Range
  • ion-content
    • about / ion-content
  • ion-content directive
    • attributes / ion-content
  • ion-footer-bar directive
    • about / The <ion-footer-bar> directive
    • align-title(optional) attribute / The <ion-footer-bar> directive
  • ion-header-bar directive
    • align-title(optional) attribute / The <ion-header-bar> directive
    • no-tap-scroll(optional) attribute / The <ion-header-bar> directive
  • ion-pane directive
    • about / ion-pane
  • ion-spinner / Spinner – ion-spinner
  • Ionic Analytics / Ionic Analytics
  • Ionic App
    • ngCordova, integrating to / Integrating ngCordova to Ionic App
  • Ionic CDN
    • URL / Method 1 – using CDN-hosted library files
  • Ionic CLI
    • using, locally / Method 3 – using Ionic CLI locally
  • Ionic cloud services
    • about / Ionic cloud services
    • Ionic Creator / Ionic Creator
    • Ionic Market / Ionic Market
    • Ionic Push / Ionic Push
    • Ionic Deploy / Ionic Deploy
    • Ionic Analytics / Ionic Analytics
    • Ionic Package / Ionic Package
    • Ionic Lab / Ionic Lab
  • Ionic Creator
    • about / Starting a new project, Ionic Creator
    • used, for designing Ionic Project / Method 2 – using Ionic Creator to design a prototype and start a project
    • used, for designing prototype / Method 2 – using Ionic Creator to design a prototype and start a project
  • Ionic Deploy
    • about / Ionic Deploy
    • using / Using Ionic Deploy
    • URL / Using Ionic Deploy
  • Ionic Factory / Ionic factory – BooksFactory
  • Ionic framework
    • about / Introducing Ionic Framework
  • Ionic Framework
    • using, with different Code Editors / Using Ionic Framework with different Code Editors
    • using, with Brackets / Brackets
    • using, with Visual Studio / Visual Studio
    • navigation support / Navigation and back menus
    • back menus / Navigation and back menus
  • Ionic header and footer
    • about / Ionic header and footer
    • ion-header-bar directive / The <ion-header-bar> directive
    • ion-footer-bar directive / The <ion-footer-bar> directive
  • Ionic Lab / Method 2 – using Ionic Creator to design a prototype and start a project
    • about / Ionic Lab
    • capabilities / Ionic Lab
  • Ionic Market
    • about / Ionic Market
  • IonicModal controller
    • about / The IonicModal controller
    • initialize(options) / initialize(options)
  • Ionic Package
    • about / Ionic Package
    • URL / Ionic Package
  • Ionic Play
    • about / Alternative to installation fuss – Ionic Playground
    • URL / Alternative to installation fuss – Ionic Playground
  • Ionic Project
    • building / Starting a new project
    • anatomy / The anatomy of Ionic Project
    • folder structure / Project folder structure and important files
    • folders and files / Project folder structure and important files
    • components / Main components
    • index.html file / The index.html file
    • app.js / App.js and the root module
    • root module / App.js and the root module
    • ion-content directive / Simple content directives – ion-content and ion-pane, ion-content
    • ion-pane directive / Simple content directives – ion-content and ion-pane, ion-pane
  • Ionic Project, building
    • CDN-hosted library files, using / Method 1 – using CDN-hosted library files
    • Ionic Creator, using for prototype design / Method 2 – using Ionic Creator to design a prototype and start a project
    • Ionic CLI, using locally / Method 3 – using Ionic CLI locally
  • Ionic Push
    • about / Ionic Push
    • enabling / Ionic Push
  • Ionic services
    • versus factories / Ionic services vs factories
    • authentication service / Ionic service – authentication service
  • Ionic side menu
    • about / Ionic side menu
    • <ion-side-menus> directive / The <ion-side-menus> directive
    • <ion-side-menu> directive / The <ion-side-menu> directive
    • <ion-side-menu-content> directive / The <ion-side-menu-content> directive
    • menu-close directive / Other important directives
    • menu-toggle / Other important directives
    • expose-aside-when / Other important directives
  • Ionic starter template
    • about / The Ionic starter template
    • blank template / The blank template
    • tabs template / The tabs template
    • sidemenu template / The sidemenu template
    • maps template / The maps template
  • Ionic Tabs
    • about / Ionic Tabs
    • <ion-tabs> directive / The <ion-tabs> directive
    • <ion-tab> directive / The <ion-tab> directive
  • Ionic v2
    • about / Ionic v2
    • new features / New features
    • migrating to / Migration to v2
  • iOS Push Notifications
    • URL / Ionic Push
  • issues
    • about / Popular issues faced and solutions
    • permission issue [Mac or Linux / Popular issues faced and solutions
    • npm global modules / Popular issues faced and solutions
    • Git command-line tool not installed / Popular issues faced and solutions

J

  • JS components
    • about / Ionic JS components
    • $ionicActionSheet / Actionsheet – $ionicActionSheet
    • $ionicBackdrop / Backdrop - $ionicBackdrop
    • form inputs / Form inputs
    • gestures / Gestures and events
    • events / Gestures and events
    • $ionicGesture service / The $ionicGesture service
    • gesture events / Gesture events
    • lists / Lists
    • $ionicLoading / Loading – $ionicLoading
    • $ionicModal / Modal – $ionicModal
    • $ionicPopover / Popover – $ionicPopover
    • ion-spinner / Spinner – ion-spinner
  • JS files
    • URL / Controllers
  • JS SDK
    • URL / Using SDK – downloading and overview, Using REST API

L

  • lists, CSS components
    • about / Lists
    • dividers / List dividers
    • icons / List icons
    • buttons / List buttons
    • item avatars / Item avatars or thumbnails
    • thumbnails / Item avatars or thumbnails
  • lists, JS components
    • about / Lists
    • <ion-list> directive / The <ion-list> directive

M

  • maps template / The maps template
  • mBaaS
    • demystifying / Demystifying mBaaS
    • Parse / Demystifying mBaaS
    • Firebase / Demystifying mBaaS
    • Azure Mobile Services / Demystifying mBaaS
    • Kinvey / Demystifying mBaaS
    • Anypresence / Demystifying mBaaS
  • miscellaneous components
    • $ionicPosition / $ionicPosition
    • $ionicConfigProvider / $ionicConfigProvider
  • Mobile Apps
    • developing, with web technologies / Using web technologies to develop for mobile
  • modules, AngularJS / Modules
  • multiple views / Multiple and named views

N

  • named view
    • about / Multiple and named views
    • relative, versus abstract / View names – relative versus abstract
  • network device plugin
    • about / Network
    • sensors / Device sensors
  • ngCordova
    • integrating, to Ionic App / Integrating ngCordova to Ionic App
    • URL / Integrating ngCordova to Ionic App

O

  • Options property
    • quality / Camera plugin
    • cameraDirection / Camera plugin
    • sourceType / Camera plugin
    • mediaType / Camera plugin
    • encodingType / Camera plugin
    • correctOrientation / Camera plugin
    • destinationType / Camera plugin
    • allowEdit / Camera plugin
    • saveToPhotoAlbum / Camera plugin
    • targetWidth / Camera plugin
    • targetHeight / Camera plugin

P

  • Parse
    • integration / Integrating with Parse
    • platform sections / Integrating with Parse
    • Core / Integrating with Parse
    • Push / Integrating with Parse
    • Analytics / Integrating with Parse
    • app, creating / Step 1 – creating an app on Parse
    • URL / Step 1 – creating an app on Parse
    • API keys, obtaining / Step 2 – getting API keys
    • setting configuration / Step 3 – configuring appropriate settings
    • integrating, SDK used / Step 4 – integrating SDK or integrating using REST API
    • integrating, REST API used / Step 4 – integrating SDK or integrating using REST API
  • Phonegap Build
    • URL / Why use Apache Cordova?
  • plugins
    • about / Important plugins
    • camera plugin / Camera plugin
    • push notifications / Push Notifications
    • Geolocation Cordova plugin / Geolocation
    • contacts plugin / Contacts

Q

  • query parameters
    • about / Query parameters
    • single parameter / Query parameters
    • multiple parameters / The $stateParams service
    • $stateParams service / The $stateParams service

R

  • $resource
    • and REST API / $resource and REST API
  • resolve property / Resolve
  • response object
    • data property / The response object
    • status property / The response object
    • headers property / The response object
    • config property / The response object
    • statusText property / The response object
  • REST API
    • and $resource / $resource and REST API
    • used, for Parse integration / Step 4 – integrating SDK or integrating using REST API
    • using / Using REST API
  • REST API endpoint
    • URL / Ionic Push
  • REST principles
    • URL / Using REST API

S

  • SDK
    • used, for Parse integration / Step 4 – integrating SDK or integrating using REST API
    • downloading / Using SDK – downloading and overview
    • overview / Using SDK – downloading and overview
  • sensors, network device plugin
    • device motion / Device motion
    • orientation / Device orientation
  • services, AngularJS / Services
  • show method options
    • buttons / Actionsheet – $ionicActionSheet
    • titleText / Actionsheet – $ionicActionSheet
    • cancelText / Actionsheet – $ionicActionSheet
    • destructiveText / Actionsheet – $ionicActionSheet
    • buttonClicked / Actionsheet – $ionicActionSheet
    • cancel / Actionsheet – $ionicActionSheet
    • destructiveButtonClicked / Actionsheet – $ionicActionSheet
    • cancelOnStateChange / Actionsheet – $ionicActionSheet
    • cssClass / Actionsheet – $ionicActionSheet
  • sidemenu template / The sidemenu template
  • single page architecture (SPA) / Using web technologies to develop for mobile
  • state events
    • about / State events and resolve
    • $stateChangeStart / State events and resolve
    • $stateNotFound / State events and resolve
    • $stateChangeSuccess / State events and resolve
    • $stateChangeError / State events and resolve
  • state parameters
    • about / State parameters
    • basic parameters / Basic parameters
    • Regex parameters / Regex parameters
    • query parameters / Query parameters
  • Sublime Text
    • about / Sublime Text
    • URL / Sublime Text

T

  • tabs, CSS components / Tabs
  • tabs template / The tabs template
  • templates, AngularJS / Templates
  • types, Hybrid Mobile Application
    • WebView-based / WebView-based Hybrid Apps
    • Cross compiled / Cross-compiled Hybrid Apps

U

  • utility, CSS components / Utility

W

  • web technologies
    • used, for developing Mobile Apps / Using web technologies to develop for mobile
  • WebView-based Hybrid Apps / WebView-based Hybrid Apps
  • Windows Push Notification service (WNS) / Push Notifications