Angular – це платформа та фреймворк для створення односторінкових клієнтських програм з використанням HTML та TypeScript. Angular написаний мовою TypeScript.
Він реалізує основні та додаткові функції у вигляді набору бібліотек TypeScript, які ви імпортуєте до своїх програм.
Архітектура Angular спирається на певні фундаментальні концепції. Основними будівельними блоками фреймворку Angular є компоненти Angular, які організовані в NgModules.
NgModules збирають пов'язаний код у функціональні набори; Додаток Angular визначається набором NgModules.
Програма завжди має як мінімум кореневий модуль, який забезпечує завантаження, і зазвичай має багато інших функціональних модулів.
Компоненти визначають види, які являють собою набори елементів екрана, які Angular може вибирати та змінювати відповідно до логіки та даних вашої програми.
Компоненти використовують сервісиякі забезпечують специфічну функціональність, не пов'язану безпосередньо з уявленнями. Постачальники послуг можуть бути інжектовані в компоненти як залежностей, що робить ваш код модульним, багаторазово використовуваним та ефективним.
Модулі, компоненти та сервіси – це класи, які використовують декоратори. Ці декоратори позначають їх тип і надають метадані, які вказують Angular як їх використовувати.
Метадані класу компонента пов'язують його з шаблоном, Що визначає подання. Шаблон поєднує звичайний HTML з Angular директивами і сполучною розміткою, які дозволяють Angular змінювати HTML перед відображенням на екрані.
Метадані класу сервісу містять інформацію, необхідну Angular для того, щоб зробити його доступним для компонентів через ін'єкцію залежності (DI).
Компоненти програми зазвичай визначають безліч уявлень, розташованих ієрархічно. Angular надає сервіс Router, щоб допомогти вам визначити шляхи навігації між уявленнями.
Маршрутизатор забезпечує складні можливості навігації у браузері.
Дивіться Angular Glossary для основних визначень важливих термінів Angular та їх використання.
Приклад програми, описаної на цій сторінці, див.
Модулі¶
Модулі Angular NgModules відрізняються від модулів JavaScript (ES2015) та доповнюють їх. NgModule повідомляє контекст компіляції для набору компонентів, призначених для домену програми, робочого процесу або тісно пов'язаного набору можливостей.
NgModule може зв'язувати свої компоненти з суміжним кодом, таким як послуги, для формування функціональних одиниць.
Кожна програма Angular має кореневий модуль, умовно званий AppModule , який забезпечує механізм завантаження, що запускає програму. Програма зазвичай містить безліч функціональних модулів.
Як і модулі JavaScript, NgModules можуть імпортувати функціональність з інших NgModules, а також дозволяють експортувати свою власну функціональність та використовувати її іншими NgModules. Наприклад, щоб використовувати сервіс маршрутизатора у вашій програмі, ви імпортуєте NgModule Router .
Організація коду в окремі функціональні модулі допомагає керувати розробкою складних програм та проектувати їх повторне використання. Крім того, ця техніка дозволяє використовувати переваги lazy-loading — тобто завантаження модулів на вимогу — мінімізувати обсяг коду, який необхідно завантажити при запуску.
Для більш детального обговорення дивіться Введення у модулі.
Компоненти¶
У кожному додатку Angular є як мінімум один компонент, кореневий компонентщо пов'язує ієрархію компонентів з об'єктною моделлю документа сторінки (DOM). Кожен компонент визначає клас, що містить дані та логіку програми, і пов'язаний з HTML шаблоном, Що визначає подання, яке відображатиметься в цільовому середовищі.
Декоратор @Component() ідентифікує клас, розташований безпосередньо під ним, як компонент, та надає шаблон і пов'язані з ним метадані, специфічні для компонента.
Декоратори – це функції, які змінюють класи JavaScript. Angular визначає ряд декораторів, які прикріплюють певні види метаданих до класів, щоб система знала, що ці класи означають та як вони мають працювати.
Шаблони, директиви та прив'язка даних¶
Шаблон об'єднує HTML з розміткою Angular, яка може змінювати елементи HTML перед відображенням. Шаблонні директиви забезпечують програмну логіку, а зв'язуюча розмітка з'єднує дані вашої програми та DOM.
Існує два типи прив'язки даних:
Зв'язування даних
Подробиці
Прив'язка до подій
Дозволяє вашій програмі реагувати на введення користувача в цільове середовище шляхом оновлення даних програми.
Прив'язка до властивостей
Дозволяє інтерполювати значення, обчислені з даних програми, HTML.
Перед відображенням представлення Angular оцінює директиви та дозволяє синтаксис прив'язки у шаблоні, щоб змінити елементи HTML та DOM відповідно до даних та логіки вашої програми. Angular підтримує двостороннє зв'язування даних, що означає, що зміни в DOM, такі як вибір користувача, також відображаються у даних вашої програми.
Ваші шаблони можуть використовувати пайпи для покращення користувальницького досвіду шляхом перетворення значень для відображення. Наприклад, використовуйте пайпи для відображення дат та валютних значень, які відповідають локалі користувача.
Angular надає певні пайпи для загальних перетворень, і ви також можете визначити свої власні пайпи.
Для більш детального обговорення цих понять дивіться Вступ до компонентів.
Сервіси та ін'єкція залежностей¶
Для даних або логіки, які не пов'язані з конкретним поданням і які ви хочете використовувати спільно з іншими компонентами, ви створюєте клас сервіс. Визначення класу сервісу безпосередньо передує декоратор @Injectable().
Декоратор надає метадані, які дозволяють іншим провайдерам бути інжектованими у ваш клас як залежність.
Ін'єкція залежностей (DI) дозволяє вам зберегти ваші класи компонентів компактними та ефективними. Вони не отримують дані з сервера, не перевіряють введення користувача і не ведуть прямий журнал в консоль; вони делегують ці завдання сервісам.
Для більш детального обговорення дивіться Вступ до сервісів та DI.
Маршрутизація¶
Ng-модуль Angular Router надає сервіс, який дозволяє визначити шлях навігації між різними станами програми та ієрархіями уявлень у вашому додатку. Він створений на зразок звичних навігаційних угод браузера:
Введіть URL-адресу в адресний рядок, і браузер перейде на відповідну сторінку.
Клацніть на посилання на сторінці, і браузер перейде на нову сторінку.
Натисніть на кнопки браузера "назад" та "вперед", і браузер перейде назад і вперед з історії переглянутих сторінок.
Маршрутизатор зіставляє URL-подібні шляхи з уявленнями, а не зі сторінками. Коли користувач виконує дію, наприклад, натискає на посилання, яке завантажує нову сторінку у браузері, маршрутизатор перехоплює поведінку браузера та показує чи приховує ієрархії уявлень.
Якщо маршрутизатор визначає, що поточний стан програми вимагає певної функціональності, а модуль, що її визначає, не був завантажений, маршрутизатор може ліниво завантажити модуль на вимогу.
Маршрутизатор інтерпретує URL посилання відповідно до правил навігації за уявленнями та станом даних вашої програми. Ви можете переходити до нових уявлень, коли користувач натискає кнопку або вибирає зі списку, або у відповідь на інший стимул з будь-якого джерела.
Маршрутизатор реєструє дії в історії браузера, тому кнопки "назад" та "вперед" також працюють.
Щоб визначити правила навігації, ви пов'язуєте навігаційні шляхи із вашими компонентами. Шлях використовує URL-подібний синтаксис, який поєднує дані вашої програми, так само, як синтаксис шаблону поєднує ваші уявлення з даними вашої програми. Потім ви можете застосувати програмну логіку, щоб вибрати, які уявлення показувати або приховувати, у відповідь на введення користувача та ваші власні правила доступу.
Докладніше обговорення див. у розділі Маршрутизація та навігація.
Що далі
Ви дізналися основи основних будівельних блоків Angular. Наступна діаграма показує, як ці основні частини пов'язані між собою.
Водночас компонент та шаблон визначають уявлення Angular.
Декоратор класу компонента додає метадані, включаючи покажчик на пов'язаний шаблон.
Директиви та розмітка прив'язки у шаблоні компонента змінюють уявлення на основі даних та логіки програми.
Кожна з цих тем представлена докладніше на наступних сторінках.
Коли ви знайомі з цими фундаментальними будівельними блоками, ви можете вивчити їх докладніше в документації. Щоб дізнатися про інші інструменти та методи, які допоможуть вам створювати та розгортати програми Angular, див. наступні кроки: інструменти та методи.
Посилання¶
Що таке Angular?
Ця тема допоможе вам зрозуміти Angular: що таке Angular, які переваги він дає і чого можна очікувати, коли ви почнете створювати свої програми.
Angular це платформа розробки, побудована на TypeScript. Як платформа, Angular включає:
компонентний фреймворк для створення веб-додатків, що масштабуються.
набір добре інтегрованих бібліотек, які охоплюють широкий спектр функцій, включаючи маршрутизацію, управління формами, взаємодію клієнт-сервер і т.д.
Набір інструментів для розробників, які допоможуть вам розробляти, збирати, тестувати та оновлювати код.
Використовуючи Angular, ви отримуєте переваги платформи, яка може масштабуватись від проектів для одного розробника до програм корпоративного рівня. Angular розроблений таким чином, щоб зробити оновлення максимально простим, тому ви зможете скористатися перевагами останніх розробок із мінімальними зусиллями.
Найголовніше, що екосистема Angular складається з різноманітної групи, що включає понад 1,7 мільйона розробників, авторів бібліотек та творців контенту.
Angular: Основні принципи¶
У цьому розділі пояснюються основні ідеї, що лежать в основі Angular. Розуміння цих ідей допоможе вам більш ефективно проектувати та створювати програми.
Компоненти¶
Компоненти - Це будівельні блоки, з яких складається додаток. Компонент включає клас TypeScript з декоратором @Component() , HTML-шаблон і стилі.
Декоратор @Component() визначає наступну специфічну для Angular інформацію:
CSS-селектор, що визначає, як компонент використовуватиметься в шаблоні. HTML-елементи у шаблоні, що відповідають цьому селектору, стають екземплярами компонента.
HTML-шаблон, який вказує Angular, як відображати компонент.
Необов'язковий набір стилів CSS, які визначають зовнішній вигляд HTML-елементів шаблону.
Нижче наведено мінімальний компонент Angular.
Hello World
This is my first component!
Щоб використати цей компонент, напишіть у шаблоні наступне:
Коли Angular відображає цей компонент, результуючий DOM виглядає так:
Компонентна модель Angular забезпечує сильну інкапсуляцію та інтуїтивно зрозумілу структуру застосування. Компоненти також полегшують модульне тестування вашої програми та покращують загальну читабельність коду.
Докладнішу інформацію про те, що робити з компонентами, можна знайти в розділі Огляд компонентів Angular.
Шаблони¶
Кожен компонент має HTML-шаблон, Який визначає спосіб відображення цього компонента. Ви визначаєте цей шаблон або в рядку, або на шляху до файлу.
Angular додає елементи синтаксису, що розширюють HTML, щоб ви могли вставляти динамічні значення вашого компонента.Angular автоматично оновлює рендеринг DOM у разі зміни стану вашого компонента.
Одним із застосування цієї можливості є вставка динамічного тексту, як показано в наступному прикладі.
Значення для message береться з класу компонента:
Коли програма завантажує компонент та його шаблон, користувач бачить таке:
Зверніть увагу на використання подвійних фігурних дужок – вони вказують Angular інтерполювати вміст усередині них.
Angular також підтримує прив'язки властивостей, щоб допомогти вам встановити значення для властивостей та атрибутів елементів HTML і передати значення логіці уявлення вашої програми.
Зверніть увагу на використання квадратних дужок – цей синтаксис вказує на те, що ви прив'язуєте властивість або атрибут до значення у класі компонента.
Оголошення слухачів подій для прослуховування та реагування на дії користувача, такі як натискання клавіш, рух миші, клацання та дотику. Ви повідомляєте слухач подій, вказуючи ім'я події в круглих дужках:
У попередньому прикладі викликається метод, визначений у класі компонента:
Нижче наведено комбінований приклад інтерполяції, прив'язки властивостей та прив'язки подій у шаблоні Angular:
Додайте можливості до шаблонів за допомогою директив. Найбільш популярними директивами в Angular є *ngIf і *ngFor. Використовуйте директиви для виконання різних завдань, наприклад, динамічної зміни структури DOM.
А також створюйте власні директиви для створення чудового користувальницького досвіду.
Наступний код є прикладом директиви *ngIf.
Декларативні шаблони Angular дозволяють чітко відокремити логіку програми від її представлення.Шаблони базуються на стандартному HTML, що спрощує їх створення, підтримку та оновлення.
Докладніше про шаблони див. у розділі Шаблони.
Ін'єкція залежностей¶
Ін'єкція залежностей дозволяє вам оголошувати залежності ваших класів TypeScript, не переймаючись їх інстанціювання. Натомість Angular виконує інстанціювання за вас.
Цей шаблон проектування дозволяє писати більш тестований та гнучкий код.
Розуміння ін'єкції залежностей не є критичним для початку використання Angular, але настійно рекомендується як найкраща практика. Багато аспектів Angular у тому чи іншою мірою використовують його переваги.
Щоб проілюструвати, як працює використання залежностей, розглянемо наступний приклад. Перший файл, logger.service.ts, визначає клас Logger.
Цей клас містить функцію writeCount , яка записує число в консоль.
Далі у файлі hello-world-di.component.ts визначається компонент Angular. Цей компонент містить кнопку, яка використовує функцію writeCount класу Logger.
Щоб отримати доступ до цієї функції, служба Logger впроваджується в клас HelloWorldDI шляхом додавання private logger: Logger у конструктор.
Для отримання додаткової інформації про ін'єкцію залежностей та Angular дивіться розділ Ін'єкція залежностей у Angular.
Angular CLI¶
Angular CLI - це найшвидший, найпростіший і рекомендований спосіб розробки додатків Angular. Angular CLI робить деякі завдання безпроблемними.
Команда
Подробиці
ng build
Компілює додаток Angular у вихідний каталог.
ng serve
Збирає та обслуговує вашу програму, перебудовуючи її при зміні файлів.
ng generate
Генерує чи змінює файли на основі схеми.
ng test
Запускає модульні випробування для даного проекту.
ng e2e
Збирає та обслуговує програму Angular, потім запускає наскрізні тести.
Angular CLI є цінним інструментом для створення ваших додатків.
Сторонні бібліотеки¶
У розділі "Програми Angular: найнеобхідніше" наведено короткий огляд кількох ключових архітектурних елементів, які використовуються при створенні програм Angular. Численні переваги Angular стають очевидними, коли ваше додаток зростає, і ви хочете додати такі функції, як навігація по сайту або введення даних користувачем.
Використовуйте платформу Angular для включення однієї з численних бібліотек, які надає Angular.
Деякі з доступних бібліотек включають:
Бібліотека
Подробиці
Angular Router
Розширена навігація та маршрутизація на стороні клієнта на основі компонентів Angular. Підтримує ліниве завантаження, вкладені маршрути, зіставлення шляхів користувача та багато іншого.
Angular Forms
Єдина система участі та перевірки форм.
Angular HttpClient
Надійний HTTP-клієнт, здатний забезпечити більш просунуту взаємодію клієнт-сервер.
Angular Animations
Багата система для управління анімацією на основі стану програми.
Angular PWA
Інструменти для створення прогресивних веб-додатків (PWA), включаючи сервісний працівник та маніфест веб-додатків.
Angular Schematics
Автоматизовані інструменти для створення лісів, рефакторингу та оновлення, які спрощують розробку у великих масштабах.
Ці бібліотеки розширюють можливості вашої програми, дозволяючи вам зосередитися на функціях, які роблять вашу програму унікальною.Додайте ці бібліотеки, знаючи, що вони розроблені для бездоганної інтеграції та оновлення одночасно з фреймворком Angular.
Ці бібліотеки необхідні тільки тоді, коли вони можуть допомогти вам додати функції до вашого додатку або вирішити конкретну проблему.
Наступні кроки¶
Ця тема дає вам короткий огляд того, що таке Angular, які переваги він надає і чого очікувати, коли ви почнете створювати свої програми.
Щоб побачити Angular у дії, перегляньте підручник Початок роботи з Angular. У цьому підручнику використовується stackblitz.com, щоб ви могли вивчити робочий приклад Angular без будь-яких вимог до встановлення.
Для подальшого вивчення можливостей Angular рекомендуємо наступні розділи:
Що таке Angular. Початок роботи з фреймворком
Angular представляє фреймворк від компанії Google для створення клієнтських програм. Насамперед він орієнтований на розробку SPA-рішень (Single Page Application), тобто односторінкових додатків. У цьому плані Angular є спадкоємцем іншого фреймворку AngularJS. У той же час, Angular це не нова версія AngularJS, а принципово новий фреймворк.
Angular надає таку функціональність як двостороннє зв'язування, що дозволяє динамічно змінювати дані в одному місці інтерфейсу при зміні даних моделі в іншому, шаблони, маршрутизація і так далі.
Однією з ключових особливостей Angular є те, що він використовує мову програмування TypeScript.
Але ми не обмежені мовою TypeScript. За бажанням можемо писати програми на Angular за допомогою таких мов як Dart або JavaScript. Однак TypeScript є основною мовою для Angular.
Офіційний репозиторій фреймворку на гітхабі: https://github.com/angular/angular.Там можна знайти самі вихідні файли, а також деяку додаткову інформацію.
Початок роботи з Angular¶
Для роботи з Angular необхідно встановити сервер Node.js та пакетний менеджер npm, якщо вони відсутні на робочій машині. Для інсталяції можна використовувати програму інсталяції node.js. Разом із сервером вона також встановить і npm. При цьому особливого знання для роботи з NodeJS і npm не потрібно.
Після встановлення необхідних інструментів створимо найпростіший додаток. Для цього визначимо на жорсткому диску папку програми. Шлях вона буде називатися helloapp. У цій папці створимо новий файл package.json з таким вмістом:
Цей файл встановлює пакети та залежності, які будуть використовуватися проектом. У секції dependencies в основному визначаються пакети angular, які необхідні додатку до роботи. У секції devDependencies прописані лише пакети, які використовуватимуться розробки. Зокрема, це пакети для роботи з мовою typescript (оскільки ми писатимемо код програми на мові TypeScript), а також пакети, необхідні для складання програми в один файл за допомогою збирача webpack.
Потім відкриємо командний рядок (термінал) і перейдемо до папки проекту за допомогою команди cd :
І потім виконаємо команду npm install, яка встановить усі необхідні модулі:
Після виконання цієї команди в папці проекту повинна з'явитися підпапка node_modules , яка містить всі залежні та пакети, що використовуються.
Потім створимо в папці проекту підпапку, яку назвемо src - вона міститиме всі вихідні файли. І далі в папці src створимо підкаталог app.
Створення компонента Angular¶
Компоненти представляють основні будівельні блоки Angular.Кожна програма Angular має як мінімум один компонент. Тому створимо у папці src/app новий файл, який назвемо app.component.ts і в якому визначимо наступний код компонента:
Ласкаво просимо!
На початку файлу визначається директива import, яка імпортує функціональність модуля @angular/core, надаючи доступ до функції декоратора @Component.
Далі власне йде функція-декоратор @Component, яка асоціює метадані з класом компонента AppComponent. У цій функції, по-перше, визначається параметр selector або селектор css для HTML-елемента, який представлятиме компонент. По-друге, тут визначається параметр template або шаблон, який вказує на те, як треба візуалізувати компонент. У цьому шаблоні задана двостороння прив'язка за допомогою виразів [(ngModel)]="name" та > до деякої моделі name .
І наприкінці експортується клас компонента AppComponent , в якому визначається модель name — в даному випадку це порожній рядок.
Створення модуля програми¶
Додаток Angular складається з модулів. Модульна структура дозволяє легко підвантажувати та задіяти лише ті модулі, які безпосередньо необхідні. І кожен додаток має щонайменше один кореневий модуль. Тому створимо в папці src/app новий файл, який назвемо app.module.ts з таким вмістом:
Цей модуль, який в даному випадку називається AppModule, буде вхідною точкою в додаток.
За допомогою директив import тут імпортується низка потрібних нам модулів.Насамперед, це модуль NgModule . Для роботи з браузером також потрібен модуль BrowserModule. Оскільки наш компонент використовує елемент input або елемент форми, також підключаємо модуль FormsModule . І далі імпортується створений раніше компонент.
Запуск програми¶
Тепер нам треба вказати Angular, як запускати нашу програму. Для цього створимо в папці src (на рівень вище, ніж розташовані файли app.component.ts і app.module.ts) файл main.ts з таким вмістом:
Цей код ініціалізує платформу, яка запускає програму, а потім використовує цю платформу для завантаження модуля AppModule .
Також у папці src визначимо ще один файл, який назвемо polyfills.ts з наступним кодом:
Цей файл визначає поліфіли - інструменти, які необхідні для підтримки програми на Angular старими браузерами.
Створення головної сторінки¶
Далі визначимо в папці src головну сторінку index.html програми:
А в елементі body визначено елемент , в який і завантажуватиметься додаток.
Визначення конфігурації¶
Оскільки для визначення коду програми використовується мова TypeScript, тому також створимо у кореневій папці проекту новий файл tsconfig.json :
Цей файл визначає параметри компілятора TypeScript. Опція compilerOptions встановлює параметри компіляції. А опція "files" визначає файли, що компілюються. У нашому випадку це файл програми - main.ts, який підтягує решту файлів програми, і файл поліфілів polyfills.ts.
Angular.json¶
Для компіляції програми ми будемо використовувати Angular CLI, тому ми повинні описати поведінку CLI за допомогою файлу angular.json . Отже, додамо до кореневої папки проекту новий файл angular.json і визначимо в ньому такий вміст:
Коротко пройдемося за структурою файлу. Спочатку визначається параметр version. Він визначає версію конфігурації проекту.
Далі йде секція projects, яка визначає налаштування для кожного проекту. У нашому випадку ми маємо лише один проект, який називається за назвою каталогу проекту — helloapp.
Проект визначає такі опції:
projectType : тип проекту. Значення " application " вказує, що проект представлятиме додаток, який можна буде запускати у браузері
root : вказує на папку файлів проекту щодо робочого середовища. Порожнє значення відповідає кореневій папці проекту, тому що в даному випадку робоче середовище та каталог проекту збігаються
sourceRoot : визначає кореневу папку файлів із вихідним кодом. У нашому випадку це папка src, де власне визначені всі файли програми
architect : задає параметри для побудови проекту. У файлі package.json визначені команди build і serve і для кожної з цих команд у секції architect задані свої налаштування.
Для кожної команди задається параметр builder, який визначає інструмент для побудови проекту. Так, для команди "build" задано значення "@angular-devkit/build-angular:browser" - даний білдер для побудови використовує збирач пакетів webpack. А для команди "serve" задано значення "@angular-devkit/build-angular:dev-server" - даний білдер запускає веб-сервер і розгортає на ньому скомпільований додаток.
Параметр options визначає параметри побудови файлів. Для команди "build" тут визначено такі опції:
outputPath : шлях, яким публікуватиметься скомпільований додаток
index : шлях до головної сторінки програми
main : шлях до головного файлу програми, де власне запускається програма Angular
polyfills : шлях до файлу поліфілів
tsConfig : шлях до конфігураційного файлу TypeScript
aot : вказує, чи використовуватиметься компіляція AOT (Ahead-Of-Head) (попередня компіляція перед виконанням). У цьому випадку значення true означає, що вона використовується
Для команди "serve" вказана лише одна опція - browserTarget, яка містить посилання на конфігурацію для команди build - "helloapp:build". Тобто, по суті, ця команда використовує ту ж конфігурацію, що і команда build .
Остання опція defaultProject вказує на проект за промовчанням. У цьому випадку це наш єдиний проект.
Якщо ми використовуємо TypeScript для роботи з Angular і Angular CLI для компіляції, ці файли package.json , tsconfig.json і angular.json фактично будуть присутні в кожному проекті. І їх можна переносити з проекту до проекту з мінімальними змінами. Наприклад, у файлі angular.json замість назви проекту "helloapp" буде відповідна назва проекту. У файлі package.json можна буде задати інші версії пакетів, якщо попередні версії застаріли. Можна змінити назву проекту, версію. Можна підправити налаштування TypeScript або Angular CLI, але в цілому загальна організація буде такою самою.
У результаті в нас вийде така структура проекту:
Запуск проекту¶
І тепер коли все готове, ми можемо запустити проект. Для цього в командному рядку (терміналі) перейдемо до папки проекту за допомогою команди cd і виконаємо команду ng serve:
Консольний висновок проінформує нас, які файли якого розміру створено. Крім того, ми зможемо побачити адресу, за якою запущено тестовий веб-сервер - за умовчанням це "http://localhost:4200/".Якщо ми передаємо команді прапор --open , як у вище, то Angular CLI автоматично відкриває браузер із запущеним додатком. І ми можемо звернутися до додатку:
Введемо в текстове поле якесь ім'я, і воно відразу відобразиться в заголовку.
Поки програма запущена, ми можемо змінити код, і Angular CLI майже моментально перекомпілює і перезапустить програму.