Angular застосунок своїми руками за 2 години

У статті ми реалізуємо функціональність найпростішого чат-бота. Звичайно, у результаті отримаємо навчальний варіант, а не версію для релізу.

Застосунок складатиметься з двох сторінок: головної та, безпосередньо, чату. Наприкінці статті ви знайдете посилання на детальну інструкцію та фрагменти коду, використовуючи які, матимете змогу самостійно написати та запустити подібний застосунок.

Мета матеріалу — продемонструвати, що у стислий термін (максимум 2 години) цілком можливо створити справний застосунок на Angular.

Ми розглянемо:

• як створити новий застосунок, використовуючи лише три команди;
• ознайомимось з роботою angular-cli;
• модулі (modules);
• компоненти (components);
• сервіси (services);
• шаблони (templates);
• структурні директиви (structural directives);
• роутер (router);
• трохи RxJS.

Що таке Angular і чим він кращий за jQuery?

Angular — JavaScript фреймворк для фронтенд розробників від Google. Більшість з вас, мабуть, вже знають різницю між фреймворком та бібліотекою.

Бібліотека зазвичай спеціалізується на вузькій чи конкретній задачі. jQuery наприклад, спеціалізується на роботі з DOM-деревом, створює запити на backend тощо. Але бібліотека не передбачає створення архітектурної системи в цілому. Фреймворк, натомість, призначений для того, щоб побудувати архітектуру усього застосунку.

Трохи про версії

Перша версія Angular, яку сьогодні заведено називати Angular JS, була багато у чому не оптимальною. Однак величезна кількість проектів і досі використовують цю версію. Згодом команда розробників фактично з нуля переписала проект. Нова версія отримала назву Angular 2 чи просто Angular без індексу. Вона кардинально відрізнялась від першої, справляючи враження зовсім іншого фреймворку. Проекти не могли з легкістю мігрувати зі старої версії на нову, тому це зумовило певні проблеми. Необхідно було переписати усе повторно.

Angular став концептуально простішим, більш технологічним та зрозумілішим. Після Angular 2 вийшли версії 4, 5, а зовсім нещодавно — 7 версія. Варто помітити, що ніяких кардинальних змін з виходом версії 2 більше не відбувається. Усі версії, з другої до сьомої, повністю сумісні. Тож тепер нема потреби освоювати усе заново.

У статті описано алгоритм створення застосунку з використанням Angular 6.

В основному, Angular призначений для створення комплексних enterprise-застосунків, а саме односторінкових веб застосунків (Single Page Application).

Всередині фреймворку реалізовано:

• модульність;
• анімації;
• маршрутизація;
• робота з бекендом;
• зберігання/обробка/відображення даних;
• робота з формами та шаблонами тощо.

У чому сенс SPA та його застосування

Single Page Application (SPA чи односторінковий застосунок) реалізує зручні для користувача сервіси, що наповнені інтерактивом. Найпростішим прикладом є Gmail.

SPA — веб-застосунок, розташований на одній фізичній HTML сторінці. Така сторінка одноразово завантажує усі необхідні ресурси (JavaScript, CSS, images тощо.) і більше не перезавантажується. Переходи за посиланнями не призводять до реального перезавантаження сторінки, а її вміст змінюється «на льоту», тобто динамічно. За необхідністю виконується запит на сервер для отримання даних, і після їх отримання формується контент «нової» сторінки. Кожна окрема віртуальна сторінка прописується у маршрутизаторі (router). У нашому застосунку існує два маршрути: головна та чат.

Angular — один з фреймворків, що дозволяє реалізовувати описані Single Page Application.

Можливо, вас цікавить які саме ресурси реалізовано на Angular? На сайті «Made with Angular» знайдете список, в якому вказано сайти, створені за допомогою різних версій фреймворку.

Загальний огляд архітектури Angular

Перш за все, варто зазначити, що Angular застосунки пишуться на TypeScript, а не на чистому JavaScript. Версія синтаксису для JavaScript не отримала широкого розповсюдження, тому на даний момент у документації усі синтаксичні конструкції описані з використанням синтаксису TypeScript.

Коротко оглянемо основні пункти. Архітектура Angular складається з:

• Module;
• Component;
• Template;
• Service;
• Router;
• Pipe;
• Directives.

Модулі (Module) — структурні одиниці застосунку, які інкапсулюють певну логіку. В Angular це структури, які зберігають певні компоненти, директиви та сервіси, об'єднані певною логікою. Прикладом може слугувати профіль користувача, модуль для написання листа, огляд списку листів тощо.

Компоненти (Component) — typescript клас, який зберігає дані та логіку відображення цих даних у шаблоні (представленні). Шаблон тісно пов'язаний з компонентом. Дані з компонента можна з легкістю відображати у шаблоні, використовуючи спеціальний синтаксис. Компонент також може «знімати» дані з шаблона та отримувати їх безпосередньо у скрипті.

Шаблон (Template) — фрагмент html-коду з додаванням спеціального синтаксису. Він дозволяє впроваджувати в шаблон дані з компонента без використання innerHTML та подібних методів. Шаблон прописується у компоненті та є частиною його конфігурації.

Сервіс (Service) в Angular являє собою typescript класи, які виконують задачі, пов'язані з отриманням, зберіганням та обробкою даних. Наприклад, логування, перетворення даних для подальшої передачі у компонент, звернення до backend та ін. На відміну від компонентів та директив сервіси не працюють з представленнями (шаблонами) напряму.

Задачі сервісів:

• Надання даних застосунку. Сервіс сам може зберігати дані у пам'яті або, з метою отримання даних, звертатися до якогось джерела даних, наприклад, до сервера;
• Сервіс може організувати канал взаємодії між окремими компонентами застосунку;
• Сервіс може інкапсулювати бізнес-логіку, різноманітні обчислювальні задачі, задачі з логування, які краще виносити поза компоненти. Таким чином, код компонентів буде зосереджений, безпосередньо, на роботі з представленням. До того ж, можемо розв'язати проблему повторення коду, якщо нам знадобиться виконати одну й ту саму задачу у різних компонентах і класах.

Роутер (Router)— маршрутизатор, який призначений для переходу між екранами з метою відображення різного контенту.

Іншими словами, коли в адресному рядку браузера у вас змінюється фрагмент URL, маршрутизатор відстежує ці зміни та завантажує ту або іншу частину застосунку.

Завершимо теоретичну частину та перейдемо до написання коду.

Директиви та Пайпи — більш специфічні конструкції, які простіше продемонструвати у коді, ніж описати словами.

Ознайомитись повністю з архітектурою Angular у рамках однієї статті неможливо. Аби дізнатися більше, ви можете переглянути повну версію вебінару у нас на сторінці чи зареєструватися на повний курс «Angular трансформація».

Фрагменти коду можна знайти тут.

Використання Angular CLI для запуску нового проекту-заготовки

Перейдемо до першої частини інструкції. Для того, щоб почати, створимо теку project (або будь-яка інша назва). У ній і почнемо роботу над проектом.

По-перше, необхідно за допомогою консолі виконати у створеній теці команду npm install –g @angular/cli.

Angular CLI (Common Line Interface) — спеціальна утиліта, що дозволяє швидко та легко створювати структури для нового проекту Angular. Більше інформації щодо Angular CLI можна знайти на офіційному ресурсі.

Далі, необхідно створити новий проект за допомогою наступної команди в консолі: ng new jsexpert-chat-bot –routing.

Розшифруємо команду. Ng — скорочена назва самого Angular CLI, new — створення нового проекту, jsexpert-chat-bot — назва проекту (можна змінити на будь-яку іншу), –routing — спеціальний прапор, що дозволяє одразу створити модуль роутингу (маршрутизатора). Таким чином, немає потреби створювати роутинг окремо, до того ж у нас одразу буде той фрагмент коду, який дозволить додати навігацію та переходити між різними станами.

Після встановлення, у створеній теці побачимо наступну структуру:

Розглянемо деякі з наявних файлів.

Файл tslint.json — конфігураційний файл для статичного аналізатора синтаксису TypeScript. Файл tsconfig.json — конфігураційний файл компілятора TypeScript. Окрім усього іншого, в ньому зазначено версію, в яку буде перетворено код TypeScript при виконанні збірки проекту. Файл package.json зберігає всі NPM пакети, необхідні для проекту. Ці пакети буде завантажено до теки node_modules. Під час створення нового проекту усі необхідні модулі буде завантажено до теки node_modules автоматично завдяки Angular CLI. Тека е2е призначена для тестування (у статті не оглядається). І нарешті, у теці src знаходяться файли, що нас цікавлять:

Завантаження застосунку починається з файлу main.ts. Оскільки ми скористалися генератором Angular CLI, у файлі міститься написаний код. Розглянемо його. У перших рядках файлу вказані import. З їх допомогою ви підключаєте необхідні вам файли можете використати код, який у них розташований.

На 11 та 12 рядках вказана функція, яка безпосередньо запускає ваш застосунок:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Серед файлів у вказаній теці також є index.html. Там знаходиться спеціальний тег <app-root> </app-root>, в якому буде відображатися все, що генерує наш фреймворк.

У теці src знаходиться тека assets, яка поки що пуста. Тека призначена для зберігання картинок, статичних файлів тощо.

Нас цікавить тека app, де зосереджено програмний код застосунку.

Файл app.module.ts — кореневий модуль нашого застосунку. Виглядає так:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

У ньому, за допомогою імпортів, приєднано необхідні функціональні елементи. За допомогою декоратора @NgModule, ми оголошуємо кореневий модуль.

Декоратор — синтаксична конструкція TypeScript. Дозволяє здійснити конфігурацію класу, записаного одразу після декоратора. За допомогою декораторів Angular здійснюється конфігурація не лише модулів, а й компонентів, сервісів тощо.

У декораторі модуля є такі ключові елементи: declarations (вказано компоненти, які входять у даний модуль); imports (підключення сторонніх модулів); providers (вказані сервіси, які входять у даний модуль);

• bootstrap (головний компонент застосунку, з якого він починається).

Наш перший компонент має назву app.component.ts. Поки що цей файл пустий та виглядає наступним чином:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

У ньому є лише декоратор та клас самого компоненту. Декоратор вміщує в себе:

• selector — HTML селектор, який влаштовується в шаблон. На його місці буде визначено сам компонент. Вище згадувалось, що ми впровадили в index.html селектор <app-root> </app-root>. Саме замість цього селектора і буде впроваджено компонент AppComponent;
• templateUrl — шаблон, який належить цьому компоненту;
• styleUrl — таблиця стилів, що належить даному компоненту.

У теці розташований також роутинг модуль, app-routing.module.ts, в якому ми вказуватимемо які маршрути є у застосунку та яким чином ними слідувати.

Згідно з наступним пунктом інструкції, необхідно перейти у створену теку: cd jsexpert-chat-bot. Запускаємо в ній сервер командою в консолі: ng serve. Таким чином, запущено процес збірки, який виконується webpack, влаштованим в Angular CLI. Результатом збірки буде проект, запущений за адресою localhost:4200.

Перейшовши за вказаною адресою, ми побачимо у браузері проект Angular за замовчуванням.

Отже, ми переглянули як виглядає та функціонує наш пустий проект. Звернемося до наступного пункту нашої інструкції та зупинимо проект. Для цього в активній консолі натиснемо комбінацію клавіш ctrl+c.

Покроковий алгоритм написання застосунку

Перейдемо до створення структури в нашому основному проекті.

По-перше, необхідно створити новий модуль. Для цього в консолі виконуємо команду ng generate module angular-bot --spec=false. Прапор --spec=false означає, що ми не будемо створювати структури задля тестування, так звані spec-файли. Після виконання команди у теці app створюється нова тека з назвою angular-bot, а всередині цієї теки буде автоматично створено файл angular-bot.module.ts.

Оглянемо його вміст:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AngularBotModule { }

Тепер створимо два основних компоненти, main та chat, за допомогою наступних команд у консолі:

ng generate component angular-bot/main --spec=false
ng generate component angular-bot/chat --spec=false

Як наслідок, кожен з компонентів буде відповідати своєму маршруту. Тобто при переході на url буде завантажуватись MainComponent, а при переході на url — ChatComponent.

Зверніть увагу на дерево проекту. Після виконання команд у теці angular-bot з'явилось дві підтеки: chat та main. Там і створено відповідні компоненти.

Продовжимо роботу.

Приєднаємо AngularBotModule модуль в AppModule (у файлі app.module.ts). Для цього в imports допишемо новий AngularBotModule:

import { AngularBotModule } from './angular-bot/angular-bot.module';
imports: [
  BrowserModule,
  AppRoutingModule,
  AngularBotModule
]

Далі, додамо в index.html необхідні стилі:

<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

Додамо логіку в app.component.ts.Відкрийте файл app.component.ts та до класу AppComponent додайте:

links = [
  { path: '/main', label: 'Головна', active: 'button-active'},
  { path: '/chat', label: 'Чат', active: 'button-active'}
];

Ми додали масив links, який складається з двох об'єктів, кожен з яких містить path, label та active. Дані масиву знадобляться нам далі для побудови меню навігації.

Додамо необхідні стилі у файл app.component.css:

n-right: 20px
}
.button-active {
  background-color: #9b4dca;
  color: white;
}
 
.button-active:hover,
.button-active:focus {
  background-color: #9b4dca;
  border-color: #9b4dca;
  color: #fff;
}

.top-bar {
  margin: 25px 0;
}

Рухаємось далі! Тепер ми можемо додати трохи розмітки в app.component.html. Для цього перейдемо до файлу app.component.html та видаляємо його вміст. Замість старого коду додаємо:

<div class="row top-bar">
  <div class="column column-25"></div>
  <div class="column column-50">
    <button class="button button-outline" 
		*ngFor="let topLink of links" 
		[routerLink]="topLink.path" 
		[routerLinkActive]="topLink.active">{{topLink.label}} </button>
  </div>
</div>
<div class="row">
  <div class="column"></div>
    <div class="column column-50">
      <router-outlet></router-outlet>
    </div>
<div class="column"></div>
</div>

Першою важливою частиною цього фрагменту є додавання навігації у вигляді кнопок. У кнопці використовуємо нову конструкцію — структурну директиву *ngFor.

Структурна директива — функціональна частина Angular, що дозволяє змінювати DOM-структуру за певними правилами, а саме: додавати чи видаляти елементи. Повністю розібратися з синтаксисом директив у межах однієї статті досить складно. Якщо вам необхідно вивчити як працює цей механізм Angular, ви можете досягти цього, приєднавшись до повного курсу «Angular трансформація». Наразі дамо коротке визначення.

*ngFor працює на зразок циклу. Всередині прописано масив links з компоненту AppComponent. На кожній ітерації циклу ngFor ми почергово присвоюємо змінній topLink наступне значення з масиву links. Таким чином, відбувається ітерація масивом links одразу в шаблоні. Фактично, у відображеному фрагменті HTML коду побачимо стільки елементів <button>, скільки в нас елементів масиву links.

Всередині кнопки використовується конструкція {{topLink.label}}. З кожною ітерацією цю конструкцію буде замінено на реальні значення з ключа label в об'єкті topLink.

В Angular існують допоміжні директиви routerLink та routerLinkActive, які дозволяють досить легко організувати навігацію маршрутами всередині застосунку. До директиви routerLink у якості параметру передається шлях до маршруту, який необхідно буде відкрити при кліку на відповідну кнопку чи посилання. У нашому випадку це «/main» або «/chat». RouterLinkActive використовується для того, щоб присвоїти певний css клас активному у даний момент маршруту. У нашому випадку клас 'button-active' буде встановлено на кнопку, яка містить посилання на активний маршрут.

Іншою важливою частиною цього фрагменту є тег <router-outlet> </router-outlet>. Саме нижче нього буде підставлено HTML-код того компоненту, який активується на поточному маршруті. Алгоритм наступний: активується певний маршрут, який ініціалізує компонент, прописаний в конфігурації маршрутизатора. У свою чергу, компонент вставляє свій HTML-код нижче директиви <router-outlet> </router-outlet>. Таким чином, ця директива працює як маркер і вказує на місце, куди буде динамічно завантажуватись згенерований зміст.

Додамо налаштування маршрутів до app-routing.module.ts. Для цього переходимо до файлу app-routing.module.ts та створимо константу routes. Результат повинен виглядати наступним чином:

const routes: Routes = [
  { path: "", pathMatch: "full", redirectTo: "main" },
  { path: "main", component: MainComponent },
  { path: "chat", component: ChatComponent}
];

В routes прописана конфігурація маршрутизатора: спосіб пересування маршрутами. Конфігурація створюється таким чином: у path вказано фрагмент шляху з адресного рядка браузера, а в component, який компонент необхідно активувати при переході за даним url. Наприклад, якщо ми перейдемо за адресою http://portal.com/main, буде активовано MainComponent.

Зверніть увагу на початок, де для path вказано пустий рядок. По суті реалізовується redirect механізм. Якщо ви перейдете на головну сторінку сайту, ви автоматично потрапите на маршрут main. Тобто при переході на http://portal.com/ фактично відкриється http://portal.com/main.

Можемо запустити проект та побачити, що вийшло. З цією метою переходимо в консоль та викликаємо команду ng serve. Якщо перейти назад до браузера та оновити сторінку застосунку, побачимо зміни. Тепер з'явилось дві кнопки: «Головна» та «Чат». При натисканні на будь-яку з цих кнопок на сторінці змінюється текст: «main works!» та «chat works!» відповідно. Також значення змінюється у рядку url.

Перейдемо до реалізації логіки чату. Додамо в main/component.html трохи розмітки. Для цього перейдемо до компонента, видалимо текст за замовчуванням та додамо наступне:

<h2>Вас вітає застосунок Angular Bot</h2><br>
<h3>Перейдіть до пункту меню чат для початку спілкування</h3>

Далі необхідно створити сервіс chat.service.ts. Для його створення в консолі необхідно спочатку зупинити наш застосунок, а потім виконати рядок:

ng generate service angular-bot/chat --spec=false

Після виконання команди всередині модуля angular-bot буде створено chat.service.ts. Варто звернути увагу, що сервіси в Angular фактично завжди Singleton. Тобто сервіс — екземпляр класу, який створюється один раз у нашому застосунку. Далі існує можливість «підключати» його до різноманітних компонентів та отримувати усюди доступ до одного й того ж екземпляру об'єкта. У фреймворк вбудовано механізм dependency injection, який дозволяє реалізовувати такі «впровадження» досить легко.

Тепер необхідно приєднати chat.service.ts до angular-bot.module.ts. Для цього перейдемо до файлу angular-bot.module.ts та в providers внесемо наступне:

providers: [ChatService]

В останніх версіях Angular це робити не обов'язково, тому, якщо ви оминете цей пункт, ваш застосунок все одно буде працювати.

Ми створили та приєднали chat.service. Тепер реалізуємо його функціонал. Скопіюємо наступний код всередину сервісу:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
 
export class Message {
  constructor(public author: string, public content: string) {}
}
 
@Injectable() export class ChatService {
  constructor() {}
  conversation = new Subject<Message[]>();
  messageMap = {
    "Привіт": "Вітаю вас",
    "Хто Ви?": "Я Ангулар бот, що б ви хотіли дізнатись?",
    "Коли очікувати наступний курс?": "Наступний курс починається 22 травня, приходьте",
    "Дякую": "Прошу, завжди радий допомогти",
    "Hi": "Hello",
    "Who are you": "My name is Agular Bot",
    "What is Angular": "Angular is the best framework ever",
    "default": "I can't understand. Can you please repeat"
  }
  getBotAnswer(msg: string) {
    const userMessage = new Message('user', msg);
    this.conversation.next([userMessage]);
    const botMessage = new Message('bot', this.getBotMessage(msg));
    setTimeout(()=>{
      this.conversation.next([botMessage]);
      }, 1500);
  }
  getBotMessage(question: string){
    let answer = this.messageMap[question];
    return answer || this.messageMap['default'];
  }
}

Ми створили клас Message, який пізніше буде використовуватись у СhatСomponent і в ChatService. Всередині сервісу ChatService реалізували два методи — getBotMessage та getBotAnswer.

Розглянемо метод getBotMessage. У ньому відбувається пошук відповіді. Якщо відповідь знайдено, вона повертається. В іншому випадку повертається стандартне повідомлення. По суті ми лише звертаємось до об'єкта за ключем та повертаємо знайдене значення.

Розглянемо метод getBotAnswer. У ньому відбувається наступне: створюємо новий екземпляр Messagе з даних, вказаних користувачем. Додаємо їх до потоку this.conversation, використовуючи метод next(). На потік ми підписані у компоненті. Таким чином, після виклику next() компонент одразу отримає дані та зможе відобразити їх у необхідній формі. У нашому випадку текст, який ввів користувач у текстове поле буде відображено в історії листування.

Потім створюємо екземпляр класу Message, який міститиме відповідь від чат-боту. Для отримання відповіді викликаємо метод getBotMessage().

Далі, через деякий час, додаємо об'єкт з відповіддю до потоку this.conversation. Відповідно, компонент, який підписаний на цей потік, зможе негайно відобразити відповідь від чат-бота у листуванні.

Для затримання відповіді від чат-бота використовуємо setTimeout. Затримка необхідна для створення у користувача відчуття, що він спілкується з людиною, а не автоматом.

Також додаємо стилів до chat.component.css:

.message {
  border-radius: 50px;
  margin: 0 15px 20px;
  padding: 10px 20px;
  position: relative;
  font-size: 20px;
}
 
.message.to {
  background-color: #2095FE;
  color: #fff;
  margin-left: 100px;
  text-align: right;
}
.message.from {
  background-color: #E5E4E9;
  color: #363636;
  margin-right: 100px;
}
 
.message.to + .message.to,
.message.from + .message.from {
  margin-top: -10px;
}

Далі додамо логіку до chat.component.ts. З цією метою перейдемо до файлу chat.component.ts та у класі ChatComponent пропишемо наступний код:

messages: Message[] = [];
value: string;
constructor(public chatService: ChatService) { }
 
ngOnInit() {
  this.chatService.conversation.subscribe((val) => {
    this.messages = this.messages.concat(val);
  });
}
 
sendMessage() {
  this.chatService.getBotAnswer(this.value);
  this.value = '';
}

Не забудьте імпортувати ChatService та Message.

У методі ngOnInit, який запускається автоматично під час ініціалізації компонента, саме і відбувається підписка на потік conversation з сервісу (про це було сказано вище). Кожне нове значення додається до масиву this.messages, а потім відображається у шаблоні компоненту.

sendMessage() запускається за кліком на «відправити». Значення з поля вводу відправляється до сервісу, а потім обнуляється.

Після реалізації логіки, додамо трохи розмітки до chat.component.html:

<h1>JSExpert Angular Chat Bot</h1>
 
<ng-container *ngFor="let message of messages">
  <div class="message" 
     [ngClass]="{ 'from': message.author === 'bot',
		'to': message.author === 'user' }">
       {{ message.content }}
  </div>
</ng-container>
 
<label *ngIf="messages.length == 0; else dialogInfo" for="nameField">Ваше повідомлення</label>
 
<input [(ngModel)]="value" (keyup.enter)="sendMessage()" type="text">
<button (click)="sendMessage()">Надіслати</button>
 
<ng-template #dialogInfo>
  <span [className]="'float-right'">Усього повідомлень: {{messages.length}}</span>
</ng-template>

Коротко розглянемо, що відбувається у шаблоні. Завдяки структурній директиві *ngFor відображається список усіх елементів масиву messages. Як уже розглядалося, згадана директива нагадує цикл. З кожною ітерацією додається новий div, який вміщує текст повідомлення. Текст виводиться завдяки конструкції {{ message.content }}.

Директива ngClass дозволяє встановити певний css клас в залежності від автора повідомлення — бота чи користувача.

Значення з input-поля, завдяки директиві [(ngModel)], автоматично переноситься до поля класу value. Цей механізм працює і у зворотному напрямку. Якщо призначити полю класу value значення, воно автоматично відобразиться у шаблоні в полі вводу. Такий механізм має назву двобічне зв'язування (two way data binding).

З кліком на кнопку «Відправити», а також при натисканні на Enter у полі вводу, буде викликано метод sendMessage(), який викличе метод сервісу та передасть до нього рядок, введений користувачем.

Більш детально робота з шаблоном розглядалася на вебінарі «Як створити свій Angular застосунок за дві години», який можна знайти за посиланням.

Наостанок виконаємо імпорт FormsModule в AngularBotModule. У нашому шаблоні ми використовуємо конструкцію ngModel, яка доступна лише у спеціальному пакеті FormsModule. Тому в AngularBotModule необхідно додати FormsModule:

import { FormsModule } from '@angular/forms';
 
imports: [
  CommonModule,
  FormsModule
]

Залишилось лише перейти у консоль та запустити застосунок! Вітаю, ви створили ваш перший Angular застосунок з чат-ботом за дві години!