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%

Ionic CSS components

Ionic is a combination of a powerful mobile CSS framework and a bunch of awesome AngularJS directives and services. With these, the time taken to market any idea is quite minimal. The Ionic CSS framework consists of most of the components you need to build an app.

To test-drive the available CSS components, we will scaffold a blank starter template and then add the visual components of Ionic.

Before we start scaffolding, we will create a new folder named chapter3, and scaffold all the examples from this chapter in that folder.

Note

In this chapter, we will be scaffolding one app per component to understand it better. If you want, you can use one app for all the examples.

To scaffold a blank app, run this:

ionic start -a "Example 5" -i app.example.five example5 blank

The Ionic grid system

To get a fine grain control of your layout in terms of positioning the components on the page or aligning elements next to each other with consistency, you need a grid system, and...

Search

Your notes and bookmarks