azchn.com+app.html,Chapter 6. Weather app, using side menus, modals, action sheets, and ionScroll

Chapter 6. Weather app, using side menus, modals, action sheets, and ionScroll

This chapter covers

Using a side menu as the basis of your app for navigation

Displaying options to users with action sheets and popups

Using a modal to display related content over another view

Building more-advanced scrolling interactions

In this chapter you’ll build a weather app, and in the process you’ll showcase more components that Ionic has to offer. The base of the application navigation will be the side menu component. It will allow you to find and view weather conditions, forecasts and favorite locations; display sunrise and sunset data inside of a modal window; and use a paginated scrolling pane to view the weather information.

Throughout the chapter we’ll look at a number of Ionic’s features and components. The side menu will be the basis for your app navigation, and you’ll use just a single left menu that can appear to navigate around the app. You’ll use the action sheet component to provide users a list of options, such as to note a favorite location. Using a modal, you’ll display the next year’s chart of sunrise and sunset values. To make this chart perform better, you’ll use the collection repeat feature of the Ionic lists, which reduces memory for large lists by rendering only the necessary items.

6.1. Setting up the chapter project

6.2. Setting up the side menu and views

6.3. Searching for locations

6.4. Adding settings view and data services

6.5. Setting up the weather view

6.6. ionScroll: building custom scrolling content

6.7. Action sheet: displaying a list of options

6.8. ionModal: displaying the sunrise and sunset chart

6.9. Popup: alert and confirm changes to favorites

6.10. Chapter challenges

6.11. Summary