Редактор Героїв

Встановлення локальної розробки

Реальна розробка застосунків відбувається у середовищі локальної розробки, наприклад на вашому комп'ютері.

Дотримуйтесь інструкцій встановлення щоб створити новий проект з назвою , після чого, файлова структура повинна бути такою:

angular-tour-of-heroes
app
app.component.ts
app.module.ts
main.ts
node_modules ...
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json

Коли ми завершимо цей перший епізод, застосунок працюватиме так, як у цьому живому прикладі.

Забезпечте запуск та транспіляцію застосунка

Виконайте наступну команду:

npm start

Ця команда запустить компілятор TypeScript у режимі нагляд за змінами файлів, запустить веб-сервер, відкриє застосунок у браузері, та забезпечить роботу застосунку, поки ми будуватимемо Тур Героїв.

Показ Героя

Ми хочемо показати дані Героя в нашому застосунку.

Оновимо AppComponent щоб він мав дві властивості: title - для назви застосунку, та hero - для героя з іменем "Windstorm".

app.component.ts (клас AppComponent)

export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm'; }

Тепер оновимо шаблон у декораторі @Component та прив'яжемо дані до цих нових властивостей.

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

Браузер повинен оновити та показати заголовок і героя.

Подвійні фігурні дужки говорять нашому застосунку, щоб читав властивості title та hero із компонента та відмальовував їх. Це є формою "інтерполяції" одно-напрямленої прив'язки даних.

Вивчіть більше про інтерполяцію у розділі Показ Даних.

Об'єкт героя

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

Створимо клас Hero з властивостями id та name. Потім розмістимо їх вгорі у файлі app.component.ts, прямо під виразом import.

app.component.ts (клас Hero)

export class Hero { id: number; name: string; }

Тепер, коли ми маємо клас Hero, давайте зробимо рефакторинг щоб наша властивість компонента hero мала тип даних Hero. Після чого, ініціалізуємо її значеннями 1 та Windstorm відповідно для id та name.

app.component.ts (властивість hero)

hero: Hero = { id: 1, name: 'Windstorm' };

Оскільки ми змінили hero з рядкового значення на об'єкт, нам необхідно змінити й прив'язку в шаблоні щоб посилатись на властивість name нашого героя.

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

Браузер оновиться і продовжить показувати ім'я нашого героя.

Додамо більше HTML

Показ імені - це добре, але ми хочемо бачити усі властивості нашого героя. Давайте додамо <div> для властивості id нашого героя, а інший <div> - для name.

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

Ух, наш рядок шаблону задовгий. Ми трохи змінемо шаблон, щоб уникнути ризику допустити помилку в ньому.

Багато-рядковий шаблон

Ми можемо зробити шаблон більш читабельним із рядковою конкатенацією, але він матиме жахливу швидкість, погано читатиметься, ще й досить легко у ньому зробити опечатку. Натомість, давайте отримаємо зиск від можливості рядкового шаблону у ES2015 і TypeScript.

Змініть одинарні лапки навколо шаблона на косі лапки (back-ticks) та розташуйие елементи <h1>, <h2> і <div> на окремих рядках.

app.component.ts (шаблон AppComponent)

template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> `

Редагування Героя

Ми хочемо мати можливість редагувати ім'я героя в текстовому полі.

Зробимо рефакторинг ім'я героя використовуючи елементи <label> та <input> як показано нижче:

app.component.ts (вхідний елемент)

template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input value="{{hero.name}}" placeholder="name"> </div> `

Ми бачимо в браузері, що ім'я героя з'являється в текстовому полі <input>. Але щось не так: коли змінюємо ім'я, ми бачимо що наші зміни не відображаються у <h2>. Ми не отримаємо бажаної поведінки з одно-напрямленою прив'язкою в <input>.

Дво-напрямлена прив'язка

Ми маємо намір показувати ім'я героя в <input>, змінити його, і зразу бачити результат в будь-якому місці, де ми прив'язали ім'я героя. Якщо коротко, ми хочемо дво-напрямлену прив'язку даних.

Перед тим, як ми зможемо використовувати дво-напрямлену прив'язку для форми введення, нам потрібно імпортувати пакет FormsModule у наш Angular-модуль. Ми додамо його в масив imports декоратора NgModule. Цей масив містить список зовнішніх модулів, який використовує наш застосунок. Тепер ми маємо увімкнений пакет форм, де є ngModel.

app.module.ts (імпортування FormsModule)

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Більше інформації про FormsModule та ngModel у розділах Форми і Синтаксис шаблона.

Давайте оновимо шаблон, щоб використовувати вбудовані директиви у ngModel з дво-напрямленою прив'язкою до даних.

Замініть <input> наступним HTML

<input [(ngModel)]="hero.name" placeholder="name">

Браузер оновиться й ми побачимо нашого героя знову. Ми можемо редагувати ім'я героя та бачити зразуж відповідні зміни у <h2>.

Де ми вже побували

Давайте підведемо підсумки що ми побудували.

Запустіть живий приклад для цього розділу.

Ось весь app.component.ts, який ми маємо тепер:

app.component.ts

import { Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }

Йдемо далі

Наш Тур Героїв показує лише одного героя, але ми хочемо показувати список героїв. Ми також хочемо дозволити користувачам вибирати героїв та показувати детальну інформацію про них. Ми будемо вчитись це робити у наступному розділі підручника.

Наступний крок

Головне/детальне