Привет, ребята :D Сегодня мы погрузимся в мир Аурелии с самым простым приложением, которое мы можем создать. Обычное приложение Hello World или в данном случае Hello Aurelia.. ;)
Без дальнейших церемоний, давайте приступим к этому, не так ли? Создайте папку на диске для проекта. Я назову его Привет, Аурелия. Откройте командную строку и перейдите в папку Hello Aurelia. Мы начнем с локальной установки JSPM (менеджер пакетов JavaScript) в эту папку. Если вы следили за сообщением «Введение в серию», у вас должен быть установлен JSPM глобально, так что это кажется немного избыточным. Но причина этого в том, что на машине, на которой вы развертываете эту кодовую базу, может быть установлен JSPM, а может и не быть. Так что всегда полезно иметь JSPM, включенный в исходный код. :) Итак, установите JSPM, введя следующее в командную строку.
[code language="bash"]
npm install jspm — save-dev
[/code]
Это установит JSPM и его зависимости в папку node_modules. Далее нам нужно инициализировать JSPM, чтобы начать сборку приложения Aurelia. Для этого введите следующую команду
[code language="bash"]
jspm init
[/code]
Это запустит процесс инициализации, задав вам несколько вопросов. Посмотрите на скриншот ниже. Он попросит создать файл Package.json, попросит ввести базовый URL-адрес для сервера, имя для папки jspm_package yada yada yada.. Примите все значения по умолчанию для этого шага. Но в последнем вопросе о том, какой транспилятор использовать, убедитесь, что bable является параметром по умолчанию, прежде чем принять его. Или введите bable и нажмите Enter. Примечание. Если вы используете TypeScript для разработки, вам следует выбрать TypeScript в качестве транспилятора для последнего вопроса. Поскольку мы не используем здесь TypeScript, мы примем значения по умолчанию (в данном случае bable). После последнего вопроса jspm инициализируется и создаст файл config.js с заданными нами настройками.
Затем нам нужно использовать jspm для установки Aurelia и Aurelia Bootstrapper в папку проекта. Для этого введите следующую команду.
[code language="bash"]
jspm install aurelia-framework aurelia-bootstrapper
[/code]
это установит Aurelia в папку, и мы готовы создать наше приложение Hello Aurelia.. :) Запустите ваш любимый редактор кода и создайте файл index.html в корне каталога. Это будет включать базовый HTML и ссылки на system.js из JSPM для загрузки модулей и config.js, созданных JSPM init, которые настраивают среды JSPM и bable. Также это будет включать строку javascript, которая запускает приложение Aurelia. Наконец, тег body будет иметь атрибут aurelia-app от Aurelia, который помечает это как приложение Aurelia. Таким образом, HTML-код в файле index.html должен выглядеть следующим образом.
[code language="html"]
‹!DOCTYPE html›
‹html lang="en"›
‹head›
‹meta charset="UTF-8›< br /> ‹title›Привет, Аурелия‹/title›
‹/head›
‹body aurelia-app›
‹script src="jspm_packages/system.js"›‹/script›
‹script src="config.js"›‹/script›
‹script›
System.import('aurelia-bootstrapper');
‹/script›
‹/body›
‹/html›
[/code]
Далее нам нужно создать место для размещения наших моделей представлений HTML и JavaScript. Давайте создадим папку с именем src в корневом каталоге. Затем нам нужно указать JSPM искать модули в папке src. Для этого откройте файл config.js и в разделе путей добавьте следующую строку кода.
[code language="javascript"]
"*": "src/*.js",
[/code]
После этой строки кода загрузчик модулей SystemJs будет искать модули в папке src. И раздел пути файла config.js должен выглядеть примерно так
[code language="javascript"]
пути: {
"*": "src/*.js",
"github:*": "jspm_packages/github/*",< br /> «npm:*»: «jspm_packages/npm/*»
},
[/code]
Далее нам нужно создать модель корневого представления. По умолчанию Aurelia ищет модели корневого представления с именем App. Итак, нам нужно создать эту модель представления приложения и связанное представление. В следующих постах мы узнаем, как переопределить это и использовать нашу собственную модель представления в качестве корневой модели представления. Но пока давайте с этим. Поэтому создайте файлы app.js и app.html в папке src. Вставьте следующий фрагмент кода в файл app.js.
[code language=”javascript”]
export class App {
конструктор() {
this.helloMessage = 'Привет, Аурелия!';
}
}
[/код]
Таким образом, этот класс App будет моделью корневого представления. У него есть свойство с именем helloMessage, которое содержит сообщение, которое мы собираемся привязать к элементу в связанном представлении. Теперь давайте добавим следующий HTML-код в представление app.html.
[code language="html"]
‹template›
‹h1›${helloMessage}‹/h1›
‹/template›
[/code]
Когда вы создаете представление в Aurelia, вам необходимо иметь HTML в этом представлении внутри элемента ‹template› в качестве корневого элемента. И внутри этого вы можете иметь свою HTML-структуру. ${helloMessage} — это синтаксис привязки, который Aurelia использует для привязки свойств своей модели представления к связанному с ней представлению. Так что это будет отображать сообщение, хранящееся в свойстве helloMessage внутри элемента ‹h1›.
Хорошо, ребята.. :D теперь у нас есть наше приложение Hello Aurelia. Пришло время запустить его и посмотреть, работает ли все это. Вы можете делать это так, как хотите, но я буду использовать пакет npm под названием http-server, чтобы быстро обслуживать файлы и тестировать эту штуку. Поэтому, если вы устанавливаете пакет http-server npm, введите эту команду в командную строку и отправьте файлы.
[code language="bash"]
http-server -a localhost -p 2222
[/code]
Это создаст простой http-сервер в вашей папке Hello Aurelia, и вы сможете получить к нему доступ по http://localhost:2222. Перейдите к этому, и вы должны увидеть Hello Aurelia на странице на мгновение :D Yay!!. :)
Если вы откроете консоль разработчика и обновите страницу, вы увидите загрузку Aurelia и некоторые строки отладки, связанные с загрузкой ресурсов Aurelia.
Чтобы продемонстрировать двухстороннюю привязку данных, давайте внесем небольшие изменения в это приложение. Давайте добавим свойство input в модель представления приложения. Добавьте следующую строку в конструктор класса App.
[code language="javascript"]
this.input = '';
[/code]
Теперь модель представления приложения должна выглядеть примерно так.
[code language=”javascript”]
export class App {
конструктор() {
this.helloMessage = 'Привет, Аурелия!';
this.input = '';< br /> }
}
[/code]
и после этого мы привяжем это к элементу ввода HTML, а также привяжем то же свойство к элементу абзаца, чтобы увидеть, что будет на выходе. Поэтому откройте представление app.html и добавьте следующее в тег ‹template› после тега ‹h1›.
[code language="html"]
‹input type="text" value.bind="input"›
${input}
[/код]
Итак, теперь файл app.html должен выглядеть примерно так.
[code language="html"]
‹template›
‹h1›${helloMessage}‹/h1›
‹input type="text" value.bind="input"›< br /> ${input}
‹/template›
[/code]
Здесь вы увидите value.bind="input" в элементе ввода. Это еще один способ привязки к свойствам в моделях представлений в Aurelia. Вы можете использовать .bind для привязки свойств из модели представления к атрибутам в элементах HTML. Затем в элементе ‹p› мы используем обычный синтаксис привязки для привязки к тому же свойству ввода, чтобы отобразить то, что вводится в текстовый ввод. Давайте попробуем это. :)
Обновите браузер (полная перезагрузка, если вы не видите изменений), и теперь вы должны увидеть поле ввода и все, что вы в него вводите, вы сможете увидеть это внизу в абзаце. :)
Итак, у вас есть небольшое простое приложение Aurelia, которое поможет вам начать создавать приложения с помощью Aurelia Framework. В следующих нескольких статьях мы рассмотрим необходимые концепции Aurelia, чтобы еще больше улучшить ваши навыки создания приложений с использованием Aurelia Framework. Так что до следующего раза. Привет :)
Исходный код можно скачать отсюда.