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

Создайте простой редактор героев.

Настройка для разработки локально

Следуйте инструкциям по настройке для создания нового проекта с именем .

Структура файлов должна выглядеть так:

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

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

Поддерживайте транспиляцию и запуск приложения

Введите следующую команду в окне терминала:

npm start

Эта команда запускает компилятор TypeScript в режиме "наблюдения", автоматически перекомпилируя код при его изменении. Команда одновременно запускает приложение в браузере и обновляет браузер при изменении кода.

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

Отображение героя

Добавьте две свойства к AppComponent: свойство title для имени приложения и свойство hero для героя с именем "Буря."

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

Теперь обновите шаблон в декораторе @Component с привязкой данных к этим новым свойствам.

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

Браузер обновляется и отображает заголовок и имя героя.

Двойные фигурные скобки — это синтаксис привязки интерполяции Angular. Эти привязки интерполяции представляют значения свойств компонента title и hero в виде строк внутри тегов заголовка HTML.

Дополнительную информацию об интерполяции можно найти на странице Отображение данных.

Объект героя

Герою нужны дополнительные свойства. Преобразуйте hero из литеральной строки в класс.

Создайте класс Hero со свойствами id и name. Добавьте эти свойства вверху файла app.component.ts, сразу под инструкцией импорта.

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

В классе Hero переделайте свойство компонента hero на тип Hero, затем инициализируйте его с экземпляром id класса 1 с именем Windstorm.

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

Поскольку вы изменили героя со строки на объект, обновите привязку в шаблоне, чтобы она ссылалась на свойство name героя.

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

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

Добавление HTML с многострочными строками шаблонов

Чтобы отобразить все свойства героя, добавьте <div> для свойства id героя и <div> для свойства name героя. Для лучшей читаемости шаблона поместите каждый <div> на отдельную строку.

Кавычки вокруг шаблона компонента позволяют разместить элементы <h1>, <h2> и <div> на отдельных строках благодаря возможности «строковые литералы» в ES2015 и TypeScript. Для получения дополнительной информации см. Строковые литералы.

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

Изменение имени героя

Пользователи должны иметь возможность изменять имя героя в поле ввода <input>. Поле ввода должно как отображать свойство name героя, так и обновлять это свойство по мере ввода пользователем.

Вам нужна двунаправленная привязка между элементом формы <input> и свойством hero.name.

Двунаправленная привязка

Переделайте имя героя в шаблоне так, чтобы оно выглядело следующим образом:

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)] — это синтаксис Angular для привязки свойства hero.name к полю ввода. Поток данных происходит в обоих направлениях: от свойства к полю ввода; и от поля ввода обратно к свойству.

К сожалению, сразу после этого изменения приложение выходит из строя. Если вы посмотрите в консоль браузера, вы увидите, что Angular жалуется, что "ngModel ... не является известным свойством input".

Хотя NgModel — это допустимая директива Angular, она недоступна по умолчанию. Она относится к необязательному модулю FormsModule. Вы должны включить его использование.

Импорт модуля FormsModule

Откройте файл app.module.ts и импортируйте символ FormsModule из библиотеки @angular/forms. Затем добавьте FormsModule в массив метаданных @NgModule модуля imports, который содержит список внешних модулей, используемых приложением.

Обновленный файл AppModule выглядит так:

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

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Дополнительную информацию о FormsModule и ngModel можно найти в разделе Двунаправленная привязка данных с ngModel руководства Формы и разделе Двунаправленная привязка с NgModel руководства Синтаксис шаблонов.

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

Путь, пройденный вами

Подведите итоги того, что вы построили.

• Приложение Tour of Heroes использует двойные фигурные скобки интерполяции (тип односторонней привязки данных) для отображения заголовка приложения и свойств объекта Hero.
• Вы написали многострочный шаблон, используя строковые литералы ES2015, чтобы сделать шаблон более читабельным.
• Вы добавили двунаправленную привязку данных к элементу <input> с помощью встроенной директивы ngModel. Эта привязка как отображает имя героя, так и позволяет пользователям его изменять.
• Директива ngModel распространяет изменения на все другие привязки hero.name.

Ваше приложение должно выглядеть так же, как на этом живом примере.

Вот полный файл 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'
  };
}

Дальнейший путь

В следующей статье вы продолжите работу над приложением Tour of Heroes, чтобы отобразить список героев. Вы также позволите пользователю выбирать героев и отображать их подробности. Вы узнаете больше о том, как получать списки и связывать их с шаблоном.

Следующий шаг

Мастер/Детали