В Angular 6 появился новый улучшенный синтаксис для внедрения зависимостей сервисов в приложение (provideIn). Несмотря на то, что уже вышел Angular 7, эта тема до сих пор остается актуальной. Существует много путаницы в комментариях GitHub, Slack и Stack Overflow, так что давайте подробно разберем эту тему.

В данной статье мы рассмотрим:

1. Внедрение зависимостей (dependency injection);
2. Старый способ внедрения зависимостей в Angular (providers: []);
3. Новый способ внедрения зависимостей в Angular (providedIn: 'root' | SomeModule);
4. Сценарии использования provideIn;
5. Рекомендации по использованию нового синтаксиса в приложениях;
6. Подведем итоги.

Если вы интересуетесь программированием, то возможно слышали фразу:

«Каждый должен учиться программированию, потому что оно учит думать.»

— Стив Джобс

Наверное вы тоже задавались вопросом, что значит думать как программист?

По сути, речь идет о более эффективном способе решения задач.

Данный пост ставит целью научить вас этому.

Прочтя его, вы более точно поймете, что нужно делать, чтоб находить лучшие решения.

На сегодняшний день ни одно большое SPA приложение не обходится без state management (управления состоянием). Для Angular по данному направлению есть несколько решений. Самым популярным из них является NgRx. Он реализует Redux паттерн с использованием библиотеки RxJs и обладает хорошим инструментарием.

В данной статье мы кратко пройдемся по основным модулям NgRx и более детально сосредоточимся на библиотеке angular-ngrx-data, которая позволяет сделать полноценный CRUD со state management за пять минут.

Эта статья является ответом на:

• Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose,
• Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose,
• Как сделать поиск пользователей по Github используя VanillaJS.

Целью статьи является:

• показать, что на Angular тоже можно быстро написать простое приложение, хотя это не его основной конек,
• показать плюсы приложения на Angular.

Целью статьи НЕ является:

• разжигание очередного холивара.

Всех, кому интересно, прошу под кат.

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

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

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

Именно поэтому была создана среда разработки StackBlitz, которая позволяет редактировать Angular CLI проекты в браузере. В ней сейчас пишутся примеры из официальной документации Angular.io!

Круто было бы быстро запустить любой Angular CLI проект с Github прямо в браузере, просто изменив URL-адрес?

На данный момент Angular является одним из самых популярных и быстроразвивающихся фреймворков. Одна из его сильных сторон — большой встроенный инструментарий для работы с формами.

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

В первой части речь шла о том, как начать работать с реактивными формами. В данной статье рассмотрим валидацию форм, динамическое добавление валидации, написание собственных синхронных и ассинхронных валидаторов.

Код примеров прилагается.

Введение

Одним из достоинств Angular является широкий набор инструментов “из коробки”, которые позволяют быстро создавать формы любой сложности.

В Angular существует 2 подхода к созданию форм:

Template-driven forms — подход, в котором ключевую роль играет шаблон компонента, и все описание производится в нем — этот подход является развитием работы с формами в AngularJS;

Reactive forms — новый подход для работы с формами в реактивном стиле. Описание формы происходит в компоненте в виде дерева объектов, после чего это дерево связывается с шаблоном. Все манипуляции (проверка валидности, подписка на изменение значения и прочее) производятся в компоненте, что делает работу более гибкой, удобной и предсказуемой.

В данной статье мы разберем, как начать работать с reactive forms на примере простой формы с валидацией и сообщениями об ошибках. Код примера.

Реактивные формы. Часть 2.