Book Image

Ionic Framework By Example

By : Sani Yusuf
Book Image

Ionic Framework By Example

By: Sani Yusuf

Overview of this book

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.
Table of Contents (18 chapters)


Ionic Framework By Example is a step-by-step guide that covers the very basics of Ionic aiming to equip the reader with all the necessary knowledge needed to understand and create Ionic apps. You will start off by learning a bit about the history of Ionic, and then slowly learn to get it set up and work with its great features. You will learn to work with Ionic and create four different Ionic apps, with each app teaching you different important features of Ionic. You will also learn to connect your app to a database using Firebase. This book will also provide you with links to some great resources to further your quest for more advanced Ionic knowledge.

What this book covers

Chapter 1, First Look at Ionic, covers a brief history of Ionic and aims to make the user understand exactly what Ionic is, briefly exposing some of its features to the user. This chapter will also teach you how to set up Ionic on your computer.

Chapter 2, To-Do List App, will help the reader to create their first Ionic application, a simple to-do list application. The user will also write their very first lines of Ionic code and get to understand what an Ionic project looks like.

Chapter 3, Running Ionic Apps, equips you with the necessary knowledge of how to see your Ionic apps in action in different ways. You will run and test your app on a browser, on a mobile device using the Ionic view app, and also on a real mobile device.

Chapter 4, Ionic Components, teaches some really cool components that are part of Ionic. You will create a more advanced to-do list application that will have some Ionic components that will enable you to create some complex list items in your application.

Chapter 5, The London Tourist App, creates a new type of Ionic application. You will create an application that will hold some very cool tourist destinations in the city of London.

You will also learn to query data from a JSON resource and consume this data in your application.

Chapter 6, Advanced Ionic Components, helps the reader learn to implement some more advanced Ionic components. You will learn to implement Ionic Popover and Modal windows in your application.

Chapter 7, Customizing the App, focuses on customizing an Ionic application. The Ionic SDK comes by default with some great tools that make it easy to customize your application to fit the design guides of your brand.

Chapter 8, Building a Simple Social App, focuses on learning how to create an Ionic application that has tabs using the Ionic tabs template. You will also have a look at some of the things that make up the tabs template and learn how to add features to it.

Chapter 9, Connecting to Firebase, focuses solely on learning how to use Firebase to integrate a backend to our Ionic application. You will also be using the tabs-app that we created in Chapter 8, Building a Simple Social App, to learn to integrate Firebase into our application.

Chapter 10, Roundup, gives an overview of the important things that we haven't covered yet about Ionic that you might find very useful. You will also learn some useful tips about Ionic and discover some great tips on how to make even better use of Ionic to develop great apps.

What you need for this book

Firstly, you will need a Windows, Linux, or Mac computer to follow the code samples in this book. A beyond basic or intermediate knowledge of JavaScript and HTML5 is certainly essential to understand concepts discussed in this book. A basic understanding of Cordova is expected at the very least. You are expected to also have an idea of how to issue commands in a terminal window. You should also have access to a working Internet connection, and a Google account is necessary for Chapter 9, Connecting to Firebase.

Who this book is for

This book is aimed at individuals looking to learn how to create hybrid mobile applications with Ionic. This book is perfect for current web developers with beyond basic familiarity of HTML5 and JavaScript. AngularJS developers will also feel at home reading this book as Ionic is built with AngularJS. Native iOS and Android developers with a good understanding of HTML5 and JavaScript will also benefit highly from this book and gain knowledge on how to create hybrid mobile apps.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "You will also notice that in your www/lib folder, there is a folder called ionic that contains all the required files to run Ionic."

A block of code is set as follows:

<div class="list">
    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <input type="text" placeholder="enter todo item">
        <button class="button button-small">

Any command-line input or output is written as follows:

ionic serve

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Scroll down to the More Tools options and select the Developer Tools option, as shown in the following screenshot."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail , and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.