Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 8D : 9H : 37M : 17S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Qué son pages y cómo generar las primeras de nuestra app

7/57

Desde ojos del usuario podemos decir que una aplicación está compuesta por distintas paginas o pages en Ionic.

Nuestra aplicación contara con cuatro distintas páginas:

  1. Login: nuestro usuario podrá ingresar o registrarse a partir de esta pantalla.
  2. Home: será nuestro dashboard o página central de la aplicación donde se podrá ver la lista de amigos, así como información del usuario, también podrá cambiar su status.
  3. Configuración: en esta pantalla el usuario podrá cambiar toda su información, dicha información se guarda en una base de datos remota.
  4. Conversación: accedes a ella desde Home dando click en algún amigo con el que quieras conversar, este chat es en tiempo real.

Dentro de nuestra carpeta pages/home encontraremos tres archivos con el mismo nombre, pero distinta terminación, el archivo que termina en .ts se refiere a TypeScript.

En nuestro archivo ts encontraremos al inicio los imports que sirven para indicarle a nuestra clase de TypeScript donde estará cada objeto externo que vayamos a utilizar. También tenemos un decorador cuya funcionalidad es provista por TypeScript y podemos observar que es el decorador de Component el cual es propio de Angular, este decorador siempre tendrá asignado un archivo html.

Los decoradores proporcionaran una funcionalidad especifica para cada clase en la que se utilice, dependiendo del decorador que se utilice será la funcionalidad que añada, por ejemplo:

  • Component: tendrán atado un html pero pueden estar dentro de algún componente o página.
  • Pages: están atados a un html pero a diferencia del Component estos no pueden estar dentro de un componente o alguna otra página.
  • Injectable: no tienen atados ningún html, son servicios que pueden agregarse a otras clases diferentes.

Dentro de las clases en la programación orientada a objetos, el método constructor es el primer método que se ejecuta y sus parámetros serán aquellos objetos que necesitemos inyectar para usarlos dentro de esa clase en específico. Un objeto común que inyectemos en las paginas de nuestra aplicación será el NavController, este objeto se encarga de las funciones de navegación en Ionic.

En la misma carpeta encontraremos un archivo de estilos, los estilos que se encuentren dentro de este archivo solo afectaran a la página en específico.
Para generar nuestras propias paginas debemos correr el comando:

ionic generate page <nombre del page o página >

Las clases de Ionic tienen un método especifico llamado ionViewDidLoad que se ejecuta automáticamente cuando termina de cargar la vista del html.
Ionic crea un archivo modulo para cada página que genere, este archivo se encarga de hacer disponible la página para el resto de la aplicación.

Debemos añadir manualmente nuestras páginas al sidemenu dentro de nuestro archivo app.component.ts para poder navegar a ellas desde nuestro menú.
Por último, debemos añadir los archivos module de nuestras páginas al archivo module principal que se encuentra dentro de la carpeta app.

$ ionic generate page login
$ ionic generate page conversation
$ ionic generate page profile

ionic g page [nombre de la pagina] ```

@IonicPage() Con este decorador decimos que se trata de un page (esta página no debe ser incluida dentro de otra)

Los modulos de cada pages se pueden importar en el modulo principal para que estén disponibles de manera global

Los decoradores proporcionaran una funcionalidad especifica para cada clase en la que se utilice, dependiendo del decorador que se utilice será la funcionalidad que añada, por ejemplo:
Component: tendrán atado un html pero pueden estar dentro de algún componente o página.
Pages: están atados a un html pero a diferencia del Component estos no pueden estar dentro de un componente o alguna otra página.
Injectable: no tienen atados ningún html, son servicios que pueden agregarse a otras clases diferentes.
Dentro de las clases en la programación orientada a objetos, el método constructor es el primer método que se ejecuta y sus parámetros serán aquellos objetos que necesitemos inyectar para usarlos dentro de esa clase en específico. Un objeto común que inyectemos en las paginas de nuestra aplicación será el NavController, este objeto se encarga de las funciones de navegación en Ionic.
Comando para crear pages: ionic generate page <nombre del page o página >
Las clases de Ionic tienen un método especifico llamado ionViewDidLoad que se ejecuta automáticamente cuando termina de cargar la vista del html.

Messenger, que buenos recuerdos 😉

Ionic es extremadamente poderoso e intuitivo … Deja volar tu imaginación y consigue un gran equipo de trabajo.

Buenas mi proyecto no tiene la misma estructura que tiene definida ahí. Sabrias porque?

como puedo realizar la instalación de ionic 3 para trabajar con la misma version de este curso ? actualmente tengo instalada v5

con los cursos de ionic siempre pasa lo mismo a la hora de instalar ionic no coincide con el del curso ni aqui en platzi ni en otros cursos webs…

Porque en este caso Importamos LoginPageModule y no solo el LoginPage ?

la estructura de app.component.ts es diferente 😦

$ ionic generate page login
$ ionic generate page conversation
$ ionic generate page profile

ionic g page [nombre de la pagina] ```

@IonicPage() Con este decorador decimos que se trata de un page (esta página no debe ser incluida dentro de otra)

Los modulos de cada pages se pueden importar en el modulo principal para que estén disponibles de manera global

Los decoradores proporcionaran una funcionalidad especifica para cada clase en la que se utilice, dependiendo del decorador que se utilice será la funcionalidad que añada, por ejemplo:
Component: tendrán atado un html pero pueden estar dentro de algún componente o página.
Pages: están atados a un html pero a diferencia del Component estos no pueden estar dentro de un componente o alguna otra página.
Injectable: no tienen atados ningún html, son servicios que pueden agregarse a otras clases diferentes.
Dentro de las clases en la programación orientada a objetos, el método constructor es el primer método que se ejecuta y sus parámetros serán aquellos objetos que necesitemos inyectar para usarlos dentro de esa clase en específico. Un objeto común que inyectemos en las paginas de nuestra aplicación será el NavController, este objeto se encarga de las funciones de navegación en Ionic.
Comando para crear pages: ionic generate page <nombre del page o página >
Las clases de Ionic tienen un método especifico llamado ionViewDidLoad que se ejecuta automáticamente cuando termina de cargar la vista del html.

Messenger, que buenos recuerdos 😉

Ionic es extremadamente poderoso e intuitivo … Deja volar tu imaginación y consigue un gran equipo de trabajo.

Buenas mi proyecto no tiene la misma estructura que tiene definida ahí. Sabrias porque?

como puedo realizar la instalación de ionic 3 para trabajar con la misma version de este curso ? actualmente tengo instalada v5

con los cursos de ionic siempre pasa lo mismo a la hora de instalar ionic no coincide con el del curso ni aqui en platzi ni en otros cursos webs…

Porque en este caso Importamos LoginPageModule y no solo el LoginPage ?

la estructura de app.component.ts es diferente 😦