Урок 9: Сервисы Angular¶

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

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 15 минут.

Перед началом¶

Этот урок начинается с кода из предыдущего урока, поэтому вы можете:

Использовать код, созданный в Уроке 8, в своей интегрированной среде разработки (IDE).
Начните с примера кода из предыдущего урока. Выберите код из Урока 8, где вы можете:
- Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.
- Использовать download пример и открыть его в вашей IDE.

Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

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

После завершения¶

В вашем приложении есть служба, обслуживающая данные для вашего приложения.

В конце этого урока служба считывает данные из локальных, статических данных.

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

Концептуальный обзор сервисов¶

Этот урок знакомит с сервисами Angular и инъекцией зависимостей.

Сервисы Angular¶

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

Инжектируемые сервисы, используемые компонентом, становятся зависимостями этого компонента.

Компонент зависит от этих сервисов и не может функционировать без них.

Инъекция зависимостей¶

Инъекция зависимостей — это механизм, который управляет зависимостями компонентов приложения и сервисами, которые могут использовать другие компоненты.

Шаги урока¶

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

Шаг 1 — Создайте новый сервис для вашего приложения¶

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

В панели Терминал вашей IDE:

В каталоге проекта перейдите в каталог first-app.
В директории first-app выполните эту команду для создания новой службы.
1
ng generate service housing --skip-tests
Запустите ng serve, чтобы создать приложение и передать его на http://localhost:4200.
Убедитесь, что приложение собирается без ошибок.

Исправьте все ошибки, прежде чем переходить к следующему шагу.

Шаг 2 — Добавление статических данных в новый сервис¶

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

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

В панели Edit вашей IDE:

В src/app/home/home/home.component.ts, из HomeComponent, скопируйте переменную housingLocationList и ее значение массива.

В src/app/house.service.ts:

Внутрь класса HousingService вставьте переменную, которую вы скопировали из HomeComponent в предыдущем шаге.

Внутри класса HousingService вставьте эти функции после данных, которые вы только что скопировали.

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

getAllHousingLocations(): HousingLocation[] {
    return this.housingLocationList;
}

getHousingLocationById(id: number): HousingLocation | undefined {
    return this.housingLocationList.find(
        housingLocation => housingLocation.id === id
    );
}

Эти функции понадобятся вам в одном из следующих уроков. Пока же достаточно понять, что эти функции возвращают либо конкретное HousingLocation по id, либо весь список.

Добавьте импорт на уровне файла для HousingLocation.
1
import { HousingLocation } from './housinglocation';

Убедитесь, что приложение собирается без ошибок.

Исправьте все ошибки, прежде чем переходить к следующему шагу.

Шаг 3 — Внедрение новой службы в `HomeComponent`¶

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

В панели Edit вашей IDE, в src/app/home/home/home.component.ts:

В верхней части src/app/home/home/home.component.ts добавьте inject к элементам, импортированным из @angular/common. Это импортирует функцию inject в класс HomeComponent.
1
import { Component, inject } from '@angular/core';
Добавьте новый импорт на уровне файла для HousingService:
1
import { HousingService } from '../housing.service';
Из HomeComponent удалите housingLocationList, удалите записи массива и присвойте housingLocationList значение пустого массива ([]). Через несколько шагов вы обновите код, чтобы получить данные из HousingService.

В HomeComponent добавьте этот код, чтобы внедрить новый сервис и инициализировать данные для приложения. Конструктор" — это первая функция, которая запускается при создании этого компонента. Код в конструкторе присвоит housingLocationList значение, возвращаемое вызовом getAllHousingLocations.

housingLocationList: HousingLocation[] = [];
housingService: HousingService = inject(HousingService);

constructor() {
    this.housingLocationList = this.housingService.getAllHousingLocations();
}

Сохраните изменения в src/app/home/home/home.component.ts и убедитесь, что ваше приложение собирается без ошибок.

Исправьте все ошибки, прежде чем переходить к следующему шагу.

Обзор урока¶

В этом уроке вы добавили сервис Angular в ваше приложение и внедрили его в класс HomeComponent. Это разделило способы получения данных вашим приложением.

Пока что новый сервис получает данные из статического массива данных.

В следующем уроке вы рефакторите сервис, чтобы он получал данные из конечной точки API.

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

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

Урок 10 — Добавление маршрутов в приложение

Дополнительная информация¶

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

Ссылки¶

Lesson 9: Angular services