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%

Mobile Hybrid Architecture

Before we start working with Ionic, we need to understand the bigger picture of the Mobile Hybrid platform.

The concept is pretty simple. Almost every mobile operating system (also called Platform when working with Cordova) has an API to develop apps. This API consists of a component named Web View. A Web View is typically a browser that runs inside the scope of a mobile application. This browser runs the HTML, CSS, and JS codes. This means that you can build a web page using the preceding technologies and then execute it inside your app.

You can use the same knowledge of web development to build native-hybrid mobile apps (here, native refers to installing the platform-specific format file on the device after it has been packaged along with the assets), for instance:

Android uses Android Application Package (.apk)
iOS uses iPhone Application Archive (.ipa)
Windows Phone uses Application Package (.xap)

The package/installer consists of a piece of native code that initializes...

Search

Your notes and bookmarks