Начало работы с Аурелией

В VivaSoft Limited у нас есть несколько клиентов, которые хотят развивать свой проект, используя aurelia во внешнем интерфейсе. Так недавно я научил Аурелию работать с Клиентом. Это похоже на Angular и VueJS. Здесь я постараюсь показать вам, как начать проект с aurelia и его базовую структуру.

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

Прежде чем изучать его, вы должны знать JS, поскольку это JS-фреймворк, и вы должны знать современный синтаксис ES (ES6). Вы должны очень хорошо знать HTML и CSS, поскольку он имеет дело с веб-интерфейсом.

На вашем компьютере должен быть установлен NodeJS, поскольку Aurelia использует NPM в качестве диспетчера зависимостей. NPM будет установлен вместе с NodeJS.

После установки NodeJS выполните следующую команду в терминале cmd / bash, чтобы установить инструмент Aurelia CLI. Используя Aurelia CLI, мы можем создать базовый проект со всем необходимым для разработки проекта с Aurelia.

  npm install -g aurelia-cli

Чтобы создать проект, перейдите в папку, в которой вы хотите создать свой проект, и запустите команду au new` в вашем терминале. Дайте название вашему проекту и введите, после чего появится пара опций, выберите Default Setup. Когда он запрашивает хотите ли вы установить зависимости вашего нового проекта, выберите Да, чтобы установить зависимости. Подождите несколько секунд, пока этот процесс не завершится. После успешного создания перейдите в папку проекта и запустите `npm start`. он запустит проект, и вы увидите Hello World! Страница по адресу http: // localhost: 8080 / в вашем браузере.

Теперь откройте папку проекта в редакторе кода (я предпочитаю VS Code для разработки JS). Если вы видите структуру папок проекта, вы увидите папку src, в основном все наши коды будут там. Там вы увидите файлы app.js и app.html, которые рендерит Hello World! Страница. В Aurelia на каждой странице будет 2 файла: один будет файлом .js, а другой - файлом .html с тем же именем. Файл HTML будет содержать код html и css, связанный с этой страницей, который будет использоваться для стилизации и макета пользовательского интерфейса, а js будет содержать класс со свойствами и методами, которые будут использоваться для обработки событий и отображения динамического содержимого на основе свойств. JS-файл называется View Model, а HTML-файл - View.

В файле просмотра будет тег ‹template›, в основном весь ваш HTML-код будет заключен в этот тег. Чтобы отобразить значение свойства JS в представлении, используйте $ {PROPERTY_NAME}. В нашем сгенерированном проекте вы увидите $ {message}. Свойство сообщения - это свойство, определенное в нашем классе приложения (модель представления), и значение этого свойства будет отображаться в браузере. Здесь мы можем использовать любое js-выражение. $ {ANY_EXPRESSION}

Я попытаюсь показать вам некоторые базовые вещи в Aurelia, такие как привязка данных и обработка событий, с помощью приложения TODO. Сейчас я буду использовать app.js и app.html. Я создал 3 свойства и 2 метода. Вот код для нашего класса приложения ниже.

export class App {
  constructor() {
   this.heading = ‘Todos’;
   this.tasks = [];
   this.description = ‘’;
  }
  addTask() {
   if (this.description) {
    this.tasks.push({
     description: this.description,
     done: false
    });
    this.description = ‘’;
   }
  }
  removeTask(task) {
   let index = this.tasks.indexOf(task);
   if (index !== -1) {
    this.task.splice(index, 1);
   }
  }
}

Вы можете видеть, что первый метод добавит новую задачу в наше свойство задач, а второй удалит задачу, которую пользователь хочет удалить. Чтобы зафиксировать, какие значения пользовательские типы для описания мы будем использовать свойство description. Свойство заголовка будет использоваться для отображения текста заголовка.

Наш файл просмотра будет выглядеть так.

<template>
  <h1>${heading}</h1>
  <form submit.trigger=”addTask()”>
   <input type=”text” value.bind=”description”>
   <button type=”submit” disabled.bind=”!description”>
     Add   Task
   </button>
  </form>
</template>

Я использую тег h1, чтобы показать заголовок. Я создал форму для ввода данных от пользователя. Вы можете видеть, что входной тег имеет свойство value.bind, а значение - description. По сути, именно так мы сообщаем aurelia, что свойство description будет использоваться для хранения значения от пользователя. Это называется двухсторонней привязкой данных, потому что если мы изменим описание из файла js, оно отобразит это значение, и если пользователь изменит ввод из браузера, значение также будет изменено. Для кнопки disabled.bind будет включать / отключать эту кнопку в зависимости от свойства description. В теге формы submit.trigger связан с методом addTask. Когда пользователь отправляет эту форму, будет вызван метод addTask. В aurelia есть много типов свойств html, посмотрите их документацию (https://aurelia.io/), чтобы узнать обо всех доступных свойствах и их поведении.

Теперь нам нужно отобразить список задач в теге ul. Мы будем перебирать массив задач, используя repeat.for. Это повторит тег li и отобразит значения одной задачи. См. Код ниже.

<template>
  <h1>${heading}</h1>
  <form submit.trigger=”addTask()”>
   <input type=”text” value.bind=”description”>
   <button type=”submit” disabled.bind=”!description”>
     Add Task
   </button>
  </form>
  <ul>
    <li repeat.for=”task of tasks”>
      <input type=”checkbox” checked.bind=”task.done”>
      <span css=”text-decoration: ${task.done ? ‘line-through’ : ‘none’}”>
        ${task.description}
      </span>
      <button click.trigger=”removeTask(task)”>Remove</button>
    </li>
  </ul>
</template>

click.trigger используется для обработки события щелчка, а checked.bind - ставит / снимает флажок в зависимости от свойства done задачи. Если вы запустите этот проект, в браузере отобразится форма. Если пользователь отправит форму после того, как что-то напишет в текстовое поле, будет создана новая задача, которая будет отображаться в списке. Пользователь может удалить задачу, нажав кнопку удаления. Пользователь может отметить / снять отметку с конкретной задачи.

Я постараюсь показать вам, как использовать настраиваемый элемент (компоненты), маршрутизатор Aurelia, агрегатор событий в следующих статьях.