Начало работы с Angular¶

Добро пожаловать в Angular!

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

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

Предварительные условия¶

Чтобы извлечь максимальную пользу из этого учебника, вы должны иметь базовое представление о следующем.

• HTML
• JavaScript
• TypeScript

Ознакомьтесь с примером приложения¶

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

Компонент состоит из трех элементов:

Это руководство демонстрирует создание приложения со следующими компонентами:

Для получения дополнительной информации о компонентах смотрите Введение в компоненты.

Создайте проект примера¶

Чтобы создать образец проекта, сгенерируйте готовый образец проекта в StackBlitz. Чтобы сохранить свою работу:

1. Войдите в StackBlitz.
2. Создайте проект, который вы сгенерировали.
3. Периодически сохраняйте.

В StackBlitz панель предварительного просмотра справа показывает начальное состояние примера приложения. Предварительный просмотр включает две области:

• Верхняя панель с названием магазина, My Store, и кнопкой оформления заказа
• Заголовок для списка товаров, Products.

В разделе проекта слева показаны исходные файлы, из которых состоит приложение, включая инфраструктуру и файлы конфигурации.

Когда вы создаете примеры приложений StackBlitz, которые сопровождают учебные пособия, StackBlitz создает для вас исходные файлы и макеты данных. Файлы, которые вы используете на протяжении всего учебника, находятся в папке src.

Более подробную информацию о том, как использовать StackBlitz, см. в документации по StackBlitz.

Создание списка продуктов¶

В этом разделе вы обновите приложение для отображения списка товаров. Вы будете использовать предопределенные данные продуктов из файла products.ts и методы из файла product-list.component.ts.

Этот раздел поможет вам отредактировать HTML, также известный как шаблон.

1. В папке product-list откройте файл шаблона product-list.component.html.

2. Добавьте структурную директиву *ngFor для <div>, как показано ниже.

1
2
3

<h2>Products</h2>

<div *ngFor="let product of products"></div>

При использовании *ngFor, <div> повторяется для каждого товара в списке.

Структурные директивы формируют или изменяют структуру DOM, добавляя, удаляя и манипулируя элементами.

Более подробную информацию о структурных директивах смотрите в Structural directives.

3. Внутри <div> добавьте <h3> и {{ product.name }}.

Утверждение {{ product.name }} является примером синтаксиса интерполяции Angular.

Интерполяция {{ }} позволяет отобразить значение свойства в виде текста.

1
2
3
4
5

<h2>Products</h2>

<div *ngFor="let product of products">
    <h3>{{ product.name }}</h3>
</div>

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

4. Чтобы сделать каждое название товара ссылкой на его подробную информацию, добавьте элемент <a> вокруг {{ product.name }}.

5. Установите заголовок как название продукта, используя синтаксис связывания свойств [ ], как показано ниже:

1
2
3
4
5
6
7
8
9

<h2>Products</h2>

<div *ngFor="let product of products">
    <h3>
        <a [title]="product.name + ' details'">
            {{ product.name }}
        </a>
    </h3>
</div>

На панели предварительного просмотра наведите курсор на название продукта, чтобы увидеть связанное значение свойства name, которое представляет собой название продукта плюс слово "details".

Привязка свойства [ ] позволяет использовать значение свойства в выражении шаблона.

6. Добавьте описания товаров.

В элементе <p> используйте директиву *ngIf, чтобы Angular создавал элемент <p> только в том случае, если у текущего товара есть описание.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<h2>Products</h2>

<div *ngFor="let product of products">
    <h3>
        <a [title]="product.name + ' details'">
            {{ product.name }}
        </a>
    </h3>

    <p *ngIf="product.description">
        Description: {{ product.description }}
    </p>
</div>

Теперь приложение отображает название и описание каждого продукта в списке.

Обратите внимание, что у последнего продукта нет параграфа описания.

Angular не создает элемент <p>, потому что свойство description продукта пустое.

7. Добавьте кнопку, чтобы пользователи могли поделиться товаром. Привяжите событие click кнопки к методу share() в product-list.component.ts. Привязка события использует набор круглых скобок, ( ), вокруг события, как в событии (click) для элемента <button>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<h2>Products</h2>

<div *ngFor="let product of products">
    <h3>
        <a [title]="product.name + ' details'">
            {{ product.name }}
        </a>
    </h3>

    <p *ngIf="product.description">
        Description: {{ product.description }}
    </p>

    <button type="button" (click)="share()">Share</button>
</div>

Каждый продукт теперь имеет кнопку Поделиться.

Нажатие на кнопку Share вызывает оповещение, в котором говорится: "Продуктом поделились!".

Редактируя шаблон, вы изучили некоторые из наиболее популярных возможностей шаблонов Angular. Для получения дополнительной информации смотрите Введение в компоненты и шаблоны.

Передача данных дочернему компоненту¶

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

Следующим шагом будет создание новой функции оповещения, которая использует данные о продукте из ProductListComponent. Оповещение проверяет цену продукта и, если цена превышает $700, отображает кнопку Notify Me, которая позволяет пользователям подписаться на уведомления, когда продукт поступит в продажу.

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

1. Нажмите на знак плюс над текущим терминалом, чтобы создать новый терминал для выполнения команды создания компонента.

2. В новом терминале создайте новый компонент с именем product-alerts, выполнив следующую команду:

1

ng generate component product-alerts

Генератор создает начальные файлы для трех частей компонента:

• product-alerts.component.ts
• product-alerts.component.html
• product-alerts.component.css

3. Откройте product-alerts.component.ts.

Декоратор @Component() указывает, что следующий класс является компонентом.

@Component() также предоставляет метаданные о компоненте, включая его селектор, шаблоны и стили.

1
2
3
4
5
6

@Component({
    selector: 'app-product-alerts',
    templateUrl: './product-alerts.component.html',
    styleUrls: ['./product-alerts.component.css'],
})
export class ProductAlertsComponent {}

Ключевые особенности @Component() следующие:

• selector, app-product-alerts, идентифицирует компонент. По соглашению, селекторы компонентов Angular начинаются с префикса app-, за которым следует имя компонента.
• Имена файлов шаблона и стиля ссылаются на HTML и CSS компонента.
• Определение @Component() также экспортирует класс ProductAlertsComponent, который управляет функциональностью компонента.

4. Чтобы настроить ProductAlertsComponent для получения данных о продукте, сначала импортируйте Input из @angular/core.

1
2

import { Component, Input } from '@angular/core';
import { Product } from '../products';

5. В определении класса ProductAlertsComponent определите свойство product с декоратором @Input().

Декоратор @Input() указывает, что значение свойства передается от родителя компонента, ProductListComponent.

1
2
3

export class ProductAlertsComponent {
    @Input() product: Product | undefined;
}

6. Откройте product-alerts.component.html и замените абзац placeholder на кнопку Notify Me, которая появляется, если цена товара превышает $700.

1
2
3

<p *ngIf="product && product.price > 700">
    <button type="button">Notify Me</button>
</p>

7. Генератор автоматически добавил ProductAlertsComponent в AppModule, чтобы сделать его доступным для других компонентов приложения.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import {
    ProductAlertsComponent
} from './product-alerts/product-alerts.component';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
  ],
})

8. Наконец, чтобы отобразить ProductAlertsComponent в качестве дочернего компонента ProductListComponent, добавьте элемент <app-product-alerts> в product-list.component.html. Передайте текущий продукт в качестве входных данных компоненту, используя привязку свойств.

1
2
3
4

<button type="button" (click)="share()">Share</button>

<app-product-alerts [product]="product">
</app-product-alerts>

Новый компонент оповещения о продукте принимает продукт из списка продуктов. После ввода он показывает или скрывает кнопку Уведомить меня, основываясь на цене товара. Цена Phone XL превышает $700, поэтому кнопка Notify Me появляется на этом продукте.

Передача данных родительскому компоненту¶

Чтобы кнопка Notify Me работала, дочерний компонент должен уведомлять и передавать данные родительскому компоненту. Компонент ProductAlertsComponent должен испускать событие, когда пользователь нажимает Notify Me, а компонент ProductListComponent должен реагировать на это событие.

1. В product-alerts.component.ts импортируйте Output и EventEmitter из @angular/core.

1
2
3
4
5
6
7

import {
    Component,
    Input,
    Output,
    EventEmitter,
} from '@angular/core';
import { Product } from '../products';

2. В классе компонента определите свойство notify с декоратором @Output() и экземпляром EventEmitter().

Настройка ProductAlertsComponent с @Output() позволяет ProductAlertsComponent испускать событие при изменении значения свойства notify.

1
2
3
4

export class ProductAlertsComponent {
    @Input() product: Product | undefined;
    @Output() notify = new EventEmitter();
}

3. В product-alerts.component.html обновите кнопку Notify Me с привязкой к событию для вызова метода notify.emit().

1
2
3
4
5

<p *ngIf="product && product.price > 700">
    <button type="button" (click)="notify.emit()">
        Notify Me
    </button>
</p>

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

Родитель, ProductListComponent — не ProductAlertsComponent— действует, когда дочерний компонент поднимает событие.

В product-list.component.ts определите метод onNotify(), аналогичный методу share().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export class ProductListComponent {
    products = [...products];

    share() {
        window.alert('The product has been shared!');
    }

    onNotify() {
        window.alert(
            'You will be notified when the product goes on sale'
        );
    }
}

5. Обновите ProductListComponent для получения данных от ProductAlertsComponent.

В product-list.component.html, привяжите <app-product-alerts> к методу onNotify() компонента списка продуктов.

<app-product-alerts> — это то, что отображает кнопку Notify Me.

1
2
3
4
5
6
7

<button type="button" (click)="share()">Share</button>

<app-product-alerts
    [product]="product"
    (notify)="onNotify()"
>
</app-product-alerts>

6. Нажмите кнопку Уведомить меня, чтобы запустить оповещение следующего содержания: "Вы будете уведомлены, когда товар поступит в продажу".

Для получения дополнительной информации о взаимодействии между компонентами смотрите Взаимодействие компонентов.

Что дальше¶

В этом разделе вы создали приложение, которое итерирует данные и содержит компоненты, взаимодействующие друг с другом.

Чтобы продолжить изучение Angular и разработку этого приложения:

• Перейдите к разделу In-app navigation, чтобы создать страницу подробностей о продукте.
• Перейдите к Развертывание, чтобы перейти к локальной разработке или развернуть приложение на Firebase или собственном сервере.

28.02.2022

Комментарии