Book Image

Learning Ionic, Second Edition - Second Edition

By : Arvind Ravulavaru
Book Image

Learning Ionic, Second Edition - Second Edition

By: Arvind Ravulavaru

Overview of this book

Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5, SCSS, and Angular. Ionic also makes app development easier, faster, and more fun. This hands-on guide will help you understand the Ionic framework and how you can leverage it to create amazing real-time applications. We begin by covering the essential features of Angular 2, and then dive straight into how Ionic fits in today’s world of hybrid app development and give you a better understanding of the mobile hybrid architecture along the way. Further on, you will learn how to work with Ionic decorators, services, and components, which will allow you to build complex apps using the Ionic framework. We will take a look at theming Ionic apps using the built-in SCSS setup. After that, we will explore Ionic Native, and you will learn how to integrate device-specific features, such as notifications, with the Ionic app. To complete our learning, we will be building a Rider app, using Ionic and Uber API, to book a ride. Next, you will learn how to unit test, end-to-end test, monkey test, and execute device testing on AWS Device farm. Then, we will take a look at migrating the existing Ionic 1 apps to Ionic 2 and deploy them to the App Store. The final chapter on Ionic 3 wraps up this book by explaining the new features of Ionic 3 at the time of writing this book. By the end of this book, you will be able to develop, deploy, and manage hybrid mobile applications built with Cordova, Ionic, and Angular. All the examples in this book are valid for both Ionic 2 and Ionic 3.
Table of Contents (13 chapters)

The Ionic Grid system

To get fine-grained 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 Ionic provides one.

The beauty of the Ionic Grid system is that it is FlexBox-based. FlexBox--or the CSS Flexible Box Layout Module--provides a box model for an optimized user interface design.

You can read more about FlexBox at:
http://www.w3.org/TR/css3-flexBox/
You can find an amazing tutorial about FlexBox at:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The advantage of a FlexBox-based grid system is that you need not have a fixed-column grid. You can define as many columns as you want inside a row and they will be automatically assigned with equal width. This way, unlike any other CSS-based grid systems, you need not worry about the sum of class names adding up to the total number of columns in the...