(В этой статье нет примеров кода - сделано умышленно, так как статья преследует цель "обсудить", а не "научить")

В чем разница?

Очевидный вопрос, а чем одна вафля отличается от другой? Если не говорить о банальном "Angular - фреймоврк, а React - библиотека", то, в общем-то, на первый взгляд, ничем особенно не отличаются :) Что одна технология позволяет строить SPA приложения, что другая. Можно было бы сказать, что у Angular есть поддержка SSR "из-под капота", а для SSR на React-е нужно использовать дополнительную технологию вроде NextJs - но не сказал бы, что это такое уж существенное отличие. И там, и там присутствует концепция компонентов, шаблонов, состояния... но или различия все же есть?

Разделение ответственности

Если React предоставляет нам концепцию "вот держи тебе компонент, делай с ним что хочешь - и вообще говоря запомни - все, это компонент", то в Angular-е свободы творчеству явно меньше:

• компонент - это элемент, определяющий логику формирование представления. Компонент обладает своим шаблоном (html-разметка с блэкджеком) и стилями. В отличие от React-а у Angular-а есть встроенный механизм изолирования стилей компонентов, что, очевидно, может быть очень удобным для больших проектов. Что на мой личный взгляд, возможность в Angular-е вынести html-разметку в отдельный файл - гораздо удобнее, чем писать ее в файле с логикой представления, как это сделано в React-е.
• директивы - по сути директивы можно назвать short-hand-ами для реализации условного рендеринга, динамического определения стилей для компонентов и так далее.
• модули - ng-модули, позволяющие управлять объемом кода, подгружаемым в райнтайм, а также задающие границы DI-контейнеров.
• сервисы - классы с бизнес-логикой и логикой общения с backend-ом, внедряются в компоненты при помощи встроенного в Angular механизма DI.
• guards, interceptors и многое другое

И хотя либерально настроенные программисты могут пожаловаться, что наличие упомянутых выше концептов сильно ограничивает программиста в методах разработки, автор статьи лично считает это плюсом - когда программная архитектура приложения диктуется фреймворком сложнее написать говнокод :)

Работа с DOM

Способы того, как две технологии обращаются с DOM-ом идейно похожи, однако небольшое концептуальное отличие все же есть. В React строится виртуальное дерево компонентов и при рендеринге рисуется разметка, которую вернула функция рендеринга компонента. В Angular-е также используется виртуальное дерево, однако, на этапе компиляции, Angular сопоставляет теги из шаблонов с компонетами при помощи CSS селекторов. Таким образом, технически возможно написать такой компонент, который будет применяться как логика отображения для всех, например, тегов button. Хотя подобная возможность опасна для использования в виду того, что подобная возможность "замаппиться" на любой тег в разметке сильно неочевидна, в ряде ограниченных случаев такая возможность может быть очень полезной.

Работа с состоянием

Вот тут кроется самое большое отличие в концепциях двух технологий. Компоненты в React могут обладать состоянием и передавать его в неизменяемым виде дочерним компонентам. Компоненты же в Angular могут не только передавать состояние "вниз", но и, внимание, "вверх". Передача состояния от ребенка к родителю основана на принципе событийной модели. Родительский компонент подписывается на события дочернего компонента, благодаря чему и может увидеть изменения. В общем-то подобный же механизм каждый прожженый кодер на React-е хотя бы раз, но реализовывал на основе обычных callback-ов, передаваемых в дочерний компонент через пропсы.

Хуки ЖЦ

Ну тут все до боли просто - Angular заботиться о вашем бэкендерском прошлом! Никаких непонятный хуков посреди последовательных инструкций функций - у вас есть привычные классы (компонентов) и, чтобы реагировать на события ЖЦ компонента, вы просто переопределяете метод нужного интерфейса. Как в старые добрые времена классовых компонетов!

Эффекты

Как и в React в Angular можно настроить эффекты на изменения значения чего-нибудь, однако если в React-е эффекты основаны на хуках, то в Angular используется классический паттерн Observer. Вы объявляете наблюдаемое состояние как сигнал и затем эффект, внутри которого используется сигнал. Для упрощения вашей жизни Angular автоматически подписывает эффект на все используемые сигналы внутри него (нет необходимости перечислять dependencies вручную). Кроме того, Angular предоставляет ряд функций а-ля "синтаксический сахар" для построения типовых эффектов.

Роутинг из коробки

Думаю, тут все понятно из названия :) Вместо того, чтобы маяться с осознанием принципов работы разных роутеров из разных библиотек и надстроек над React-ом, в Angular мы просто используем стандартный "коробочный" роутер. К тому же, концепт guard-ов (а-ля функций, определяющих возможность доступа к урлу) существенно упрощает реализацию защищенных урлов в сравнение с миром React-а.

Что же касается инструментов для управления глобальным состоянием (Redux)... не просто же так статья названа как Часть 1 :)