Sign In Start Free Trial

Learning Ionic

By : Ravulavaru

4.4 (14)

Learning Ionic

4.4 (14)

By: Ravulavaru

Overview of this book

This book is intended for those who want to learn how to build hybrid mobile applications using Ionic. It is also ideal for people who want to explore theming for Ionic apps. Prior knowledge of AngularJS is essential to complete this book successfully.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Ionic – Powered by AngularJS

1. Ionic – Powered by AngularJS

Understanding the separation of concerns

AngularJS components

AngularJS directives

AngularJS services

AngularJS resources

Summary

2. Welcome to Ionic

2. Welcome to Ionic

Mobile Hybrid Architecture

What is Apache Cordova?

What is Ionic?

Software setup

The platform guide

Hello Ionic

The browser developer tools setup

The Ionic project structure

Scaffolding the tabs template

Scaffolding the side menu template

generator-ionic

Summary

3. Ionic CSS Components and Navigation

3. Ionic CSS Components and Navigation

Ionic CSS components

The Ionic router

Summary

4. Ionic and SCSS

4. Ionic and SCSS

What is Sass?

Setting up SCSS in our Ionic project

Working with Ionic SCSS

Understanding the Ionic SCSS setup

The SCSS workflow

Building a swatch

Summary

5. Ionic Directives and Services

5. Ionic Directives and Services

Ionic directives and services

The Ionic Platform service

Content

Ionic loading

The ion-list and ion-item directives

Gesture directives and services

Summary

6. Building a Bookstore App

6. Building a Bookstore App

An introduction to the Bookstore application

The Bookstore architecture

Setting up the server

Building the application

Summary

7. Cordova and ngCordova

7. Cordova and ngCordova

Setting up a platform-specific SDK

Testing the setup

Getting started with Cordova plugins

The Ionic plugin API

The Cordova whitelist plugin

ngCordova

Summary

8. Building a Messaging App

8. Building a Messaging App

The Ionic Chat app

The application architecture

Developing the application

Testing the application

Summary

9. Releasing the Ionic App

9. Releasing the Ionic App

Preparing the app for distribution

The PhoneGap service

Generating installers using the Cordova CLI

The Ionic package

Summary

A. Additional Topics and Tips

A. Additional Topics and Tips

Ionic CLI

Ionic Creator

Ionic.io apps

Ionic Push

Ionic Deploy

Ionic Vagrant box

Ionic Sublime Text plugins

Summary

Index

Index

Customer Reviews

4.4 (14)

5 star

64.3%

4 star

21.4%

3 star

7.1%

2 star

0

1 star

7.1%

Testing the setup

Let's take a look at how we can test the setup for Android and iOS.

Testing for Android

To test the setup, we will scaffold a new Ionic application, and emulate that using the Android and iOS emulators.

We will first scaffold a tabs application:

ionic start -a "Example 27" -i app.example.twentyseven example27 tabs

To test the tabs application, using the cd command go to the example27 folder and run this:

ionic serve

This will launch the app in the browser and you should be able to see the tabs application.

To emulate the app on an Android emulator, first we need to add Android platform support for this project and then emulate it.

To add the Android platform, run this:

ionic platform add android

Once that is done, run the following command:

ionic emulate android

After some time, you will see the emulator launch, and the app will be deployed and executed inside the emulator:

If you have already worked with native Android apps, you know how slow the Android emulator is. If you...

Search

Your notes and bookmarks