Aurelia - Configuração
Neste capítulo, mostraremos como configurar o framework Aurelia para suas necessidades. Às vezes, você precisará definir uma configuração inicial ou executar algum código antes que o aplicativo seja renderizado para os usuários.
Etapa 1 - Criar main.js
Vamos criar main.js arquivo dentro srcpasta. Dentro deste arquivo iremos configurar o Aurelia.
Você também precisa dizer ao Aurelia para carregar o módulo de configuração. Você pode ver a parte comentada no exemplo a seguir.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<link rel = "stylesheet" href = "styles/styles.css">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
</head>
<body aurelia-app = "main">
<!--Add "main" value to "aurelia-app" attribute... -->
<script src = "jspm_packages/system.js"></script>
<script src = "config.js"></script>
<script>
SystemJS.import('aurelia-bootstrapper');
</script>
</body>
</html>Etapa 2 - configuração padrão
O código abaixo mostra como usar a configuração padrão. configurefunção permite definir a configuração manualmente. Estamos definindouse propriedade para especificar o que precisamos.
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot());
}Etapa 3 - Configuração Avançada
Existem muitas opções de configuração que podemos usar. Está fora do escopo deste artigo mostrar tudo a você, portanto, explicaremos como a configuração funciona no exemplo a seguir. Basicamente, estamos dizendo a Aurelia para usardefault data binding language, default resources, development logging, router, history e event aggregator. Estes são conjuntos padrão de plug-ins.
export function configure(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.developmentLogging()
.router()
.history()
.eventAggregator();
aurelia.start().then(() => aurelia.setRoot());
}Note - Essas configurações serão explicadas em detalhes no próximo capítulo.