Subscribe for tips on developing apps with Angular and Ionic

Build Your First Mobile App With Ionic 2+ & Angular 2+ - Part 6

Menu

In this part, we'll continue with the code from the previous part and allow the user to tap on a repository in the list. The app will then navigate to a details page and display the contents of the repo's README file.

This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.

The app.component.ts file is the starting point for the app and as you can see it's template contains an <ion-nav> element. This is a navigation controller and we'll use it, later on, to navigate between the pages.

The rootPage is set to HomePage, so the navigation controller knows which page to load when the app is launched. You can obviously change this to any page you have within the app.

Now it's time to write the code for navigating to the details page.

Modify HomePage

Let's start by adding a click handler in home.html for the repo items.

And add the goToDetails function to handle the click and instruct it to navigate to the DetailsPage.

goToDetails(repo) {
this.nav.push(DetailsPage, { repo: repo });
}

OK, that was easy, right? Let's take a step back to understand the way navigation works in Ionic.

The NavController already has the first page loaded: HomePage and to navigate to DetailsPage, we push it onto the navigation stack and the framework will take care of loading the page and displaying the view transitions that are unique to the mobile platform.

We can use the pop function to take DetailsPage out of the navigation stack, the navigation controller will then go back to HomePage.

We don't need to explicitly use the pop function if DetailsPage has an <ion-navbar> because the framework will put a Back button in the navigation bar. When the user taps this button, the pop will be automatically executed.

We also want DetailsPage to know which repo was selected by the user, so we are sending the repo as a parameter and later on we'll see how to retrieve it on DetailsPage.

Add new function to GithubService

Import Headers, we'll use that in the new function.

import { Http, Headers } from '@angular/http';

We'll add the getDetails function to GitHubService, so we can call that when we're creating DetailsPage.

The code above will get the contents of the repo's README file. We're adding the Accept header to specify that we want the README in HTML format, so we can easily display it on the DetailsPage.

Create DetailsPage

Go into the apps/pages folder in the project and add a new folder details.

Update April 8: The Ionic CLI can now generate the page based on a TypeScript template with the ionic generate command. See documentation. You can generate all the files for the DetailsPage with this command ionic g page details.

As you can see we're using a different type of binding for displaying the README contents. We can not use the code below because that will encode the HTML code and we'll end up seeing the code itself on the view.

<div padding>{{ readme }}</div>

What we want is to add the contents of the README file as HTML to the DOM, and we can do that by binding the innerHTML property on the <div> to readme.

We're Done!

Fire up the browser with ionic serve and you should be able to tap on a repository and see the contents of the README file.

Download complete app source code

Enter your email address to download the source code for this tutorial.

Navigating with Tabs and Menus

So now you know how to navigate from one page to another, what about navigating with Tabs and Menus? These are actually not hard to implement and the Ionic documentation has examples for both here: Tabs and Menus.

What's Next?

In the next part we'll conclude this tutorial series by exploring how to deploy and test on emulators and mobile devices.