Ionic Framework By Example

By Yusuf Sani

Build amazing cross-platform mobile apps with Ionic, the HTML5 framework that makes modern mobile application development simple

About This Book

- Learn how to use one of the most exciting mobile development frameworks around to build even better apps
- Follow the featured sample projects to experience Ionic’s impressive capabilities
- Extend your developer skillset to build, test, and launch mobile apps with confidence

Who This Book Is For

This book is for anyone who wants to see Ionic in action - and find out how it could transform the way they build mobile apps. If you’re a JavaScript web developer, you’ll be building great projects in no time.

What You Will Learn

- Learn Ionic by creating three complete mobile applications
- Get to know the Ionic CLI
- Add basic and advanced features to the Ionic framework
- Connect an Ionic app with a Firebase back end
- Integrate PhoneGap plugins with NG-Cordova
- Test your apps to improve and optimize performance

In Detail

Change doesn’t have to be challenging. Sometimes it can be simple – sometimes it just makes sense. With Ionic, mobile development has never been so simple, so elegant and obvious. By helping developers to harness AngularJS and HTML5 for mobile development, it’s the perfect framework for anyone obsessed with performance, and anyone that understands just how important a great user experience really is.
This book shows you how to get started with Ionic framework immediately. But it doesn’t just give you instructions and then expect you to follow them. Instead it demonstrates what Ionic is capable of through three practical projects you can follow and build yourself.
From a basic to-do list app, a London tourist app, to a complete social media app, all three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you’ll quickly become a better mobile developer, delivering high performance mobile apps that look awesome.
Ionic Framework by Example is for people who don’t want to learn now, build later – it’s for people who want to learn and build at the same time – so they can meet today’s mobile development challenges head on and deliver better products than anyone else.

Style and approach

This book isn’t just an instruction manual. It doesn’t just tell you what to do – it shows you. Featuring three sample projects, it’s been created so you can get started with Ionic immediately.

• Language: English
• Publisher: Packt Publishing
• Release date: Jan 27, 2016
• ISBN: 9781782175414

Book preview

Table of Contents

Ionic Framework By Example

Credits

About the Author

Acknowledgments

About the Reviewer

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

Errata

Piracy

Questions

1. First Look at Ionic

The beginning

The problem

Apache Cordova

Early hybrid apps

What is Ionic?

Short history of Ionic

Features of Ionic

CSS features

JavaScript features

The Ionic CLI

Setting up Ionic

Summary

2. To-Do List App

Creating our first application

Creating our to-do list app

The Ionic workflow

In-depth look at our project

Envisioning our app

Building our todo app

Creating the UI

The code

Wiring things up

Summary

3. Running Ionic Apps

Running our todo app

The ionic serve technique

Emulating with Chrome

Ionic serve labs

The Ionic view

Testing todo app with the Ionic view

Device

Android

iOS

Summary

4. Ionic Components

Creating a new to-do list application

Overview of the Bucket-List app

Breaking down the app

Designing the UI

Implementing the input box

Implementing the ion-list application

Using ion-list for our Bucket-List app

The ion-list component

ion-item

ion-option-button

Writing the Angular code for our Bucket-List app

Coding our input box

Creating the controller

Creating the input box model

Creating an array for the Bucket-List items

Implementing code for the Add button

Implementing the Delete button

Wire it all up

Binding the controller

Binding the input box model

Wiring up the Add button

Binding ion-item

Using ng-repeat to render the list

Wiring up the ion-option-button element

Testing our Bucket-List app

Summary

5. The London Tourist App

Introduction to the London Tourist App

Creating the London Tourist app

The side menu app design

Using the Ionic side menu template

Seeing the LTA side menu app in action

Exploring the LTA side menu app's code

The index.html file

The menu.html file

The element

The element

The element

Developing the LTA application

The local JSON database

Creating the local JSON database file

Populating the JSON file

Designing the view

Wiring up the data

Retrieving the data with the $http service

Summary

6. Advanced Ionic Components

The Ionic Popover

Implementing the popover

Adding the menu button

Coding the popover

Adding the $ionicPopover service

Finishing the popover code

Creating the popover.html file

Wiring up the popover

The Ionic Modal

Creating the modal

Implementing the modal

Creating the modal.html file

Wiring up the modal

Summary

7. Customizing the App

Customizing the look and feel of your app

Ionic styles with SASS

Ionic SCSS overview

The ionic.app.scss file

Setting up SCSS

Customizing the SCSS

$ionicConfigProvider

Summary

8. Building a Simple Social App

The Ionic tabs application

Creating an Ionic tabs application

Running the tabs-app application

Overview of the tabs-app application

Overview of the tabs.html file

The element

Adding tabs to the tabs-app application

Adding the state for the new tab

Creating the tab-wall.html file

Creating the WallController controller

Creating the tab

Summary

9. Connecting to Firebase

Extending our tabs-app Ionic app

Implementing the post wall feature

The backend challenge

Firebase

Setting up a new Firebase account

Integrate Firebase into tabs-app application

Adding Firebase and Angular-Fire scripts

Implementing Firebase to our app

Pulling from database

Adding to database

Summary

10. Roundup

Uncovered features of Ionic

Appcamp.IO

The Ionic documentation

The Ionic creator

The Ionic code pen

Ionic.IO

The Ionic playground

The Ionic community

Useful resources

Summary

Index

Ionic Framework By Example

---

Ionic Framework By Example

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2016

Production reference: 1200116

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78528-272-0

www.packtpub.com

Credits

Author

Sani Yusuf

Reviewer

Luca Mezzalira

Commissioning Editor

Dipika Gaonkar

Acquisition Editor

Subho Gupta

Content Development Editor

Athira Laji

Technical Editor

Prajakta Mhatre

Copy Editor

Vatsal Surti

Project Coordinator

Harshal Ved

Proofreader

Safis Editing

Indexer

Rekha Nair

Graphics

Jason Monteiro

Production Coordinator

Melwyn D'sa

Cover Work

Melwyn D'sa

About the Author

Sani Yusuf is the founder of Haibrid, a company focused on creating innovative mobile solutions with hybrid technologies operating from London, England. Starting his career as a web developer, he moved on to native development of both desktop and mobile applications before developing a focus on hybrid mobile apps due to their philosophy of reusability and cross-platform operability.

When not managing his company, Sani spends his time public speaking, writing, and endlessly researching new educational and healthcare mobile solutions. Although a Nigerian by birth, Sani moved to the UK in 2010 to pursue a degree in computer science, having a great interest in healthcare and educational advancement with mobile technology.

A lover of the movie Avatar and a speaker of four languages, namely French, English, Arabic, and Hausa, Sani spends his free time travelling, watching movies, and watching Arsenal football club being great.

During his career, Sani has worked with companies like Anritsu, Microsoft, Huddlebuy, Envato, and more recently, Nexercise, with some of his works awarded by Microsoft, Samsung, and Aimia Ltd.

He has also written Windows Phone Beginner Series, an online tutorial series for Envato.

Acknowledgments

Firstly, I would like to thank Subho Gupta, acquisition editor of Packt Publishing, for providing me with the opportunity of writing such a wonderful book. Athira Laji, you are a gem of a unique kind for all your hard work throughout the process of writing this book. Also Luca, thanks for your kind editorial efforts.

A legendary mention of Mark Dickens, my manager while working at Anritsu, for his mentoring and great management.

A worthy mention of the people at Huddlebuy for believing in me when I pitched Ionic as a solution for their mobile needs.

I would like to recognize Alhaji Sani Nuhu Abubakar for gifting me my very first computer in 2001, a gift that would change my life forever. Also, I would love to recognize Alhaji Mohammed Ariyo, and everyone involved in helping me make conscious educational decisions. And to my kind friends Tsoma, Azeez, Anthony, Aisha B, Bhoomi, Nabeel, Samia, Sarah B, Sarah S, Sanu, Seun, and Amina. All of you gave me comfort in your own way and I appreciate it.

Massive thanks to the Ionic for building such a great framework that has changed lives. A special mention to Ryan Hana, founder of Sworkit; you empowered me to co-create Ionic UK and it is an honor to do great things with you.

Unmatched thanks to my father Alhaji Yusuf Umar, you are my everything and I am forever indebted to you. You have given me more than anyone could ever, and I will always be grateful. Mum, I will get you that mansion. Mama Maryam, I will get you that G6. Mama Saeeda, I am what I am today because of your love. Thanks to all my siblings, Maimuna, Amina, Rukaaya, Amma, Fatima, Faruq, Afrah, Chuya, and Fuad. Love you all. Thanks to all my teachers and everyone else that made this possible.

Finally, thanks to God for life and good health.

About the Reviewer

Luca Mezzalira is a passionate Italian solutions architect with more than 10 years of experience of frontend technologies, particularly in JavaScript, HTML 5, Haxe, Flash, Flex, AIR, Lua, and Swift.

He has often been involved in cutting-edge projects for mobile (iOS, Android, Blackberry,) desktop, web, TV, set top boxes, and embedded devices.

He thinks the best way to use any programming language is mastering their models. That's why he has spent a lot of time studying and researching topics like OOP, functional programming, and functional reactive programming.

With these skills, he is able to swap quite easily between different programming languages, applying the best practices learnt to drive any team to success.

He is a natural leader, delivery focused, a problem solver, and a game changer. He uses his passion on every aspect of the work, from the flow definition to the automation process.

He tries to cover every detail to improve the company standards, empower the teams, and deliver great products.

He is certified as: certified scrum master and SAFe agilist; Adobe-certified expert and instructor on Flash, Flex, AIR; Adobe community professional; and Adobe Italy consultant.

He has written for national and international technical magazines and editors. He is also a technical reviewer for Packt Publishing, Pragmatic Bookshelf, and O'Reilly.

He is a speaker for national and international conferences or community events such as O'Reilly media webinars, FullStack conference, React London UG, Scrum Gathering, Lean Kanban United Kingdom, Mobile World Congress, Flash Camp, 360 Flex, Better Software, Pycon, and so on.

In 2013, he organized an itinerant event in six different cities in Italy called Having fun with Adobe AIR where people learnt how to develop mobile applications for iOS, Android, and BlackBerry with Adobe AIR and Starling.

In 2015, he started the London JavaScript Community (http://www.meetup.com/London-JavaScript-Community/), organizing a monthly meetup event about the top hot topics in the JavaScript world.

The first mention is for my family that always helps me, and in particular, for my parents who support

Reviews for Ionic Framework By Example

[Galih Satriaji · Rating: 2 out of 5 stars]

Please note that this book was using ionic angular 1 version. The latest ionic framework use latest version of angularjs so this made the structure of generated project folder is completely different from what explained in this book.