Oleh Hrebeniuk

Наше приложение теперь имеет название. Теперь мы создадим новый компонент для отображения информации о героях и поместим этот компонент в оболочку приложения.

Используя CLI запустим команду:

1
ng generate component heroes

CLI создаст новую папку src/app/heroes/ и сгенерирует 3 файла HeroesComponent.

1
import { Component, OnInit } from '@angular/core';
2

3
@Component({
4
  selector: 'app-heroes',
5
  templateUrl: './heroes.component.html',
6
  styleUrls: ['./heroes.component.css']
7
})
8
export class HeroesComponent implements OnInit {
9

10
  constructor() { }
11

12
  ngOnInit() {
13
  }
14

15
}

Мы всегда импортируем Component из библиотеки agngular/core и декорируем класс с помощью @Component.

@Component - функция декоратока которая определяет метаданные компонента в Angular.

CLI сгенерировале три свойства метаданных:

selector - CSS селектор компонента
templateUrl - путь к шаблону компонента
styleUrls - путь к файлу стилей компонента

СSS-селектор ‘app-heroes’, также соответствует имени элемента HTML, который идентифицирует этот компонент в шаблоне родительского компонента.

Метод ngOnInit - хук жизненного цикла компонента. Angular вызывает ngOnInit незамедлительно после создания компонента. Хорошее место для описания логики инициализации.

Всегда экспортируйте класс компонента, чтобы вы могли импортировать его в дрогом месте, например, AppModule.

Дальше, добавим свойство hero в HeroesComponent для героя, например, Windstorm.

1
hero = 'Windstorm';

Для отображения имени героя откроем файл шаблона heroes.component.html. Удалим из него все и запишем одну строку

1
{{ hero }}

- которая будет выводить имя нашего героя.

Отобразим наш компонент на экран. Для этого нам нужно добавить HeroesComponent в AppComponent.

Запомним, что app-heroes - селектор компонента HeroesComponent.

Поэтому добавим элемент в файл шаблона AppComponent, чуть ниже названия.

1
<h1>{{title}}</h1>
2
<app-heroes></app-heroes>

Предполагая, что команда CLI ng serve все еще запущена, браузер должен обновить и отобразить как заголовок приложения, так и имя героя.

Модель Героя

Настоящий герой - не просто имя.

Создайте класс Hero в своем файле в папке src/app. Дайте ему свойства id и name.

1
export class Hero {
2
  id: number;
3
  name: string;
4
}

Вернемся в HeroesComponent и импортируем туда модель Hero и немного отрефакторим наш код, изменив тип свойства hero со string на Hero и сразу же его инициализируем { id: 1, name: ‘Windstorm’ }.

1
import { Component, OnInit } from '@angular/core';
2
import { Hero } from '../hero';
3

4
@Component({
5
  selector: 'app-heroes',
6
  templateUrl: './heroes.component.html',
7
  styleUrls: ['./heroes.component.css']
8
})
9
export class HeroesComponent implements OnInit {
10
  hero: Hero = {
11
    id: 1,
12
    name: 'Windstorm'
13
  };
14

15
  constructor() { }
16

17
  ngOnInit() {
18
  }
19

20
}

Страница больше не отображается должным образом, потому что мы изменили героя из строки в объект.

Отобразим объект angular на экран

1
<h2>{{hero.name}} Details</h2>
2
<div><span>id: </span>{{hero.id}}</div>
3
<div><span>name: </span>{{hero.name}}</div>

Браузер перезагрузиться и отобразит желаемую информацию.

Отформатируем текст с помощью UppercasePipe

1
<h2>{{hero.name | uppercase}} Details</h2>

После обновления, увидим что имя героя отображается заглавными буквами. Слово uppercase в интерполяции сразу после оператора | активирует встроенный в Angular UppercasePipe.

Pipes - способ форматирования строк, сумм валют, дат и других отображаемых данных. Angular поставляеться с несколькими встроенными пайпами, а также, мы можем создавать свои собственные.

Редактор героев

Пользователи должны иметь возможность редактировать имя героя в текстовом поле .

Текстовое поле должно отображать свойство имени героя и обновлять это свойство по вводу пользователя. Это означает, что поток данных из класса компонента выводит на экран и обратно возращает ввод в класс.

Чтобы автоматизировать этот поток, настроим двустороннюю привязку (two-way data binding) между элементом формы и свойством hero.name.

Двусторонее связывание

Обновим шаблон HeroesComponent

1
<div>
2
  <label>name:
3
    <input [(ngModel)]="hero.name" placeholder="name">
4
  </label>
5
</div>

[(ngModel)] - синтаксис двустороннего связывания данных в Angular.

Здесь мы связвываем свойство hero.name с текстовым полем HTML, чтобы данные могли поступать в обоих направлениях: от свойства hero.name до текстового поля и от текстового поля обратно к имени hero.name.

Обратите внимание, что приложение перестало работать, когда вы добавили [(ngModel)].

Чтобы увидеть эту ошибку, откройте средства разработки браузера и загляните в консоль для сообщения типа

1
Template parse errors:
2
Can't bind to 'ngModel' since it isn't a known property of 'input'.

Хотя ngModel является действующей директивой Angular, по умолчанию она недоступена.

Она принадлежит к дополнительному модулю FormsModule, и вы должны его использовать.

AppModule

Angular-у нужно знать, какие части приложения работают вместе и какие файлы и библиотеки требуются. Эта информация называется метаданными.

Некоторые метаданные находятся в декораторах @Component, добавленных в классы компонентов. Другие критические метаданные находятся в декораторах @NgModule.

Самый важный декоратор @NgModule аннотирует класс AppModule верхнего уровня.

Angular CLI сгенерировал класс AppModule в src/app/app.module.ts, когда был создан проект. Сюда же мы и добавим наш FormsModule.

1
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

1
imports: [
2
  BrowserModule,
3
  FormsModule
4
],

Так же нам нужно сообщить фреймворку что у нас появился новый компонент. Для этого в файле app.module.ts добавим:

1
import { HeroesComponent } from './heroes/heroes.component';

1
declarations: [
2
  AppComponent,
3
  HeroesComponent
4
],

Когда браузер обновится, приложение должно снова работать. Вы можете отредактировать имя героя и увидеть изменения, отраженные сразу в

над текстовым полем.

Code review

1
import { Component, OnInit } from '@angular/core';
2
import { Hero } from '../hero';
3

4
@Component({
5
  selector: 'app-heroes',
6
  templateUrl: './heroes.component.html',
7
  styleUrls: ['./heroes.component.css']
8
})
9
export class HeroesComponent implements OnInit {
10
  hero: Hero = {
11
    id: 1,
12
    name: 'Windstorm'
13
  };
14

15
  constructor() { }
16

17
  ngOnInit() {
18
  }
19

20
}

1
<h2>{{hero.name | uppercase}} Details</h2>
2
<div><span>id: </span>{{hero.id}}</div>
3
<div>
4
  <label>name:
5
    <input [(ngModel)]="hero.name" placeholder="name">
6
  </label>
7
</div>

1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
4

5
import { AppComponent } from './app.component';
6
import { HeroesComponent } from './heroes/heroes.component';
7

8
@NgModule({
9
  declarations: [
10
    AppComponent,
11
    HeroesComponent
12
  ],
13
  imports: [
14
    BrowserModule,
15
    FormsModule
16
  ],
17
  providers: [],
18
  bootstrap: [AppComponent]
19
})
20
export class AppModule { }

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

3
@Component({
4
  selector: 'app-root',
5
  templateUrl: './app.component.html',
6
  styleUrls: ['./app.component.css']
7
})
8
export class AppComponent {
9
  title = 'Tour of Heroes';
10
}

1
<h1>{{title}}</h1>
2
<app-heroes></app-heroes>

1
export class Hero {
2
  id: number;
3
  name: string;
4
}

Итоги

Использовали консоль для создания второго компонента
Вывели компонент на екран
Использовали форматирование текста при помощи UppercasePipe
Научились использовать дву-стороннее связывание данных при помощи ngModel
Немного затронули AppModule
Импортировали необходимые зависимости для работы нашего приложения

3. «Редактор Героев» - Angular 6