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)

The Ionic Popover

The Ionic Popover component allows us to add a popover menu to our application. A popover menu is a contextual menu that is used to provide a hidden menu or extra menu options. It is normally used when we have limited space and want to present a list of options. Instead of cramming our limited available space, we create some sort of button so that, when clicked, the popover menu can pop up and show these menu items.

The following screenshot shows a good description of what a popover does in reality:

Implementing the popover

We are going to implement our popover in our already existing application. The first thing you should do is open your application, as you have left the London Tourist Application in the previous chapter. What we will be aiming to do is create a popover that has three extra options as a list. These three options are About, Help and Logout. These three options will not perform any action as we will only be placing them for the sake of example. The following...