Crear una aplicación con Aurelia

Aurelia, framework javascript

En el anterior tutorial sobre Aurelia vimos para que podemos utilizar este framework y aprendimos a crear nuestra primera aplicación.

En este tutorial sobre Aurelia vamos a desmontar nuestra aplicación para entender cómo funciona. La aplicación skeleton-navigation ya está completamente configurada, y eso nos ahorra mucho trabajo, pero debemos entender cómo funciona Aurelia.

La aplicación skeleton-navigation guarda toda las clases / componentes en el directorio src, al lanzar la aplicación con el comando gulp watch, la aplicación es compilada y se convierte a javascript para que pueda ser legible por los navegadores.

Existe una configuración para cada aplicación y es muy importante entenderla, pues esta configuración hace el bootstrap, es decir, ejecuta la aplicación, para entenderlo, abre el archivo index.html y verás lo siguiente.


Aquí debemos fijarnos en la etiqueta body, como podemos ver tenemos un atributo llamado aurelia-app y el valor de la misma es main, pues este es el archivo encargado de lanzar la app, si el valor fuese myapp, el archivo debería llamarse myapp.

Para empezar desde 0, elimina todo el contenido que hay en el directorio src y crea un archivo main.js con el siguiente contenido.


La función configure lanza la aplicación, en concreto la última línea, y una vez se ejecuta, Aurelia automáticamente busca un archivo en el directorio src llamado app.js, si en lugar de querer lanzar la aplicación con el archivo app.js, la queremos lanzar con el archivo myapp.js, modifica esa línea por la siguiente.

Pasar datos a vistas en Aurelia

Así que vamos a crear un archivo llamado app.js en el directorio src y añade el siguiente código.


Lo anterior es un componente en Aurelia, que está formado por una vista y una vista de modelo, (view => view-model), la vista de modelo está escrita en el lenguaje que hayamos seleccionado pero las vistas siempre son html. La vista de modelo es la encargada de proveer datos y funcionalidades a la vista, la vista simplemente debe mostrarlos.

En el ejemplo anterior hemos creado una propiedad de la clase llamada helloworld, para imprimir esa variable simplemente crear el archivo app.html en el directorio src y añade el siguiente código.


Esta el la sintaxis que utiliza Aurelia en las vistas, de esa forma podemos imprimir variables, todo el código html siempre debe ir dentro de los tags template para que Aurelia lo pueda leer.

Capturar eventos en Aurelia

Si queremos capturar un evento en Aurelia es muy sencillo, añade el siguiente botón en la vista.


Esta es una de las formas de capturar el evento click en Aurelia, ahora sólo nos queda crear el método que capture el evento click del botón, así que abre el archivo app.js y añade lo siguiente.


Ahora, si pulsas el botón, el método send será disparado y aparecerá el alert.

Bucles en Aurelia

Ahora vamos a ver cómo podemos recorrer arrays en Aurelia en las vistas, así que vamos a añadir un array a la clase App.


Ahora que tenemos unos cuantos héroes, abre el archivo app.html y añade lo siguiente.


Con la línea repeat.for=”hero of heroes” ya estamos iterando el array de héroes, así de sencillo es utilizar bucles en Aurelia.

En este tutorial sobre Aurelia hemos visto varias cosas interesantes, espero que te haya gustado y te parezca interesante.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies