Аурелия - первое приложение

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

Структура папки

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

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

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

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

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

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

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

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

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

app.js

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

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

app.html

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

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

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

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