#6 – Роутинг в Angular

В обычных сайтах, когда вы переходите по ссылке, браузер загружает новую HTML-страницу. В Angular всё работает иначе. Это SPA — одностраничное приложение. Это значит, что страница загружается одна, а вот содержимое внутри неё меняется динамически. И за это отвечает роутинг.

Роутинг — это механизм, который позволяет отображать нужный компонент в зависимости от адреса в браузере. Например, при переходе на /about отображается компонент с описанием сайта, а при /note/5 — компонент с подробностями конкретной заметки. Всё это работает без перезагрузки, быстро и плавно.

Настраивается всё просто. Вы создаёте список маршрутов — какие пути к каким компонентам привязаны — и передаёте его в приложение. А чтобы Angular знал, куда именно подставлять нужный компонент, используется специальный тег <router-outlet>. Именно в нём будет появляться контент в зависимости от адреса.

Такой подход позволяет создать полноценную структуру сайта: главную страницу, страницу «О нас», детальную страницу элемента и любую другую. При этом вы не грузите десятки HTML-файлов, а просто переключаете компоненты внутри уже загруженного приложения.

Angular-роутинг — это не просто навигация. Это ещё и возможность работать с параметрами в URL, защищать маршруты, делать ленивую загрузку страниц и многое другое. Но даже в базовом варианте — это мощный инструмент, с которого начинается создание любого современного интерфейса.