It's possible to write a simple app with a handful of pages. Ionic provides a lot of out-of-the-box components that allow simple plug and play operations. When an app grows, managing different views and their custom data at a specific time or triggered event can be very complex. Ionic comes with some changes to the handling of state and navigation. In Ionic 1, you could use UI-Router for advanced routing management mechanisms. In Ionic, NavController enables the push/pop implementation of the navigation.

Since Ionic introduces many new components, you have to understand how these components impact on your app's state hierarchy and when each state is triggered.

This section will explain how to work with the Ionic tab interface and expand it to other use cases. The example used is very basic, with three tabs and some sample Ionic components in each tab. This is a very common structure that you will find in many apps. You will learn how Ionic structures the tab interface and how it translates to individual folders and files.

In this example, you will build three tabs, as follows:

• A tab showing a simple text-only page to explain where to place the components
• A tab showing a signup form
• A tab showing a horizontal slider box

Although the app is very straightforward, it will teach you a lot of key concepts in Angular and Ionic. Some of them are the component decorators, themes, and the TypeScript compiler process.

Here is a screenshot of the example app with the middle tab selected:

Menu navigation is a very common component in many mobile apps. You can use the menu to allow users to change to different pages in the app, including login and logout. The menu could be placed on the left or right of the app. Ionic also lets you detect events and further customize the menu's look and feel.

This is a screenshot of the app you will develop:

The app will have two pages and two menus. You can toggle either the left or right menu (but not both at the same time). In reality, it is much less likely that you will have both menus, but for the purposes of demonstration, this app will include both menus as the app will show the different properties of the menus that you can set. The left menu will change the page and the right menu will allow you to capture the exact item that is clicked on.

App navigation is an important topic because it's at the core of a user's experience. You want to manage the user's expectation of what will happen after they submit a form or after they go to a new tab. In addition, you may want to ensure that the user data is available on the correct page or in the correct state. This could also get more complicated when the requirement of a back navigation is involved.

This section will teach you how to work with NavController and NavParams, which are the two important base classes to manage all navigation for the app. This is a screenshot of the app you will develop:

This app has three different examples of how to navigate to a different page and how to
pass parameters. When you click on any button, it will show the second page, which is
as follows:

The second page, basically...

In the previous examples, we used tabs and menu for the navigation. We used them in two different applications. But, sometimes, we might want to use both tabs and menu in a single application. In this example, we will use tabs, menu, and segment. The second page of the app will look something like the following screenshot:

If you take a closer look at the preceding screenshot, you will see that there is hamburger menu button, three tabs at the bottom, and two tabs like buttons just after the page title. These two buttons are actually called segment buttons. They are similar to tabs in UX, but they are very different in their workings. You will see later on in the code how they are different.

Since this chapter is about Ionic components, I will mention that one of my favorite components is the Ionic grid—a really useful component to lay out your application. Based on Flexbox, it is very similar to Bootstrap's grid. The documentation on the Ionic grid says:

We will create a complex UI structure with very minimal code. The app will look like the following image: