В этой главе мы расскажем о запуске приложения 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
Приложение будет отображено на экране.