Учебники

Аурелия — Конфигурация

В этой главе мы покажем вам, как настроить платформу Aurelia для ваших нужд. Иногда вам нужно будет установить начальную конфигурацию или выполнить некоторый код, прежде чем приложение будет отображено для пользователей.

Шаг 1 — Создайте main.js

Давайте создадим файл main.js внутри папки src . Внутри этого файла мы настроим Aurelia.

Вы также должны указать Aurelia загрузить модуль конфигурации. Вы можете увидеть закомментированную часть в следующем примере.

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>

Шаг 2 — Конфигурация по умолчанию

Код ниже показывает, как использовать конфигурацию по умолчанию. Функция конфигурации позволяет установить конфигурацию вручную. Мы устанавливаем свойство use, чтобы указать, что нам нужно.

main.js

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

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

Шаг 3 — Расширенная настройка

Есть много вариантов конфигурации, которые мы могли бы использовать. В этой статье мы покажем вам все это, поэтому мы объясним, как работает конфигурация, в следующем примере. В основном мы говорим Aurelia использовать язык привязки данных по умолчанию, ресурсы по умолчанию, ведение журнала разработки, маршрутизатор, историю и агрегатор событий . Это стандартный набор плагинов.

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

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

Примечание. Эти настройки будут подробно описаны в следующей главе.