Scribd
Upload
24 views

Mobile Programming Generate Page

1. The document discusses steps for building a mobile app with Ionic including generating pages, adding routing, and managing state with services. 2. It shows how to create a recipes app with recipes and detail pages, adding navigation between them using routing modules. 3. Data is managed through a recipes service storing recipe data that both pages can access, avoiding duplicating the data between the pages.

Uploaded by

sasongko wardhana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Mobile Programming Generate Page

1. The document discusses steps for building a mobile app with Ionic including generating pages, adding routing, and managing state with services. 2. It shows how to create a recipes app with recipes and detail pages, adding navigation between them using routing modules. 3. Data is managed through a recipes service storing recipe data that both pages can access, avoiding duplicating the data between the pages.

Uploaded by

sasongko wardhana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Mobile Programming 6

Problems are not stop signs, they are guidelines


Install ionic lab to generate browse for ionic
npm i @ionic/lab
ionic start projectname blank --type=angular

ionic cordova platform add ios


ionic cordova platform add android
ionic cordova platform add browser
ionic cordova emulate browser
Step by step to show detail
1. Create detail page
2. Declare the detail page on app-routing.module.ts …… Routing
3. Create service .ts file
4. Move content of page.ts to service.ts, create array so that it can be called from page.ts
5. Call service.ts from page.ts  construct inject, and on initialization call service.ts array
…. State using service
6. Displaying routing for several id ( if you click goes to particular id), click spaghetti go to
detail spaghetti, click pizza go to detail pizza
7. Detail.page.ts, using routing map, and construct it. Call service, and loaded model
8. Display detail on yourname-detail.page.html
9. Navigate from yourname.page.html to display detail
10. Give back button on -detail.page.html
• Generate page
• Ionic generate page yourpagename
Basic routing
ionic generate page yournames/yourname-detail
app-routing.module.ts
change recipe and recipes to yourname
At first It loads it self, now it loads it self and detail
{
path: 'recipes',
children: [
{
path: '',
loadChildren: './recipes/recipes.module#RecipesPageModule'
},
{
path: ':recipeId',
loadChildren:
'./recipes/recipe-detail/recipe-detail.module#RecipeDetailPageModule'
}
]
}
Managing state with services
ionic generate service yourname/yourname
Cut from yourname.page.ts
to yourname/yourname.service.ts
• recipes: Recipe[] = [
• {
• id: 'r1',
• title: 'Schnitzel',
• imageUrl:
• 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Schnitzel.JPG/1024px-Schnitzel.JPG',
• ingredients: ['French Fries', 'Meat', 'Salad']
• },
• {
• id: 'r2',
• title: 'Spaghetti',
• imageUrl:
• 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/1024px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
• ingredients: ['Spaghetti', 'Meat', 'Tomatoes']
• }
• ];
•
So that yourname/yourname.service.ts
• export class RecipesService {  the pairing of this curl bracket at the end of this file
• private recipes: Recipe[] = [
• {
• id: 'r1',
• title: 'Schnitzel',
• imageUrl:
• 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Schnitzel.JPG/1024px-Schnitzel.JPG',
• ingredients: ['French Fries', 'Meat', 'Salad']
• },
• {
• id: 'r2',
• title: 'Spaghetti',
• imageUrl:
• 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/1024px-
Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
• ingredients: ['Spaghetti', 'Meat', 'Tomatoes']
• }
• ];
Continue ….
• constructor() {}
•
getAllRecipes() {  call the above array
• return [...this.recipes];
• }
•
getRecipe(recipeId: string) {
• return {
• ...this.recipes.find(recipe => {
• return recipe.id === recipeId;
• })
• };
• }
• }
And yourname.page.ts become
• export class RecipesPage implements OnInit {
• recipes: Recipe[];
•
constructor(private recipesService: RecipesService) {}  inject the
service
•
ngOnInit() {
• this.recipes = this.recipesService.getAllRecipes();  initialization
• }
•}
yourname-detail.page.ts
note: import will automatically added
export class RecipeDetailPage implements OnInit {
loadedRecipe: Recipe;

constructor(
private activatedRoute: ActivatedRoute,
private recipesService: RecipesService
) {}

ngOnInit() {
this.activatedRoute.paramMap.subscribe(paramMap => {
if (!paramMap.has('recipeId')) {
// redirect
return;
}
const recipeId = paramMap.get('recipeId');
this.loadedRecipe = this.recipesService.getRecipe(recipeId);
});
}
}
Check yourname-detail.page.ts
• import { Component, OnInit } from '@angular/core';
• import { ActivatedRoute, Router } from '@angular/router';
• import { AlertController } from '@ionic/angular';
•
import { RecipesService } from '../recipes.service';
• import { Recipe } from '../recipe.model';
recipe-detail.page.html
<ion-content>

<ion-grid no-padding>

<ion-row>

<ion-col no-padding>

<ion-img [src]="loadedRecipe.imageUrl"></ion-img>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<h1 text-center>{{ loadedRecipe.title }}</h1>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-list>

<ion-item *ngFor="let ig of loadedRecipe.ingredients">

{{ ig }}

</ion-item>

</ion-list>

</ion-col>

</ion-row>

</ion-grid>

</ion-content>
recipes.page.html
• <ion-header>
• <ion-toolbar color="primary"> <ion-title>Recipes</ion-title> </ion-toolbar>
• </ion-header>
•
<ion-content>
• <ion-list>
• <ion-item
• *ngFor="let recipe of recipes"
• [routerLink]="['/recipes', recipe.id]“ navigate to other page
• >
• <ion-avatar slot="start">
• <ion-img [src]="recipe.imageUrl"></ion-img>
• </ion-avatar>
• <ion-label> {{ recipe.title }} </ion-label>
• </ion-item>
• </ion-list>
• </ion-content>
Give arrow button to go back
recipe-detail.page.html
• <ion-header>
• <ion-toolbar color="primary">
• <ion-buttons slot="start">
• <ion-back-button defaultHref="/recipes"></ion-back-button>
• </ion-buttons>
• <ion-title>{{ loadedRecipe.title }}</ion-title>
• </ion-toolbar>
• </ion-header>

You might also like