Разработка SPA приложения (навигация и роутинги в angular 7) Часть 8

Автор Vera Abramova
Разработка SPA приложения (навигация и роутинги в angular 7) Часть 8

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

Да мы нажимаем на одну ссылку с ответом запускается по электромашина промоушн — это мы чтим и нажимаем назад запускает Windows 10 точно также справедливо сингуляра мы просто должны обеспечить нашей инфраструктуре ангуляра указать фактически указать ссылочки. Какие очки в нашем случае давайте просто возьмем например мы добавим промоушена этом. Ну если посмотреть перед тем как — это сделать.

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

А мы например добавим промоушена этом — это первая составляющая 2 вставляя — это мы используем специальные декоратор router-link где указываем в нашем случае наш помощник на этом и используем специальный предопределённые контейнер router-outlet всё три составляющие. Давайте запустим наше приложение наберём индийскую Open чтобы открыть браузер приложения после того как он обидится и так как в прошлом уроке мы видим вас есть страница где у нас разбитая соответствующие компоненты карты. Давайте добавим навигацию. Запусти мне приложение в Visual Studio code давайте быстро пробежимся по нашим составляющим составляющим основным составляющим первая часть — это сама роутинг то есть массив. Как видите он сейчас пустой нам нужно обеспечить здесь соответствующую навигацию. Давайте добавим в соответствующей навигацию в нашу страницу about если мы глянем на верстку то по нажатию на ссылочку about мы переходим на соответствующую страницу. Давайте её добавим нам сюда в приложение для начала укажем навигация. То есть у каждого здесь объект?. Здесь есть специальные объекты у которой есть много различных свойств интересует в первую очередь простатита путь about и компонент компонент. У нас сейчас не отдавайте его добавим на будущее банк. Компаньон информируем сам компонент через консоль откроем эту консоль. Не забудьте, что у нас есть концепция страница компонент страница соответственно нужно будет добавить сюда about page такой же. Давайте наберём соответствующую команду из старых команд. Обратите внимание то есть. Индии generate с генерировать компонент в пачке 500 болты. Пейдж и компоненты about. Астафьева компонент в корне то есть не будем добавлять дополнительно бабочку компанец, а просто оставим components генерируем компонент в папке эбаут page daley мы уберем Space. Фолз specforce тесты и уберём файл стилей и так у нас добавилась соответствующая папочкой about page попросить внимание, что в модуле зарегистрирован ли этот компонент не зарегистрирован тут у меня пусть немножко корявый я удалю этот путь и автоматически добавлю новый путь папочку about я закинул соответствующий текст из верстки пожалуй пока, что возьму только сам текст, а здесь добавим также ссылочку наш компонент и так первая составляющая выполнено мы указали адрес. То есть если болит теперь нам нужно этот адрес указать компоненти автокомпонент. То есть просто указать здесь специальный. Линда роутер. Линк about вторая составляющая выполнено нужно сделать проверить третью составляющую то есть в наличии router-outlet обратить внимание, что вот этот вот компонент контейнеров он играет своего рода роль контейнеры. То есть когда мы с вами перейдём посылочки эбаут ангуляр автомате сгенерировать здесь модуль about то есть AWP about выглядеть примерно таким вот образом до соответственно когда мы перейдём на соответственно когда мы перейдём в домашнюю страницу. Даня случае. Нет здесь будет Bound Up About A akb и нет поэтому и не здесь нам не нужен моего уберём и. Здесь также ебал. Так как ангуляр делает автоматически так как у нас роутинга домашней странице нет. Давайте его тоже быстро добавим сюда. ПТС Отлично. Теперь у нас есть два пути. То есть — это Home page about также у нас есть роутер аутлет который присутствует у нас есть роутер d-link about router-link. Правда он не здесь добавлена отдавать его перенесём правильное место. Тоесть вот сюда, а здесь просто оставим пустую строку так как у нас есть соответствующий роутинг. Вот здесь. Да ты ещё раз. Сохранить все приложения теперь когда мы наведем с вами на ссылочку и болит внизу Chrome мне подсказывает, что я могу перейти на эту ссылочку. Обратите внимание всё работает верно домашняя страница тоже работает то есть. Теперь мы можем по крайней мере переходить по двум компонентам. Ну, что ж по большому счёту такому же принципу стоит добавить и promotional item навигацию то есть навигацию которая будет нас перебрасывать нашу карточку, но здесь есть один нюанс если.

0 комментариев
0

Читайте также