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