Aurelia - Primeira Aplicação

Neste capítulo, explicaremos o aplicativo inicial Aurelia criado em nosso último capítulo. Também o guiaremos pela estrutura de pastas, para que você possa entender os principais conceitos por trás da estrutura Aurelia.

Estrutura da Pasta

• package.json representa a documentação sobre npmpacotes instalados. Ele também mostra a versão desses pacotes e fornece uma maneira fácil de adicionar, excluir, alterar a versão ou instalar automaticamente todos os pacotes quando o aplicativo precisa ser compartilhado entre os desenvolvedores.

• index.htmlé a página padrão do aplicativo como na maioria dos aplicativos baseados em HTML. É um local onde os scripts e folhas de estilo são carregados.

• config.jsé o arquivo de configuração do carregador Aurelia. Você não vai perder muito tempo trabalhando com este arquivo.

• jspm_packages é o diretório para o SystemJS módulos carregados.

• stylesé o diretório de estilo padrão. Você sempre pode alterar o local onde guarda seus arquivos de estilo.

• srcpasta é um local onde você passará a maior parte do tempo de desenvolvimento. MantémHTML e js arquivos.

Arquivos Fonte

Como já dissemos, o srcdiretório é o lugar onde a lógica do seu aplicativo será mantida. Se você olhar para o aplicativo padrão, verá queapp.js e app.html são muito simples.

Aurelia nos permite usar a linguagem de núcleo JavaScript para definições de classe. O exemplo padrão a seguir mostra a classe EC6.

app.js

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

o message propriedade está ligada ao modelo HTML usando ${message}sintaxe. Esta sintaxe representa a vinculação unilateral convertida em string e mostrada dentro da visualização do modelo.

app.html

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

Como já discutimos no último capítulo, podemos iniciar o servidor executando o seguinte comando no command prompt janela.

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

O aplicativo será renderizado na tela.