Build Your First Mobile App With Ionic 2 & Angular 2 - Part 6
来源:互联网 发布:淘宝网1.4 餐桌 编辑:程序博客网 时间:2024/06/06 03:39
http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2-part-6/
10 March 2016 on Ionic 2, Angular 2,TypeScript | 8 Comments
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 tutorialhere.
This tutorial is part of a multi-part series:
Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages (this post)
Part 7 - Test on Emulators and Mobile Devices
The source code can be found on GitHub.
We are already using navigation...
Before we start writing any code, I want to point out that we are actually already using navigation in the app to loadHomePage
.
Have a look in your app.ts
file and you'll see the following lines of code:
@App({ template: '<ion-nav [root]="rootPage"></ion-nav>', config: {} })export class MyApp { rootPage: Type = HomePage;
The app.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.
<ion-card *ngFor="#repo of foundRepos" (click)="goToDetails(repo)">
We'll need to import NavController
in home.ts.
import {Page, NavController} from 'ionic-framework/ionic'; import {DetailsPage} from '../details/details';
We're also importing DetailsPage
, but we haven't actually built that yet, so you'll probably see an error in your editor, but just ignore that for now.
Next, inject the NavController into the constructor.
constructor(private github: GitHubService, private nav: NavController) {}
And add the goToDetails
function to handle the click and instruct it to navigate to theDetailsPage
.
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 toDetailsPage
, 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 toHomePage
.
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, thepop
will be automatically executed.
We also want DetailsPage
to know which repo was selected by the user, so we are sending therepo
as a parameter and later on we'll see how to retrieve it on DetailsPage
.
Add new function to GithubService
We'll add the getDetails
function to GitHubService
, so we can call that when we're creatingDetailsPage
.
getDetails(repo) { let headers = new Headers(); headers.append('Accept','application/vnd.github.VERSION.html'); return this.http.get(`${repo.url}/readme`, { headers: headers });}
The code above will get the contents of the repo's README file. We're adding theAccept
header to specify that we want the README in HTML format, so we can easily display it on theDetailsPage
.
Create DetailsPage
Go into the apps/pages folder in the project and add a new folderdetails.
Update April 8: The Ionic CLI can now generate the page based on a TypeScript template with theionic generate command. See documentation on how to use it.
Create the file details.html and add the following code:
<ion-navbar *navbar> <ion-title> {{ repo.name }} </ion-title></ion-navbar><ion-content> <div padding [innerHTML]="readme"></div></ion-content>
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 theinnerHTML
property on the <div>
to readme
.
Create the file details.ts and add the following code:
import {Page, NavController, NavParams} from 'ionic-angular'; import {GitHubService} from '../../services/github';@Page({ templateUrl: 'build/pages/details/details.html', providers: [GitHubService]})export class DetailsPage { public readme = ''; public repo; constructor(private github: GitHubService, private nav: NavController, private navParams: NavParams) { this.repo = navParams.get('repo'); this.github.getDetails(this.repo).subscribe( data => this.readme = data.text(), err => { if (err.status == 404) { this.readme = 'This repo does not have a README. :('; } else { console.error(err); } }, () => console.log('getDetails completed') ); }}
This page is quite similar to HomePage
, except now we're also importing theNavParams
module. We need that to get the parameter repo
that was sent byHomePage
.
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.
The source code can be found on GitHub.
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 andMenus.
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.
Follow me on Twitter @ashteya andsign up for my weekly emails to get new tutorials.
If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 6
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 2
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 1
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 3
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 4
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 5
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 7
- Writing your first Django app, part 2
- Build Your First App(a)
- 搭建自己的Django应用(2)Writing your first Django app, part 2
- Writing your first Django app, part 2---IE的问题吗?费解
- Writing your first Django app, part 1
- Writing your first Django app, part 1
- Writing your first Django app, part 1
- Build your First Game with HTML5
- Hello World! Build Your First iPhone App
- Hello World! Build Your First iPhone App
- Tutorial: Build Your First Tensorflow Android App
- CentOS-6.5-x86_64 安装 jdk-7u79-linux-x64.gz
- Linux java安装 eclipse安装
- Timer 定时任务
- EmguCV学习
- 中缀表达式转后缀表达式
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 6
- 重建所有索引
- 【华为OJ】【100-配制文件恢复】
- 234. Palindrome (Linked List)
- centos6.5搭建一个git服务器
- TextView控件
- memcache安装
- mac下配置Qt for Android编译环境
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 7