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>