Восстановление социальной сети.

Анализ

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

В основном каждое сообщение представляет собой небольшую таблицу, а лента новостей - это строка таблиц.

Bootstrap

Поскольку мы хотим иметь адаптивную таблицу, мы будем использовать бутстрап. Для этого в терминале кода Visual Studio нам нужно написать команду 'npm install bootstrap' и добавить путь к файлам начальной загрузки css в файле конфигурации 'angular.json' .

Таблица

Нам нужно сделать 2 компонента: новостную ленту и пост. В компоненте новостной ленты мы передадим массив сообщений. Наша таблица в компоненте post будет иметь 4–5 строк и 3 столбца. В некоторых ячейках есть пара строк, для чего мы создадим крошечную таблицу внутри ячейки.

Для генерации компонентов мы будем использовать угловой CLI. В терминале мы пишем 2 команды «ng g c news-feed», «ng g c news-feed / post-feed». Следующим шагом является создание прототипа таблицы, для которой нам нужно использовать классы начальной загрузки 'row', 'col', 'container' .

Модель

Модель содержит информацию для нашего поста. Нам просто нужно передать его как компонент и связать.

В «AppComponent» мы создадим массив моделей сообщений и передадим их в ленту новостей.

‘NewsFeedComponent‘ имеет цикл сообщений. Мне нравится иметь пару компонентов, потому что у каждого из них разные обязанности.

Последние сведения

Скелет у нас есть, осталось добавить только мышцы. Под мышцами я подразумеваю набор дополнительных стилей.

Библиотека Bootstrap очень мощная. Он содержит стили для кнопок, отступов и значков.

Чтобы аватар получился круглым, мы создадим свои стили.

Последний шаг - создание модели с тестовыми данными.

Результат

Создать новостную ленту из социальной сети оказалось не так уж и сложно.

Если вам нужно присмотреться к проекту вот ссылка.

Первоначально опубликовано на сайте http://tomorrowmean never.com 22 ноября 2020 г.