PROGRAMACION MULTIPLATAFORMA

UNIDAD Nº I
PRINCIPIOS BASICOS DE ANGULAR 2 E Ionic Framework
E instalación de software requeridos para el desarrollo

www.iplacex.cl
SEMANA 2

Introducción

Estimados Alumnos, sean todos bienvenidos a la segunda semana de Programación

multiplataforma. En esta segunda semana veremos en profundidad cómo crear las vistas
en nuestras aplicaciones híbridas, dando sentido a estas, revisaremos como utilizarlas y
sus distintas propiedades.

Comprobaremos la estructura de un proyecto generado por el framework Ionic,

revisaremos las vistas por defecto que el framework Ionic pone a nuestra disposición,
como por ejemplo botones, tarjetas, checkbox etc.

www.iplacex.cl 2
 Ideas Fuerza

Estructura de un Proyecto: Cuando realizamos la creación de un proyecto en Ionic es

indispensable el directorio donde podremos navegar en las distintas carpetas que componen
nuestro proyecto, por ejemplo: src, app, assets etc.

Componente: Es aquello que forma parte de la composición de un todo. Se trata de

elementos que, a través de algún tipo de asociación o contigüidad, dan lugar a un conjunto
uniforme. Por ejemplo: “una vista de una aplicación, una clase de un programa son los
componentes de este software”, “los principales componentes de un software”.

Componentes de Ionic Framework: Las aplicaciones Ionic están hechas de bloques de

construcción de alto nivel, llamados componentes, que le permiten construir rápidamente la
interfaz de usuario para su aplicación. Ionic trae en stock una serie de componentes, que
incluyen tarjetas, listas y pestañas.

www.iplacex.cl 3
 Desarrollo
9. Estructura de un Proyecto en Ionic

Cuando creamos por primera vez un proyecto en Ionic, tendremos una estructura de
proyecto como la siguiente:

A continuación, el detalle de cada una de ellas.

Carpeta src: En esta carpeta es donde

realizamos la mayor parte del trabajo con Ionic,
son archivos fuente con el código original que
se escribirá al desarrollar una aplicación, o con
código que viene dado al iniciar el proyecto con
"ionic start". "src" contiene código que se tendrá
que transformar para poder ejecutar o producir
los archivos finales que se irán a las stores.

Carpeta www: En la carpeta "www" están los

archivos que se producen cuando se realiza
toda la parte de la transpilación del TypeScript,
el compilado de los archivos Sass, el linting del
código, etc. En ese proceso, todos los archivos
de "src", se transforman y se vuelcan en la
carpeta "www". Esos archivos producidos en
"www" son los archivos de una aplicación web,
con Angular, que se podrán visualizar
correctamente en el navegador.

Durante la mayor parte del proceso de

desarrollo vamos trabajando con el proyecto de
Ionic y vamos visualizando los resultados en el
navegador. En resumen, en www están los
archivos que se están visualizando desde el
navegador al hacer el Ionic serve, o los archivos
que se tomarán cuando vayas a producir la app para cada plataforma.

www.iplacex.cl 4
En esta carpeta no deberías editar nada, puesto que los cambios se aplicarán la próxima
vez que se compile el proyecto para su visualización a través del navegador, o al hacer
el build. Se debe editar lo necesario en la carpeta "src". En este sentido un error típico
es editar cualquier archivo, como el index.html, de la carpeta www y cuando vas a
visualizar los cambios encuentras que no se ha modificado nada. Es debido a que el
índex.html de la carpeta "src" es el que se toma como punto de partida para producir el
index.html de www y en la operación de build (o al hacer "ionic serve") tus cambios se
habrán compilado.

Directorio Assets

La carpeta "assets" es importante a la hora de configurar iconos de la aplicación, o el

icono de la pantalla splash (que es la imagen que aparece mientras la app se está
cargando).

En esa carpeta tenemos que colocar iconos que deben cumplir unos requisitos, dado
que se van a producir también internamente en diversos tamaños de manera automática
por Ionic, para generar todas las variantes de iconos que necesita cada sistema operativo
de destino. Soporta archivos en png o incluso psd.

Carpeta node_modules

Son las dependencias de npm que vienen definidas en el package.json e instaladas en

local dentro de tu proyecto. Si no lo tienes claro, es mejor que consultes Node.JS para
saber más acerca de las dependencias npm.

Componentes

Es aquello que forma parte de la composición de un todo. Se trata de elementos que, a

través de algún tipo de asociación o contigüidad, dan lugar a un conjunto uniforme. Por
ejemplo: “una vista de una aplicación, una clase de un programa son los componentes
de este software”, “los principales componentes de un software”.

Uno de los mayores cambios de Angular 1 es el hecho de que ya no dependemos del

alcance, los controladores o, hasta cierto punto, las directivas. El equipo Angular adoptó
un enfoque basado en componentes para los elementos de construcción y su lógica
asociada. Aquellos que han desarrollado aplicaciones con marcos más tradicionales
están muy familiarizados con este tipo de modelo. El hecho es que estamos
desarrollando en una plataforma originalmente diseñada para leer documentos de física
y no para construir aplicaciones.

Así es como se ve un componente angular de muestra:

www.iplacex.cl 5
Este es exactamente el mismo modelo que Ionic usa para generar su biblioteca de
componentes. De hecho, no hay nada que le impida extender su aplicación Ionic para
usar sus propios componentes personalizados.

Veamos este fragmento de código con mayor detalle.

Primero, el código importa el módulo Component desde la biblioteca Angular. En Angular,

esta es la forma en que se maneja la inyección de dependencia. Con Release Candidate
1 (RC1), el equipo Angular dividió la biblioteca en módulos más pequeños, así como
descartó el sufijo «2» en la biblioteca.

A continuación, usamos el decorador @Component para proporcionar algunos

metadatos sobre nuestro código al compilador. Definimos el selector HTML
personalizado a usar. Entonces, cuando usamos</my-first-component><myfirst-
component>, la plantilla asociada se insertará en el DOM. Las plantillas pueden entrar
en dos formas: en línea como se muestra aquí, o como una referencia externa.

Si necesita extender su plantilla a través de varias líneas para su legibilidad, asegúrese

de usar el backtick (`) en lugar de una comilla simple (') para definir la cadena de plantilla.

Después del decorador, exportamos la definición de clase en sí, MyComponent. Dentro

de este constructor de esta clase, el código establece la variable de nombre en «Inigo
Montoya». A diferencia de Angular 1 y JavaScript en general, Angular tiene un control
mucho más estricto sobre el alcance de las variables.

www.iplacex.cl 6
Finalmente, esta clase de ejemplo tiene un método público de sayMyName que escribirá
una cadena en la consola. A medida que trabaje más con Ionic y Angular 2, este nuevo
método de creación de componentes y páginas se volverá más familiar y natural para
usted.

Creación de rutas en Ionic

Para poder crear una ruta en nuestro proyecto debemos ingresar el comando en nuestro
terminal ionic:

INPUTS

Dado que Angular se construye utilizando un modelo de componente, necesita un

mecanismo para pasar información al componente mismo. Esto se maneja a través del
módulo de entrada de Angular. Veamos un componente simple, <current-user>, que
necesitará saber acerca de un argumento de usuario para que realice su código. El
marcado real se vería así:

<current-user [user]="currentUser"></current-user>

Mientras que el componente en sí se vería así:

import { Component, Input } from '@angular/core';

@Component({
selector: 'current-user',
template: '<div>{{user.name}}</div>'
})
export class UserProfile {
@Input() user;
constructor() { }
}

Dentro de la definición de clase, ahora hay un enlace @Input a la variable de usuario.

Con este enlace en su lugar, Angular pasará la variable CurrentUser al componente,
permitiendo así que la plantilla represente el valor user.name.

Así es como los componentes de Ionic también funcionan. Pasaremos los datos y
parámetros de configuración utilizando el mismo sistema que este ejemplo.

TEMPLATES

Las plantillas son fragmentos HTML que Angular combina con elementos y atributos
específicos para generar el contenido dinámico. En su mayor parte, el sistema de
plantillas en Angular no cambió tanto.
www.iplacex.cl 7
{} Rendering

<div>
Hello, my name is {{name}}.
</div>

Sin embargo, a diferencia de Angular 1, este enlace de datos es de una manera. Al

hacerlo, se ha reducido el número de detectores de eventos generados y, por lo tanto,
se ha mejorado el rendimiento.

[] Binding properties

Cuando un componente necesita resolver y enlazar una variable, Angular utiliza ahora la
sintaxis []. Nos referimos a esto anteriormente en este capítulo cuando cubrimos las
entradas.

Si tenemos this.currentColor en nuestro componente, pasaríamos esta variable a nuestro

componente, y Angular aseguraría que los valores permanecerían actualizados:

<card-header [themeColor]="currentColor"></card-header>

( ): Event handling

En Angular 1, usaríamos directivas personalizadas para escuchar eventos de usuario,

como hacer clic en un elemento (como ng-clic). Angular ha adoptado un enfoque más
limpio y simplemente envuelve el evento que desea escuchar entre paréntesis y luego lo
asigna a una función en el componente:

<my-component (click)="onUserClick($event)"></my-component>

[( )]: Two-way data binding

De forma predeterminada, Angular ya no establece el enlace de datos bidireccional. Si

necesita tener esta funcionalidad, la nueva sintaxis es en realidad una notación abreviada
de la propiedad de enlace y las sintaxis de manejo de eventos:

<input [(ngModel)]="userName">

El valor this.username de su componente se mantendrá sincronizado con el valor de

entrada.

www.iplacex.cl 8
*: The asterisk

El uso del asterisco antes de ciertas directivas le dice a Angular que trate nuestra plantilla
de una manera especial. En lugar de representar la plantilla tal cual, primero le aplicará
la directiva Angular. Por ejemplo, ngFor toma nuestro <my-component> y lo sella para
cada elemento de los elementos, pero nunca representa nuestra inicial <my-component>
ya que es una plantilla:

<my-component *ngFor="let item of items">

</my-component>

Events

Los eventos en Angular utilizan la notación de paréntesis en plantillas y métodos de

activación en la clase de un componente. Por ejemplo, supongamos que tenemos esta
plantilla:

@Component(...)
class MyComponent {
clicked() {
}
}

Nuestro método clicked () en el componente se llamará cuando se haga clic en el botón.

Además, los eventos en Angular se comportan como eventos DOM normales. Pueden
burbujear hacia arriba y propagarse hacia abajo.

Si necesitamos acceso al objeto de evento, simplemente pase el $event como un

parámetro en la función de devolución de llamada de evento:

<button (click)="clicked($event)"></button>

y la clase de componente se convertiría en:

@Component(...)
class MyComponent {
clicked(event) {
}
}

www.iplacex.cl 9
Eventos Custom

¿Qué pasa si un componente necesita transmitir un evento personalizado a otro

componente? Angular hace que este proceso sea bastante fácil.

En nuestro componente, importamos los módulos Output y EventEmitter. Luego

definimos nuestro nuevo evento, UserUpdated, usando el decorador @Output. Este
evento es una instancia de un EventEmitter:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'user-profile',
template: '<div>Hi, my name is </div>'
})
export class UserProfile {
@Output() userDataUpdated = new EventEmitter();
constructor() {
// Update user

// ...
this.userDataUpdated.emit(this.user);
}
}

Cuando queremos activar la difusión del evento, simplemente llama al método de emisión
en el tipo de evento personalizado e incluye cualquier parámetro que se transmita con el
evento.

Ahora, cuando usamos este componente en otra parte de nuestra aplicación, podemos
vincular el evento que emite el perfil de usuario:

<user-profile (userDataUpdated)="userProfileUpdated($event)"></user-profile>

Cuando importamos nuestro componente UserProfile a nuestro nuevo componente,

ahora puede escuchar el evento UserProfileUpdated que se emite :

import { Component } from '@angular/core';

import { UserProfile } from './user-profile';
export class SettingsPage {
constructor() { }
userProfileUpdated(user) {
// Handle the event
}
}

www.iplacex.cl 10
Ciclo de vida de los eventos

Tanto la aplicación Angular como sus componentes ofrecen ganchos de ciclo de vida
que dan a los desarrolladores acceso a cada uno de los pasos críticos a medida que se
producen. Estos eventos generalmente están relacionados con su creación a, su
representación y su destrucción.

NgModule

El equipo Angular reelaboró el método de arranque de su aplicación mediante el uso de

la función ngModule. Esto se hizo hacia el final del ciclo de candidatos de lanzamiento
para Angular, por lo que podría ser una sorpresa para algunos. El @NgModule toma un
objeto de metadatos que le dice a Angular cómo compilar y ejecutar el código del módulo.
Además, @NgModule le permite declarar todas sus dependencias por adelantado, en
lugar de tener que declararlas varias veces en una aplicación:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

Este ejemplo de código muestra un archivo app.module.ts básico que utilizará

BrowserModule para permitir que la aplicación Angular se ejecute correctamente en un
navegador y, a continuación, declarar y arrancar el AppComponent.

Este módulo es usado a su vez por el archivo main.ts para realizar el bootstrapping
actual:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

www.iplacex.cl 11
Este código de ejemplo inicializa la plataforma en la que se ejecuta su aplicación y, a
continuación, utiliza la plataforma para iniciar su App Module. Las plantillas Ionic Starter
generarán los módulos necesarios para usted.

Otra ventaja de este sistema es que nos permite utilizar el compilador Ahead of Time
(AoT), que proporciona aplicaciones mucho más rápidas.

Evento init componente

Cuando se crea un componente, se llama a su función constructora. Dentro del

constructor, puede ocurrir cualquier inicialización que necesitemos realizar en el
componente. Sin embargo, si nuestro componente depende de información o
propiedades de un componente hijo, no tendremos acceso a esos datos.

Angular proporciona el evento ngOnInit para manejar esta necesidad de esperar hasta
que la inicialización del componente sea realmente completa. Nuestro componente
puede esperar a que este método sea activado por el marco. Entonces todas nuestras
propiedades se resuelven y están disponibles para ser utilizadas por el componente.

www.iplacex.cl 12
10. Ciclo de Vida de los Eventos de los Componentes

Viendo más allá de ngOnInit, hay varios otros eventos del ciclo de vida para un
componente:

• ngOnDestroy

El método ngOnDestroy() pertenece al ciclo de vida de los componentes de

Angular. Es el lugar adecuado para realizar las acciones necesarias a
ejecutar con la destrucción de un componente.

Para usar este método tenemos que implementar la interfaz OnDestroy. Y

dentro de la implementación del componente, se debe definir el método
ngOnDestroy(), para cumplir el contrato definido por esta interfaz.

Primero tenemos que asegurarnos de importar la interfaz OnDestroy, desde

"@angular/core".

import { Component, OnInit, OnDestroy } from '@angular/core';

Una vez importada, ya podemos implementarla, de la siguiente manera.

export class MiComponent implements OnInit, OnDestroy {

ngOnInit() {
// acciones de inicialización
}
ngOnDestroy() {
// acciones de destrucción
}
}

• ngDoCheck

Este método proporciona la capacidad de realizar una detección de cambios

personalizada.

• ngOnChanges(changes)

Este método se llama cuando uno de los enlaces del componente ha cambiado
durante el ciclo de comprobación. El parámetro del método será un objeto en el
formato:

www.iplacex.cl 13
 {
'prop': PropertyUpdate
}

• ngAfterContentInit()

A diferencia de ngOnInit, que se llama antes de que el contenido se haya

renderizado, este método se llama una vez que el contenido se representa por
primera vez en la vista.

• ngAfterContentChecked()

Este método se llama después de Angular comprueba los enlaces del contenido
externo que proyectó en su vista.

www.iplacex.cl 14
 11. Eventos en Ionic

Aunque puede utilizar los eventos Angular descritos, se recomienda utilizar los eventos
Ionic en su lugar. La siguiente tabla muestra la descripción de sus desencadenadores.

Evento Descripción

ionViewDidLoad Se ejecuta cuando la página se ha cargado. Este evento solo ocurre

una vez por página que se está creando. Si una página sale, pero se
almacena en caché, este evento no se activará de nuevo en una
vista posterior.

ionViewWillEnter Se ejecuta cuando la página está a punto de entrar y convertirse en

la página activa.

ionViewDidEnter Se ejecuta cuando la página se ha introducido completamente y

ahora es la página activa. Este evento se activará, ya sea en la
primera carga o en una página almacenada en caché.

ionViewWillLeave Se ejecuta cuando la página está a punto de salir y ya no es la

página activa.

ionViewDidLeave Se ejecuta cuando la página ha terminado de salir y ya no es la

página activa.

ionViewWillUnload Se ejecuta cuando la página está a punto de ser destruida y se

eliminan sus elementos.

ionViewCanEnter Se ejecuta antes de que la vista pueda entrar. Esto se puede usar
como una especie de «guardia» en vistas autenticadas donde
necesita verificar los permisos antes de que la vista pueda ingresar.

ionViewCanLeave Se ejecuta antes de que la vista pueda salir. Esto se puede usar
como una especie de «guardia» en vistas autenticadas donde
necesita verificar los permisos antes de que la vista pueda salir.

www.iplacex.cl 15
12. Componentes de Ionic Framework

A continuación, se detallan los componentes disponibles desde la documentación de

Ionic para ser utilizado de forma inmediata en nuestras aplicaciones.

ion-button: Los botones proporcionan un elemento en el que se puede hacer clic, se

puede usar en formularios o en cualquier lugar que necesite una funcionalidad de botón
simple y estándar. Pueden mostrar texto, iconos o ambos. Los botones se pueden
diseñar con varios atributos para que se vean de una manera específica.

Creating: Una hoja de acción puede ser creada por el Action Sheet Controller de una
matriz de buttons, con cada botón incluyendo propiedades para su text, y opcionalmente
a handler y role. Si regresa un controlador false, la hoja de acción no se descartará. Una
hoja de acción también puede tener opcionalmente un title, subTitle un icon.

Buttons: La propiedad role de un botón puede ser destructive o cancel. Los botones sin
un rol de propiedad se cargarán en la parte inferior, sin importar donde se encuentre en
el array. Todos los demás botones se mostrarán en el orden en que se agregaron a la
raíz de buttons. Se recomienda que la propiedad destructive del botón sea siempre el
primer botón de la matriz por el botón superior, además, si la hoja de acción se descarta
tocando el fondo, se activara el controlador desde el botón con el rol de cancelar.

Propiedades

Animated

Descripción Si es true la hoja de acción se animará

Atributo Animated

Tipo boolean

Defecto True

backdropDismiss

Descripción Si es true la hoja de acción se descarta si

el fondo se hace click

Atributo backdrop-dismiss

Tipo boolean

www.iplacex.cl 16
 Defecto True

buttons

Descripción Es un arreglo de hojas de acción

Atributo (string | ActionSheetButton)[]

Tipo array

Defecto []

cssClass

Descripción Agrega clases custom en el css. Si hay

múltiples clases estos deben ser
separados por espacio

Atributo css-class

Tipo string | string[] | undefined

ion-action-sheet: una hoja de acciones es un diálogo que muestra un set de opciones.

Aparece en la parte superior del contenido de la app y debe ser seleccionado de forma
manual por el usuario, para interactuar con la app. La opción destructive está hecha por
defecto en modo ios. Pero hay múltiples caminos para descartar la hoja de acción,
presionando el fondo o presionando la tecla de esc en versiones de escritorio.

ion-checkbox: permite la selección múltiple de un conjunto de opciones. Esto aparece

cuando el chequeado(tickeado) está activo. Clickeando el checkbox alternara la
propiedad checked, esto se puede revisar de forma programada por la configuración de
la propiedad checked.

www.iplacex.cl 17
 checked

Description Si es true, el checkbox es seleccionado.

Attribute Checked

Type Boolean

Default False

ion-card: las tarjetas son una pieza estándar que sirve como un punto de entrada para
una información más detallada. Una tarjeta puede ser un solo componente, pero a
menudo está arriba del header, título, subtítulo, y el content. ion-card se divide entre sub-
componentes para reflejar esto.

Propiedades

Button

Description Si es true, la etiqueta será renderizada y la tarjeta será pulsarle

Attribute button

Type Boolean

Default False

www.iplacex.cl 18
Color

Description El color a usar de la paleta de colores de nuestra aplicación.

Las opciones por defecto son: “primary”,”secondary”,” tertiary”,

"warning","danger", "medium" y “dark”

Attribute Color

Type string | undefined

disabled

Description Si es true, el usuario no puede interactuar con la tarjeta

Attribute disabled

Type Boolean

Default False

www.iplacex.cl 19
href

Description Contiene una url o el fragmento de un punto de hipervínculo.

En esta propiedad se puede setear el ancho para el

renderizado.

Attribute Href

Type String | undefined

Mode

Description Determina el estilo de plataforma en uso.

Attribute mode

Type “ios” | “md”

www.iplacex.cl 20
rel

Description Especifica las relaciones del objetivo para enlazar el objeto.

Attribute rel

Type string | undefined

routerDirection

Description Cuando se utiliza un enrutador, especifica la dirección de

transición al navegar a otra página usando href.

Attribute Router-direction

Type “back” | “forward” |” root”

Default ‘forward’

www.iplacex.cl 21
 target

Description Especifica donde mostrar la URL vinculada. Solo se aplica

cuando un “href” está provisto.

Palabras claves especiales: “_blank”,”_self”,”_parent”,”_top”

Attribute Target

Type string | undefined

Type

Description El tipo del botón. Solo es usado cuando la propiedad “onClick”

or “button” está presente.

Attribute Type

Type “button” | “reset”|”submit”

Default ‘button’

ion-content: proporciona un área de contenido fácil de usar con algunos métodos

útiles para controlar el área desplazable. Solo debe haber un contenido en una vista.

www.iplacex.cl 22
Propiedades

color

Descripción El color para usar de la paleta de colores de su aplicación. Las opciones

por defecto son: “primary”, “secondary”, "tertiary","success", "warning",
"danger", "light", "medium", y "dark".

Atributo Color

Tipo string | undefined

forceOverscroll

Descripción Si es true y el contenido no causa un desplazamiento de

desbordamiento, la interacción del desplazamiento provocará un
rebote. Si el contenido excede los límites de ionContent, nada
cambiará. Tenga en cuenta que no desactiva el rebote del sistema
en iOS. Esa es una configuración de nivel de sistema operativo.

Atributo force-overscroll

Tipo boolean | undefined

www.iplacex.cl 23
fullscreen

Descripción Si es true, el contenido se desplazará detrás de los

encabezados y pies de página. Este efecto se puede ver
fácilmente configurando la barra de herramientas en
transparente.

Atributo fullscreen

Tipo boolean

Defecto false

scrollEvents

Descripción Por razones de rendimiento, los eventos ionScroll están

deshabilitados de forma predeterminada, para habilitarlos y
comenzar a escuchar desde (ionScroll), establezca esta
propiedad en true.

Atributo scroll-events

Tipo boolean

Defecto false

www.iplacex.cl 24
scrollX

Descripción Si desea habilitar el desplazamiento de contenido en el eje X,

establezca esta propiedad en true.

Atributo scroll-x

Tipo boolean

Defecto false

scrollY

Descripción Si desea deshabilitar el desplazamiento de contenido en el eje Y, establezca

esta propiedad en false.

Atributo scroll-y

Tipo boolean

Defecto true

www.iplacex.cl 25
Eventos

Nombre Descripción

Emitido al desplazarse. Este evento está deshabilitado por

ionScroll
defecto. Mira la propiedad: `scrollEvents`

ionScrollEnd Emitido cuando el desplazamiento ha finalizado.

ionScrollStart Emitido cuando el desplazamiento ha comenzado.

Métodos

getScrollElement

Descripción Obtenga el elemento donde tiene lugar el desplazamiento real. Este elemento
se puede usar para suscribirse a scrolleventos o modificar manualmente
scrollTop. Sin embargo, se recomienda utilizar la API proporcionada por ion-
content, es decir, utilizando ionScroll, ionScrollStart, ionScrollEnd para
desplazarse eventos y scrollToPoint() para desplazar el contenido a un cierto
punto.

Firma getScrollElement() => Promise<HTMLElement>

www.iplacex.cl 26
scrollByPoint

Descripción Desplácese por una distancia X / Y especificada en el componente.

Firma scrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

Descripción Desplácese hasta la parte inferior del componente.

Firma scrollToBottom(duration?: number) => Promise<void>

scrollToPoint

Descripción Desplácese a una ubicación X / Y especificada en el componente.

Firma scrollToPoint(x: number | null | undefined, y: number | null | undefined,

duration?: number) => Promise<void>

www.iplacex.cl 27
scrollToTop

Descripción Desplácese hasta la parte superior del componente.

Firma scrollToTop(duration?: number) => Promise<void>

www.iplacex.cl 28
 Conclusión
En esta semana vimos cómo podemos crear las vistas necesarias para nuestra
aplicación, donde podremos navegar y probar la vista en distintas plataformas.

Junto a ello las herramientas como Angular son un gran aliado para facilitar la creación
y maquetación de nuestro proyecto, TypeScript nos permite una programación orientada
a objetos de nuestra aplicación para su posterior compilación a JavaScript.

www.iplacex.cl 29
 Bibliografía

Javatpoint. (2018). Ionic Tutorial. Sitio web: https://www.javatpoint.com/ionic

Chris Griffith. (2017). Mobile App Development with Ionic. O'Reilly.

Max Lynch, Ben Sperry y Adam Bradley. (2013). Ionic. Sitio web:
https://ionicframework.com/

www.iplacex.cl 30
www.iplacex.cl 31