Mobile App Development with Ionic, Revised Edition

Chapter 9. Building a Weather Application

One of other prebuilt templates that the Ionic Framework provides is the side menu template. This design pattern has become increasingly prevalent over the past few years. Rather than having a fixed number of items in a tab bar (which typically remain on-screen using precious screen real estate), this user interface moves many of the navigation options onto a panel that is kept off-screen until the user taps a menu button of some kind. Often this button is either three horizontally stacked lines (aka the hamburger menu) or in some cases three vertical dots. Now, I am not going to get into the pros and cons of this user interface element. I would encourage you to spend a little time researching it on your own to see if it is right for your project. With that said, this is the design pattern we will use to build our Ionic weather application.

Getting Started

Like the two previous projects, we need to generate our initial app. We use another starter template from a GitHub repo. This base template is just the side menu template, with some additional elements in the assets folder:

$ ionic start Ionic2Weather sidemenu

Once this process is complete, again remember to change your working directory:

$ cd Ionic2Weather

And if you are targeting Android, don’t forget to add that platform:

$ ionic platform add android

Let’s take a look at the template in our browser with:

$ ionic serve

Figure 9-1 shows what you should see in your browser. ...