Эй, ребята :D Вернемся к другому. На этот раз мы поговорим о том, как вы можете настроить процесс запуска приложения Aurelia. Если вы помните в предыдущем посте, мы создали приложение hello world с Аурелией. Там мы создали файл index.html с атрибутом aurelia-app в теге body и включили system.js и config.js в тег html и загрузили приложение, вызвав System.import('aurelia-bootstrapper'); Затем мы создали папку src и добавили app.js и app.html в экспортированный класс App из файла app.js со свойством helloMessage, и мы привязали данные этого свойства к app.html, и мы запустили приложение на нашем локальном сервере. Затем автоматически все сошлось воедино, и мы запустили наше первое приложение Aurelia.

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

Итак, чтобы добавить точку, в которой мы можем настроить приложение при его запуске, добавьте значение в атрибут aurelia-app. Я собираюсь добавить main в качестве значения. Итак, теперь тег body index.html должен выглядеть так.

[code language="html"]
‹body aurelia-app="main"›
‹script src="jspm_packages/system.js"›‹/script›
‹script src= ”config.js”›‹/script›
‹script›
System.import('aurelia-bootstrapper');
‹/script›
‹/body›
[/ код]

Теперь Aurelia начинает искать файл с именем main.js, который содержит функцию, называемую configure по соглашению. Поэтому нам нужно его создать. Создайте файл с именем main.js в папке src и добавьте следующую функцию настройки, которая принимает аргумент

[code language="javascript"]
функция экспорта configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a => a.setRoot( ));
}
[/code]

Что это делает, так это то, что он говорит Aurelia использовать стандартную конфигурацию и устанавливает корень приложения. Теперь вы можете запустить его. Прежде чем вы начнете, если вы помните, в предыдущем приложении hello world, когда мы запускали приложение, приложение Aurelia выводило в консоль кучу строк отладки. Это выглядело примерно так.

Не верите мне? Отмените сделанные нами изменения, запустите и убедитесь сами. :P ИЛИ вы можете поверить мне на слово. ;) После того, как мы сделали указанное выше изменение, запускаем его и видим в консоли, теперь вы не видите строк отладки. Итак, мы внесли некоторые изменения в процесс запуска по умолчанию.

Теперь для простого примера предположим, что вам нужны только информационные строки в консоли. Давайте попробуем. Для этого необходимо импортировать LogManager из платформы Aurelia и ConsoleAppender из консоли ведения журналов Aurelia. После импорта нам нужно добавить новый ConsoleAppender в LogManager и установить уровень ведения журнала на info в LogManager. Новый main.js выглядит примерно так.

[code language="javascript"]
импорт {LogManager} из "aurelia-framework";
импорт {ConsoleAppender} из "aurelia-logging-console";

LogManager.addAppender(новый ConsoleAppender());
LogManager.setLevel(LogManager.logLevel.info);

функция экспорта configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a =› a.setRoot());
}
[/код]

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

Прямо сейчас ваш корневой модуль называется app (app.js и app.html), если он у вас такой, по соглашению Aurelia подберет его. Но если вам нужно поменять корневой модуль на другой, вы можете это сделать. Давайте переименуем наш корневой модуль из app в home. Поэтому переименуйте app.js в home.js и измените имя класса с App на Home, а затем переименуйте app.html в home.html

Теперь, если вы запустите приложение, вы увидите в консоли ошибку 404, говорящую о том, что Аурелии не удалось найти app.js в проекте. То есть по соглашению Aurelia пытается найти app.js и загрузить его как корневой модуль. Теперь нам нужно сообщить Аурелии, что нам нужен home.js в качестве корневого модуля. Для этого перейдите в main.js и введите home в функцию setRoot в качестве аргумента. Примерно так должна выглядеть функция configure в main.js.

[code language="javascript"]
функция экспорта configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a => a.setRoot( 'домой'));
}
[/code]

Теперь запустите приложение, и все должно работать нормально. В этом методе setRoot у вас есть возможность установить корневой контейнер в DOM, куда вам нужно загрузить корневой модуль, по умолчанию это тег body. Мы можем указать это или не указывать. Но мы можем указать и какой-то другой элемент. Давайте сделаем это сейчас.

Добавьте div внутри этого тега body и введите идентификатор. Я называю это контейнером приложения. Теперь ваше тело html должно выглядеть так.

[code language="html"]
‹body aurelia-app="main"›
‹div id="app-container"›‹/div›
‹script src="jspm_packages /system.js”›‹/script›
‹script src="config.js"›‹/script›
‹script›
System.import('aurelia-bootstrapper');
‹/script›
‹/body›
[/code]

Теперь перейдите к вашему main.js и в методе setRoot после аргумента, где мы устанавливаем корневой модуль, также установите корневой элемент. Добавьте document.getElementById('app-container'); в качестве второго параметра функции setRoot. Ваш код должен выглядеть так.

[code language="javascript"]
функция экспорта configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start()
.then(a =› a.setRoot('дом', document.getElementById('приложение-контейнер')));
}
[/code]

Теперь запустите приложение и увидите, что вместо рендеринга домашнего вида внутри тега body, теперь он находится в теге div, который мы вставили с идентификатором контейнера приложения. И все работает как надо.

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

Вот и все, ребята, это конец этого поста. Вы можете Скачать исходный код по ссылке. И давайте встретимся со следующим постом. С.. ;)