How to Incorporate Ionic Framework

Stephanie Callaway
August 24, 2018 UPDATED

Ionic is one of the most popular frameworks for building web apps right now. Did you know we have an ebook that not only shows you how to use Ionic, but also takes you through building an app with it? We thought we’d give you a quick look at what’s inside our popular ebook, Ionic Succinctly, by Ed Freitas.

The Ionic framework is an open-source SDK built on top of Angular, integrating with Cordova, and programmed using mostly TypeScript and JSON data format. Ionic is used to build cross-platform mobile apps and progressive web apps with ease by utilizing web technologies such as HTML, JavaScript, and CSS. In this e-book, Ed Freitas will guide you through the process of creating an app that searches through the popular Succinctly series library and sort the books into learning paths.

Key Ionic Concepts in only 91 pages.

Getting started with Ionic
Installing Ionic-Angular
Main differences from Ionic for Angular
Creating a new project
Ionic project structure
Starting the Ionic App
Using Visual Studio Code Ionic plugins
Building apps with Ionic frameworks

The key concepts in this book answer some of the leading developer questions regarding the Ionic framework, outlining practical concepts and implementation.

Get a glimpse inside this e-book:

Chapter 4: Building the App

Quick intro

One of the things I love most about Ionic is how easy it is to cover a lot of ground with barely any information overload. So far, we’ve seen how to scaffold a project, add pages, and wire those pages up, and also how to do testing with Ionic View and the browser, and deploy to Ionic Pro.

That’s actually an impressive feat on its own, considering that it’s all been outlined in a small number of pages. This is only possible because the framework accommodates for this level of brevity without sacrificing on essential content.

But like everything in life, the best way to learn something new—no matter how concise the content might be—is by building something. That’s what we’ll be doing throughout this chapter.

To make the most of this chapter, I highly advise you to check the great Ionic component documentation as we go along, also, which you can find here.

At the end of this chapter, you can find the link to download the full source code of this app.

Before we start

But before we start, I want to mention that I like to keep things simple—because it not only allows for easier knowledge retention, but also limits the scope to just the necessary essentials required to get something done.

With this philosophy in mind, let’s create our Succinctly Library app by keeping it as simple as possible. This means our app won’t use a database or perform AJAX requests, so all the data required will be hard-coded.

Of course, you may later modify the app to make it more complex and include such features, but that’s something I’ll totally leave up to you.

The Library page

The app’s Library page will be the main entry point to the application. As we’ve recently seen, it contains the side menu with the links to the other main pages of the app.

I’m a big fan of having a side menu in an app; however, I believe that the main content of the Library page should include some cards that also point or reference the other main pages of the app, such as Books and Paths—so let’s add some cards to the Library page in order to achieve this.

In order to add some data that we’ll display on these cards, we’ll need to open up the library.ts file and add the following code.

This code can be added to the LibraryPage class just before the constructor. This is how the updated library.ts file with this code now looks:

We’ll use the cardData object within the library.html file in order to build a couple of cards to display within the UI. Let’s do this next.

Let’s open up library.html and add the following code within the ion-content tag.

Let’s quickly examine this. We’ve added the ion-list component in order to be able to iterate through the various elements of the cardData object—this can be achieved by using ngFor.

Each element of cardData, represented by the card object, is then referenced within the ioncard component. The card.pushPage property is used to allow the user to navigate to the page that corresponds to card.title.

After making this change, this is how the library.html file looks:

We can preview the UI changes in the browser by running the ionic serve command.

In order to test Ionic-Angular’s navigation features, let’s click on either the Paths or the Books card. As expected, and as seen in Figure 4-b, the corresponding page is displayed and added to the navigation stack. This is possible because card.pushPage references the page that Ionic will mount.

We can unmount the current page on the navigation stack and return to the previous one—in this case, the Library page—by simply clicking the back arrow button.

We now have our Library page working; however, we can still improve the way the card component looks, so let’s do that next.

For more information on how to build an Ionic app, please continue reading.