Getting Started with Ionic电子书

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

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