Learning Ionic电子书

Learning Ionic

Table of Contents

Learning Ionic

Credits

Foreword

About the Author

Acknowledgments

About the Reviewers

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

Downloading the color images of this book

Errata

Piracy

Questions

1. Ionic – Powered by AngularJS

Understanding the separation of concerns

AngularJS components

AngularJS directives

AngularJS services

AngularJS resources

Summary

2. Welcome to Ionic

Mobile Hybrid Architecture

What is Apache Cordova?

What is Ionic?

Software setup

Install Node.js

Install Git

Install Bower

Install Gulp

Install Sublime Text

Install Cordova and Ionic CLI

The platform guide

Hello Ionic

The browser developer tools setup

Google Chrome

Mozilla Firefox

The Ionic project structure

The config.xml file

The www folder

Scaffolding the tabs template

Scaffolding the side menu template

generator-ionic

Installing generator-ionic

Summary

3. Ionic CSS Components and Navigation

Ionic CSS components

The Ionic grid system

The page structure

Buttons

Lists

Cards

Ionicons

Form elements

Integrating Ionic CSS components with AngularJS

The Ionic router

A simple two-page app

Summary

4. Ionic and SCSS

What is Sass?

Setting up SCSS in our Ionic project

The manual setup

The Ionic CLI task

Working with Ionic SCSS

Basic swatch

Understanding the Ionic SCSS setup

Using variables and mixins

The SCSS workflow

Building a swatch

Summary

5. Ionic Directives and Services

Ionic directives and services

The Ionic Platform service

registerBackButtonAction

The on method

Headers and footers

Content

ion-content

ion-scroll

ion-refresher

ion-infinite-scroll

$ionicScrollDelegate

Navigation

ion-view

Ionic view events

ion-nav-bar

ion-nav-buttons

$ionicNavBarDelegate

$ionicHistory

Tabs and side menu

Ionic loading

The Action Sheet service

Popover and Popup services

$ionicPopup

The ion-list and ion-item directives

Gesture directives and services

Utilities

Summary

6. Building a Bookstore App

An introduction to the Bookstore application

The Bookstore architecture

The server architecture

The server-side API documentation

The client architecture

Code on GitHub

A Bookstore demo

The development flow

Setting up the server

Building the application

Step 1 – Scaffolding the side menu template

Step 2 – Refactoring the template

Refactoring the menu

Refactoring the module name

Adding a run method and modifying routes

Refactoring templates

Step 3 – Building authentication, localStorage, and the REST API factory

The Ionic loading factory

The localStorage factory

The Authentication factory

The REST API factory

Step 4 – Creating controllers for each route and integrating with the factory

The application controller

The browse controller

The book controller

The cart controller

The purchase controller

Step 5 – Creating templates and integrating with the controller data

The Login template

The Browse template

The Book template

The Cart template

The Purchase template

Summary

7. Cordova and ngCordova

Setting up a platform-specific SDK

The Android setup

The iOS setup

Testing the setup

Testing for Android

Testing for iOS

Getting started with Cordova plugins

The Ionic plugin API

Add a plugin

Remove a plugin

List added plugins

Search plugins

The Cordova whitelist plugin

ngCordova

Setting up ngCordova

Legend

$cordovaToast

$cordovaDialogs

$cordovaFlashlight

$cordovaLocalNotification

$cordovaGeolocation

Summary

8. Building a Messaging App

The Ionic Chat app

Firebase

Setting up a Firebase account

AngularFire

The application architecture

Authentication

The application flow

Previewing the app

Data structure

Cordova plugins

Code on GitHub

Developing the application

Scaffolding and setting up the app

Installing the required Cordova plugins

Getting the Google API key

Setting up routes and route authentication

Setting up services/factories

Setting up a map directive

Setting up controllers

Setting up templates

Setting up SCSS

Testing the application

Summary

9. Releasing the Ionic App

Preparing the app for distribution

Setting up icons and splash screens

Updating the config.xml file

The PhoneGap service

Generating installers using the Cordova CLI

Android installer

iOS installer

The Ionic package

Uploading the project to Ionic cloud

Generating the required keys

Summary

A. Additional Topics and Tips

Ionic CLI

Ionic login

Ionic start task

No Cordova flag

Initialize a project with SCSS support

Listing all Ionic templates

App ID

Ionic link

Ionic info

Ionic templates

Ionic browsers

Ionic lib

Ionic state

Ionic ions

Ionic resources

Ionic server, emulate, and run

Ionic upload and share

Ionic view

Ionic help and docs

Ionic Creator

Ionic.io apps

Ionic Push

Ionic Deploy

Ionic Vagrant box

Ionic Sublime Text plugins

Summary

Index