Учебники

Аурелия – первое применение

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

Структура папок

  • package.json представляет документацию об установленных пакетах npm . Он также показывает версию этих пакетов и предоставляет простой способ добавлять, удалять, изменять версию или автоматически устанавливать все пакеты, когда приложение должно быть доступно для разработчиков.

  • index.html – это страница приложения по умолчанию, как и в большинстве приложений на основе HTML. Это место, где загружаются скрипты и таблицы стилей.

  • config.js – это файл конфигурации загрузчика Aurelia. Вы не будете тратить много времени на работу с этим файлом.

  • jspm_packages – это каталог для загруженных модулей SystemJS .

  • стили – это каталог стилей по умолчанию. Вы всегда можете изменить место, где вы храните свои файлы стилей.

  • Папка src – это место, где вы будете проводить большую часть времени на разработку. Он хранит файлы HTML и JS .

package.json представляет документацию об установленных пакетах npm . Он также показывает версию этих пакетов и предоставляет простой способ добавлять, удалять, изменять версию или автоматически устанавливать все пакеты, когда приложение должно быть доступно для разработчиков.

index.html – это страница приложения по умолчанию, как и в большинстве приложений на основе HTML. Это место, где загружаются скрипты и таблицы стилей.

config.js – это файл конфигурации загрузчика Aurelia. Вы не будете тратить много времени на работу с этим файлом.

jspm_packages – это каталог для загруженных модулей SystemJS .

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

Папка src – это место, где вы будете проводить большую часть времени на разработку. Он хранит файлы HTML и JS .

Исходные файлы

Как мы уже говорили, каталог src – это место, где будет храниться логика вашего приложения. Если вы посмотрите на приложение по умолчанию, то увидите, что app.js и app.html очень просты.

Aurelia позволяет нам использовать основной язык JavaScript для определений классов. Следующий пример по умолчанию показывает класс EC6.

app.js

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

Свойство сообщения привязано к шаблону HTML с использованием синтаксиса $ {message} . Этот синтаксис представляет одностороннюю привязку, преобразованную в строку и показанную в представлении шаблона.

app.html

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

Как мы уже обсуждали в предыдущей главе, мы можем запустить сервер, выполнив следующую команду в окне командной строки .

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

Приложение будет отображено на экране.