Introducción al código de ionic
Temas:
1. Navegación entre pantalla con su animación respectiva
2. Cambiar el root de la aplicación (página inicial)
3. Implementar un botón de retorno
4. Módulo para agrupar todos los componentes personalizados que
hagamos.
5. Introducción al componente de listas de ionic
6. Componente header
Crear proyeto desde blanco
>> ionic start componentes blank
Presionar enter
https://ionicframework.com/
>>ionic serve
Comparar
Con
Indicar a Ionic ir al Home, en la carpeta app >> app-routing.module.ts
Redireccionar al home:
path: '',
redirectTo: 'home',
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m =>
m.HomePageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Cambiar pantalla principal.
Para hacer cambios, debo borrar la carpeta home
Actualizar el archivo app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Se crea una página
Para salir ctrl+c
>> ionic g page pages/inicio --dry-run
--spec=false //para no crear el archivo de prueba
ionic g page pages/inicio --dry-run --spec=false
Revisar los cambios del archivo app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'inicio',
loadChildren: () => import('./pages/inicio/inicio.module').then(m =>
m.InicioPageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Actualizar archivo app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'inicio',
loadChildren: () => import('./pages/inicio/inicio.module').then(m =>
m.InicioPageModule)
},
{
path: '',
redirectTo: 'inicio',
pathMatch: 'full'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Ir al archivo inicio.page.html y hacer el primer cambio
<ion-header>
<ion-toolbar>
<ion-title>Componentes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
Navegar entre pantallas, crear más páginas
>> ionic g page pages/alert --spec=false
>> ionic g page pages/action-sheet --spec=false
Crear dos botones para navegar entre pantallas
En el archivo inicio/inicio.page.html
Se usara los compontentes propios de ionic
archivo inicio.page.html
<ion-header>
<ion-toolbar>
<ion-title>Componentes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button routerLink="/alert">
Alert
</ion-button>
<ion-button routerLink="/action-sheet">
Action Sheet
</ion-button>
</ion-content>
Botón para regresar a la página anterior
En el archivo action-sheet /action-sheet.page.html
defaultHref="/" >>regresar al inicio
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" >
<ion-back-button
defaultHref="/" text="Regresar"
color="primary"
mode="ios"></ion-back-button>
</ion-buttons>
<ion-title>action-sheet</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
alert.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" >
<ion-back-button
defaultHref="/" text="Regresar"
color="primary"
mode="ios"></ion-back-button>
</ion-buttons>
<ion-title>alert</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
Módulos de Componente header
>>ionic g module components --dry-run
>> ionic g component components/header --dry-run
>> ionic g component components/header --spect=false
Recuerden, que la diferencia entre un componente y una página es que el componente no va a
tener nada relacionado a la carga perezosa.
Osea, no viene con el LazyLoad, ni tampoco viene con un archivo de rutas, simplemente es el
componente plano, igual que en Angular
La idea es poder agrupar aquí todos esos componentes para que en cualquier otra página o en
cualquier otro lugar, donde se necesite usar alguno de estos componentes personalizados. Se va
importar este módulo para estar disponible.
components.module.ts >> antes
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class ComponentsModule { }
Se realiza el cambio:
Se debe declarar y exponer para usar fuera de este módulo
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
HeaderComponent
],
exports: [
HeaderComponent
],
imports: [
CommonModule
]
})
export class ComponentsModule { }
action-sheet.page.html
No se puede colocar directamente, porque Angular no lo interpreta.
Se debe exponer en el archivo action-sheet.module.ts
Para poder reconocer el componente app-header
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ActionSheetPageRoutingModule } from './action-sheet-
routing.module';
import { ActionSheetPage } from './action-sheet.page';
import { ComponentsModule } from '../../components/components.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ActionSheetPageRoutingModule,
ComponentsModule
],
declarations: [ActionSheetPage]
})
export class ActionSheetPageModule { }
Ahora reconoce la expresión
Siguientes pasos:
En el archivo action-sheet.page.html, se quita la codificación:
<!--<ion-header>
<ion-toolbar>
<ion-buttons slot="start" >
<ion-back-button
defaultHref="/" text="Regresar"
color="primary"
mode="ios"></ion-back-button>
</ion-buttons>
<ion-title>action-sheet</ion-title>
</ion-toolbar>
</ion-header> -->
Y se agrega en el archivo header.component.html
Por el momento no se reconoce la información en el archivo header.component.html
Se debe modificar el archivo components.module.ts en la sección de imports:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { IonModal, IonicModule } from '@ionic/angular';
@NgModule({
declarations: [
HeaderComponent
],
exports: [
HeaderComponent
],
imports: [
CommonModule,
IonicModule
]
})
export class ComponentsModule { }
header.component. html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" >
<ion-back-button
defaultHref="/" text="Regresar"
color="primary"
mode="ios"></ion-back-button>
</ion-buttons>
<ion-title>action-sheet</ion-title>
</ion-toolbar>
</ion-header>
Realizar los cambios en alert.page.html
El único problema es que en los dos lugares dice Action-Sheet, para hacer esa modificación
Hacer los mismo cambio en alerta
Hacer cambio en el archivo header.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
@Input() titulo: string=' '
constructor() { }
ngOnInit() {}
Realizar cambios en el achivo header/header.component.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" >
<ion-back-button
defaultHref="/" text="Regresar"
color="primary"
mode="ios"></ion-back-button>
</ion-buttons>
<ion-title class="ion-text-capitalize" >
{{titulo}}
</ion-title>
</ion-toolbar>
</ion-header>
Hacer cambios en el archivo action-sheet /action-sheet.page
<app-header titulo="action sheet"></app-header>
<ion-content>
</ion-content>
Hacer los cambios en el archivo alert/alert.page.html
<app-header titulo="Alerta"></app-header>
<ion-content>
</ion-content>
Ion-list: Listas en ionic
https://ionicframework.com/docs/components
Realizar cambios App/pages/inicio/ inicio.page.html
<ion-header>
<ion-toolbar>
<ion-title>Componentes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item> Hola Mundo </ion-item>
</ion-list>
<!--
<ion-button routerLink="/alert">
Alert
</ion-button>
<ion-button routerLink="/action-sheet">
Action Sheet
</ion-button>
-->
</ion-content>
Observar los cambios
Realizar cambios en el archivo inicio.page.ts
import { Component, OnInit } from '@angular/core';
//crear una interface para definir propiedades que el componente lista va
a tener
interface Componente {
icon: string;
name: string;
redirectTo: string;
}
@Component({
selector: 'app-inicio',
templateUrl: './inicio.page.html',
styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {
//crear nuevo listado
//componentes: any[] = [];
componentes: Componente[] = [
{
icon: 'american-football-outline',
name: 'Action Sheet',
redirectTo: '/action-sheet'
},
{
icon: 'logo-apple-appstore',
name: 'Alert',
redirectTo: '/alert'
},
];
constructor() { }
ngOnInit() {
}
Probar cambio:
<ion-list>
<ion-item *ngfor="let c of componentes">
<ion-icon name="american-football" slot="start"></ion-icon>
{{c.name}}
</ion-item>
</ion-list>
Buscar
Varios iconos
<ion-icon name="american-football"></ion-icon>
Cambio inicio.page.html
<ion-header>
<ion-toolbar>
<ion-title color="primary">Componentes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let c of componentes" [routerLink]="c.redirectTo"
detail>
<ion-icon [name]="c.icon" slot="start" color="primary"></ion-
icon>
{{c.name}}
</ion-item>
</ion-list>
<!--
<ion-button routerLink="/alert">
Alert
</ion-button>
<ion-button routerLink="/action-sheet">
Action Sheet
</ion-button>
[routerLink]="c.redirectTo" detail
<ion-icon [name]="c.icon" slot="start" color="primary"></ion-icon>
<ion-list>
<ion-item *ngFor="let c of componentes">
<ion-icon name="american-football"></ion-icon>
{{c.name}}
</ion-item>
</ion-list>
-->
</ion-content>
Cambio inicio.page.ts
import { Component, OnInit } from '@angular/core';
import { ComponentsModule } from '../../components/components.module';
//crear una interface para definir propiedades que el componente lista va
a tener
interface Componente {
icon: string;
name: string;
redirectTo: string;
}
@Component({
selector: 'app-inicio',
templateUrl: './inicio.page.html',
styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {
//crear nuevo listado
//componentes: any[] = [];
componentes: Componente[] = [
{
icon: 'american-football-outline',
name: 'Action Sheet',
redirectTo: '/action-sheet'
},
{
icon: 'logo-apple-appstore',
name: 'Alert',
redirectTo: '/alert'
},
];
constructor() { }
ngOnInit() {
}
