Графическое совершенство — это то, что дает зрителю наибольшее количество идей в кратчайшие сроки с наименьшим количеством чернил и на наименьшем пространстве.
Эдвард Тафти
Введение
Это визуальная шпаргалка по Angular. Если нужно что-то вспомнить, то достаточно глянуть на нарисованную схему, вместо поиска этой информации в документации. Картинки не просто упрощают сложные вещи — они обогащают ваши воспоминания посредством ассоциативной памяти, позволяя вам уловить больше. Думаю, что эта публикация будет в первую очередь полезна тем, кто уже изучал Angular, но что-то забыл. Так же она должна быть полезна экспертам из схожих платформ разработки, если вдруг им придется столкнутся с Angular. И конечно же картинки помогут новичкам, послужив некой отправной точкой в изучении этой платформы.
Лично мой интерес был в систематизации Angular. Я попытался выделить основные вещи и посмотреть на них в некой структуре. На мой взгляд, Angular не идеален и глядя на картинки можно увидеть некоторые шероховатости, но с другой стороны становится более понятно, почему у них получилось то, что получилось и можно предположить куда это все двигается.
Рисовал я все это в PowerPoint.
Рисунки
1) Module - основной контейнер Angular приложения:
![Рисунок 1: Модуль Рисунок 1: Модуль](https://habrastorage.org/getpro/habr/upload_files/4ec/de2/3ae/4ecde23ae9581013687b7990cd27ba1a.png)
2) Модулей может быть несколько и все они являются некими точками входа для движка Angular, который превращает код на Αngular в работающее Web приложение:
![Рисунок 2: Модули Angular Рисунок 2: Модули Angular](https://habrastorage.org/getpro/habr/upload_files/bed/8ad/c76/bed8adc76d9ab4f054f079424125de6c.png)
3) Компонеты. В Angular мы работаем всегда с одной html страницей (Single-page application), в которой отображаются и меняются различные компонеты:
![Рисунок 3: Компоненты Рисунок 3: Компоненты](https://habrastorage.org/getpro/habr/upload_files/d6e/a63/b00/d6ea63b006f44dfe52746665ab6e02a9.png)
4) Компонента - это html шаблон, связанный с ним класс на Typescript и CSS стили:
![Рисунок 4: Состав компонеты Рисунок 4: Состав компонеты](https://habrastorage.org/getpro/habr/upload_files/d51/04e/ec4/d5104eec43a0f60eb2ef2420998d687c.png)
5) Как это выглядит все вместе:
![Рисунок 5: Общая схема Рисунок 5: Общая схема](https://habrastorage.org/getpro/habr/upload_files/b96/c4a/b69/b96c4ab699c30fa497350d1cf8cd4fec.png)
6) Маршрутизация (Routing) - для загрузки разных комопнент по ссылке в рабочую страницу используется Routing. Он реализован как Модуль, внутри которого есть массив Routes в котором прописывается соответствие между ссылкой на компоненту и самой компонентой:
![Рисунок 6: Маршрутизация (Routing) Рисунок 6: Маршрутизация (Routing)](https://habrastorage.org/getpro/habr/upload_files/a98/67c/b3f/a9867cb3f470ca6a4487a4c04fd58171.png)
7) В Angular я насчитал аж 8 способов обмена данными:
![Рисунок 7: Обмен данными между компонентами Рисунок 7: Обмен данными между компонентами](https://habrastorage.org/getpro/habr/upload_files/4f1/915/002/4f19150028ed240d808d2e154777dd55.png)
8) Жизненный цикл компонента (Component Lifecycle):
![Рисунок 8: Жизненный цикл компонента (Component Lifecycle) Рисунок 8: Жизненный цикл компонента (Component Lifecycle)](https://habrastorage.org/getpro/habr/upload_files/0fe/144/5f9/0fe1445f9501ab547aab3857aa8e9bd3.png)
Заключение
Далеко не все удаплось нарисовать. За бортом остались как минимум:
RxJS
Signals
DestroyRef, takeUntilDestroyed
afterRender, afterNextRender
авторизация
как прописать в маршрутизаторе переход на внешний ресурс
И многие другие моменты и нюансы. Если данная статься наберет 100 "лайков", то я нарисую, то что осталось за бортом.
Идея была сделать "шпаргалку", а не углубленный обзор всех возможностей и решений Angular.
Надеюсь эти рисунки, помогут как тем кто первый раз столкнулся с этой платформой, так и тем, кто просто хочет освежить свои знания.
enkryptor
Совсем забыли про DI.
alex_29 Автор
Не совсем забыл. Пару намеков есть на первой и 7-ой картинке. Но сам DI это отдельная история, он присутствует в Angular, как и в Spring boot, как и много где ещё.