Aurelia - Primera aplicación

En este capítulo, explicaremos la aplicación de inicio de Aurelia creada en nuestro último capítulo. También lo guiaremos a través de la estructura de carpetas, para que pueda comprender los conceptos básicos detrás del marco de Aurelia.

Estructura de carpetas

  • package.json representa documentación sobre npmpaquetes instalados. También muestra la versión de esos paquetes y proporciona una manera fácil de agregar, eliminar, cambiar la versión o instalar automáticamente todos los paquetes cuando la aplicación debe compartirse entre desarrolladores.

  • index.htmles la página predeterminada de la aplicación como en la mayoría de las aplicaciones basadas en HTML. Es un lugar donde se cargan los scripts y las hojas de estilo.

  • config.jses el archivo de configuración del cargador Aurelia. No pasará mucho tiempo trabajando con este archivo.

  • jspm_packages es el directorio para el SystemJS módulos cargados.

  • styleses el directorio de estilo predeterminado. Siempre puede cambiar el lugar donde guarda sus archivos de estilo.

  • srcLa carpeta es un lugar donde pasará la mayor parte del tiempo de desarrollo. MantieneHTML y js archivos.

Archivos fuente

Como ya dijimos, el srcdirectorio es el lugar donde se guardará la lógica de su aplicación. Si observa la aplicación predeterminada, puede ver queapp.js y app.html son muy simples.

Aurelia nos permite usar el lenguaje central de JavaScript para las definiciones de clases. El siguiente ejemplo predeterminado muestra la clase EC6.

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

los message La propiedad está vinculada a la plantilla HTML usando ${message}sintaxis. Esta sintaxis representa el enlace unidireccional convertido en cadena y mostrado dentro de la vista de plantilla.

app.html

<template>
   <h1>${message}</h1>
</template>

Como ya comentamos en el último capítulo, podemos iniciar el servidor ejecutando el siguiente comando en el command prompt ventana.

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

La aplicación se mostrará en la pantalla.