Реализовать 2 страницы:
- Родительская – список новостей.
- Дочерняя – страница новости. Для каждой новости должны отображаться название, описание/содержание, дата публикации, фото. На странице со списком новостей сделать кнопку, по нажатию на которую открывается модальное окно с формой:
- «Заголовок» - текстовое поле.
- «Текст» - текстовое поле.
- «Загрузить изображение» - кнопка, реализует функционал добавления фото (достаточно одной), есть возможность предпросмотра и удаления/замены.
- «Опубликовать новость» - кнопка, добавляет новость в начало списка. При этом уже загруженные ранее данные сохраняются. Добавленные новости хранить в storage браузера таким образом, чтобы после перезагрузки страницы они отображались первыми. По нажатию на пользовательскую новость действий не предусмотрено. Реализовать подгрузку данных по мере скроллинга страницы. Сверстать в соответствии с макетом, реализовать адаптив. НЕ подключать при этом набор библиотек с готовыми компонентами и стилями – нам интересны ваши собственные навыки вёрстки и реализации базовых простых компонентов (таких, как, например, модальное окно). Ссылка: https://www.figma.com/file/pWG5GyzlYRl427HX7JKE21/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5?type=design&node-id=0-1&t=fC30I5igrwV3Mzr6-0 Источник данных:
- Список новостей: https://webapi.autodoc.ru/api/news/1/10 (последние 2 параметра - номер страницы и количество элементов на ней).
- Отдельная новость: url приходит на этапе получения списка новостей, пример ссылки: https://webapi.autodoc.ru/api/news/item/avto-novosti/volkswagen_amarok_pickup
Использовать последнюю версию Angular.
This project was generated with Angular CLI version 17.0.3. Node version: v20.9.0
Здесь можно посмотреть результат, не разворачивая проект у себя.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.