Aurelia - Configuración

En este capítulo, le mostraremos cómo configurar el marco de Aurelia para sus necesidades. A veces, deberá establecer una configuración inicial o ejecutar algún código antes de que la aplicación se muestre a los usuarios.

Paso 1: crea main.js

Vamos a crear main.js archivo dentro srccarpeta. Dentro de este archivo configuraremos Aurelia.

También debes decirle a Aurelia que cargue el módulo de configuración. Puede ver la parte comentada en el siguiente ejemplo.

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>

Paso 2: configuración predeterminada

El siguiente código muestra cómo utilizar la configuración predeterminada. configureLa función permite establecer la configuración manualmente. Estamos poniendouse propiedad para especificar lo que necesitamos.

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

Paso 3: configuración avanzada

Hay muchas opciones de configuración que podemos usar. Está fuera del alcance de este artículo mostrarle todo, por lo que explicaremos cómo funciona la configuración en el siguiente ejemplo. Básicamente le estamos diciendo a Aurelia que usedefault data binding language, default resources, development logging, router, history y event aggregator. Estos son un conjunto estándar de complementos.

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

   aurelia.start().then(() => aurelia.setRoot());
}

Note - Estos ajustes se explicarán en detalle en el siguiente capítulo.