Ionic Framework By Example

Sani Yusuf

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785282720
• Edition: 1
• Topic: Computer Science
• Subtopic: Software Development
• Index: Computer Science

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.

Ionic Framework By Example

---

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 <ion-side-menus>element

The <ion-side-menu-content>element

The <ion-side-menu>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 <ion-tab> 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

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...

Table of contents

• Ionic Framework By Example