Добро пожаловать в этот обзор курса Pluralsight Основы Angular Джима Купера и Джо Имса. Не считая двухминутного обзора курса, в этом курсе 16 модулей, и мы подошли к 10-му модулю: Понимание внедрения зависимостей в Angular.
Предыдущие модули:
- Начало работы с Angular
- Создание и взаимодействие между компонентами Angular
- Изучение синтаксиса Angular
- Создание многоразовых сервисов Angular
- Маршрутизация и навигация по страницам
- Сбор данных с помощью Angular Forms и валидация
- Общение между компонентами
- Повторное использование компонентов с проекцией контента
- Отображение данных с помощью каналов
Курс Angular Fundamentals является курсом среднего уровня и является 5-м курсом в пути обучения Angular.
Этот модуль широко охватывает материал, который находится в руководстве Внедрение зависимостей в Angular.
Использование сторонних глобальных сервисов — проблема
Джо хочет добавить уведомления в момент входа в систему, но сначала указывает на проблему.
Мы использовали библиотеку Toastr (которая не является частью Angular) в некоторых местах на протяжении всего курса и создали сервис Toastr, чтобы упростить его тестирование.
Наш сервис Toastr включает в себя каждую из четырех основных функций: успех, информация, предупреждение об ошибке. Мы не хотели бы использовать этот шаблон для более крупной библиотеки, такой как jQuery, потому что это потребовало бы слишком много кода.
Но простое использование глобальных объектов в ванильном стиле означает, что мы теряем возможность выполнять Tree Shaking и другие функции модулей ES6.
Поиск внедрения зависимостей Angular
Джо объясняет механизм поиска Внедрение зависимостей и говорит, что нам нужно создать и экспортировать класс для нашего объекта Toastr.
Использование InjectionToken Angular
В этом клипе Джо создает новый сервис тоастров, который экспортирует переменную TOASTR_TOKEN типа InjectionToken. Он объясняет, почему этот метод позволяет избежать коллизий имен.
В нашем оригинальном сервисе toastr мы имеем:
объявить let toastr:any;
Мы перемещаем этот код в наш app.module.ts и меняем его на:
объявить let toastr:Toastr = window[‘toastr’];
Тип Toastr определяется интерфейсом, который мы создаем.
И мы добавляем в наш массив provider запись:
{ предоставить: TOASTR_TOKEN, useValue: toastr },
Использование декоратора Angular @Inject
Теперь мы можем начать думать о добавлении уведомлений toastr в компонент нашего профиля.
Сначала мы добавляем декоратор @Inject в конструктор компонента профиля, и его параметром является наш TOASTR_TOKEN.
Когда мы меняем наш профиль, мы получаем уведомление «Профиль сохранен».
Попробуйте практическое упражнение.
Поставщик useClass
Джо объясняет разницу между сокращенной и полной записью в массиве provider. Дебора Курата также объясняет это в своем курсе Начало работы.
Раньше мы видели useValue, а теперь мы видим useClass. Это может быть полезно, если у нас есть конкретная реализация универсальной службы (например, реализация службы Logger в FileLogger).
Провайдеры useExisting и useFactory
Есть еще два способа зарегистрировать провайдеров, но Джо говорит, что вряд ли вам когда-нибудь понадобится использовать любой из них!
useExisting также известен как поставщик псевдонимов. Джо объясняет, как это можно использовать для минимизации API.
useFactory еще сложнее, чем useExisting. Он принимает функцию и позволяет параметризовать создание объекта. Для получения дополнительной информации ознакомьтесь с официальной документацией.
Попробуйте практическое упражнение.
Спасибо за чтение. Следующий модуль курса — Создание директив и расширенных компонентов в Angular.