{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a81db44e9a1584660cbad39"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"de5ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продолжаем разработку фронта для нашего сайта. Первая часть тут:","type":"unstyled","key":"4fdtq"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"6a815bbf8f89fb1b689b196b","originalUrl":"https://dzen.ru/a/aoFbv4-J-xtomxlr","publisherId":"5fb64ed739e0c373b671638e","publisherItemId":"-4365021395478752735","publisherName":"Движение-Жизнь","publisherAvatar":{"id":"631edd7735386357ec052c8c","groupId":223306,"imageName":"pub_5fb64ed739e0c373b671638e_631edd7735386357ec052c8c","namespace":"zen-logos","meta":{"mainColor":"#B0B0B0","origFormat":"JPEG"}},"title":"Фронтенд сайта на Angular 22 версии с нуля. Часть 1","publishTime":1786867528192,"isPublisherVerified":false,"image":{"id":"6a8166e361c7e301fd5933fb","groupId":271828,"imageName":"pub_6a815bbf8f89fb1b689b196b_6a8166e361c7e301fd5933fb","namespace":"zen_doc","meta":{"mainColor":"#080810","origFormat":"PNG"},"sizes":{"orig":{"width":688,"height":690},"scale_600":{"width":599,"height":600},"scale_1200":{"width":688,"height":690},"scale_2400":{"width":688,"height":690}}},"isPremium":false,"timeToReadSeconds":260}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"801d2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что за сайт я хочу разработать?","type":"header-two","key":"am1g3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сайт будет чем-то похож на \"Дзен\", с карточками статей, что-то типа такого:","type":"unstyled","key":"a52s3"},{"data":{"image":{"id":"6a81d6df30abab1c95f9659b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3ld38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я хочу написать базу знаний, но это пока тоже очень не точно. Прежде всего это будет отработка того что я когда-то изучил. Чтобы эти знания не потерялись в чертогах памяти. Это будет база данных в которая будет выдавать по первым буквам возможные результаты того что я когда туда записал. Потому как в том же дзене, чтобы воспользоваться поиском нужно идти в редактор. В общем, есть много претензий к дзену, и поэтому я хочу сделать свой дзен:","type":"unstyled","key":"eqm24"},{"data":{"image":{"id":"6a81d8e70def7c1d8c88eb1c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a7olj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Планировка будущего сайта","type":"header-two","key":"1o6ri"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":93,"offset":149}],"inlineStyleRanges":[],"text":"Прежде чем начинать какую то разработку фронта, нужно представлять что у меня будет за сайт и как он будет выглядеть. Я буду основываться на проекте \"Tik-Talk\" от Ивана Чернякова, который я прошел зимой и даже что-то понял, а что-то не очень. (ссылка на ютуб)","type":"unstyled","key":"4mou0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я привожу скриншоты того, что я делал по курсу Ивана:","type":"unstyled","key":"2srde"},{"data":{"image":{"id":"6a81d042bc11412912481b19"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"страница аутентификации (или входа, кому как нравится)","type":"atomic:image","key":"b30e9"},{"data":{"image":{"id":"6a81d382f4a51b1a324a3945"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"страница поиска","type":"atomic:image","key":"4d3d9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За основу я возьму эту поделку. Только поменяю боковую колонку, вид карточек, строка поиска будет одна, наверное. Что в итоге получится, я еще сам не знаю. То что вы видите на этих двух скриншотах, это вполне себе рабочий экземпляр. Под который мной был написан бэкенд с вот такими \"ручками\":","type":"unstyled","key":"72vcq"},{"data":{"image":{"id":"6a81d504bc114129125136c6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8sfp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настало время из всего этого собрать полноценный сайт. Все конфигурации angular я буду делать в процессе разработки. Потому как в данный текущий момент времени я не очень понимаю что к чему.","type":"unstyled","key":"7046a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С чего начать?","type":"header-two","key":"ee512"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый раз я задаюсь этим вопросом. Глядя на карточку дзена, можно спроектировать свою карточку, понять какие элементы на ней располагаются:","type":"unstyled","key":"9bu6e"},{"data":{"image":{"id":"6a81dd0cf247d517a373d2cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c922s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У меня фото поста или статьи будет слева, дата выхода статьи или поста, заголовок (если есть) и первые (пусть будет) 100-150 символов, потом сколько именно. Ну и соответственно лайк, дизлайк, комментарии (со счетчиком комментов), ну и количество просмотров. Разделитель в виде линии - практика покажет нужен или нет. Возможно меня устроит граница у каждой карточки. ","type":"unstyled","key":"70vn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подготовка к разработке","type":"header-two","key":"frhn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надо убрать все лишнее со страницы, заодно пройдемся по основным файлам проекта которые сейчас будут изменены. Открываем директорию src и поехали...","type":"unstyled","key":"dcn71"},{"data":{"image":{"id":"6a81ecc1cac5927b8d33617f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"index.html","type":"atomic:image","key":"a88r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main.ts и styles.scss пока без изменений. Переходим в директорию src/app и очищаем там app.html","type":"unstyled","key":"3r699"},{"data":{"image":{"id":"6a81edcd81a0ec2bb17eb047"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержимое ниже является лишь заполнителем и может быть заменено. \nУдалите шаблон ниже чтобы приступить к работе над проектом!","type":"atomic:image","key":"3pldh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почти очищаем, оставляем лишь

:","type":"unstyled","key":"f3cep"},{"data":{"image":{"id":"6a81efc5db50fe662e8eedbf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5bkf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну собственно и достаточно. Запускаем сервер командой ng serve и радуемся единственной строке в браузере. ","type":"unstyled","key":"f8l1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Главная страница","type":"header-two","key":"eb9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данной странице будут располагаться карточки статей. Данная страница будет являться первым компонентом сайта. Генерируем данную страницу (два вида команды полная и короткая):","type":"unstyled","key":"9jfhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ng generate component pages/main-page --skip-tests=true\nng g c pages/main-page --skip-tests=true","type":"unstyled","key":"8duae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тесты я выполнять не буду поэтому включаю опцию --skip-tests=true ","type":"unstyled","key":"16nht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но по уму, лучше в основной настройке выключить создание файлов с тестами, чем потом удалять файлы тестов или при каждой генерации компонентов писать дополнительные опции. Для этого открываем файл angular.json в корне проекта и дописываем строчку сюда:","type":"unstyled","key":"b3bsp"},{"data":{"image":{"id":"6a81f41a61c7e301fd5a699c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"rcqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот у нас уже есть первый компонент, главной страницы, откроем main-page.ts WeStorm почему-то всегда подсвечивает строчку imports приходится в ручную нажимать make MainPage standalone","type":"unstyled","key":"22i98"},{"data":{"image":{"id":"6a81f55dbc114129128e7917"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"68bcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ИИшечка говорит на этот счет мол добавь в схематик angular.json'a строчку \"standalone: true\", но строка эта всё равно не добавляет эту запись. Так что похоже придется ручками тыкать. ","type":"unstyled","key":"dlkhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ладно, компонент создан. Нужно его прописать его в файле app.routes.ts","type":"unstyled","key":"a3shb"},{"data":{"image":{"id":"6a81f89bcac5927b8d49c937"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4jqmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, в главном app.html файле я оставляю строчку, которая отвечает за роутинг: которая и будет при обращении к корню сайта выдавать мой компонент MainPage, в котором есть свой файл main-page.html в котором, в свою очередь лишь строчка

main-page works!

Которую позже я удалю и заменю генератором карточек. А пока главную страницу нужно оформить стилями.","type":"unstyled","key":"b1dhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация main-page","type":"header-two","key":"4vtre"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":19,"offset":87},{"key":2,"length":13,"offset":120}],"inlineStyleRanges":[],"text":"Шрифты я буду использовать из семейства JetBrainsMono-xxx.woff2, которые можно взять с офф_сайта JetBrains, а можно и с моего я-диска. На тот случай если JB, опять что-то заблочит.","type":"unstyled","key":"3da61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В проекте есть папочка public, в ней лежат все файлы которые должны быть расшарены при работе сервера, там я создам папку assets и в ней fonts, куда помещу все файлы вебшрифтов (с расширением woff2)","type":"unstyled","key":"6lh0c"},{"data":{"image":{"id":"6a81fd1a4e90bf23222697de"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6reoh"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":14,"offset":77}],"inlineStyleRanges":[],"text":"А так же папку img, где будут файлы лого и фона страницы. Ну и скопирую файл background.jpg вы же можете выбрать какой угодно файл фона. ","type":"unstyled","key":"5qt31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим файл fonts.scss в директории src:","type":"unstyled","key":"s9i5"},{"data":{"image":{"id":"6a81fe86f247d517a3b2bd3b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a6ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где пропишем все нужные шрифты. И подключим fonts.scss в главный файл стилей styles.scss а так же подключим фоновую картинку. Да и просто сделаем минимальные глобальные стили:","type":"unstyled","key":"ah97l"},{"data":{"image":{"id":"6a81ff4b30abab1c9545b400"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6k4fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну вот, теперь можно посмотреть изменения:","type":"unstyled","key":"b6nvd"},{"data":{"image":{"id":"6a820054c39a912df0f2d4d2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ftqlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данном этапе, с главной страницей всё, будем разрабатывать компоненты для данной страницы.","type":"unstyled","key":"9fddj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем разрабатывать карточку статьи / поста","type":"header-two","key":"ekhds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За основу я возьму ту, которая у меня уже есть и приведу к виду \"почти как в дзен\"","type":"unstyled","key":"788sq"},{"data":{"image":{"id":"6a81e062e9a1584660d4d8c9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"из этой карточки я и буду творить новую","type":"atomic:image","key":"48qp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Генерируем новый компонент, все компоненты интерфейса страниц я буду помещать в директорию common-ui ","type":"unstyled","key":"dq2m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ng g c common-ui/post-card","type":"unstyled","key":"8qpqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После чего можно удалить запись

main-page works!

из main-page.html и на ее место поместить . Не забываем прописывать в созданном компоненте standalone: true, иначе импорт не сработает и будет ошибка.","type":"unstyled","key":"fbt0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нужно сформировать карточку, так как бэкенд пока не работает, я возьму какую-то тестовую фотку, найду соответствующие иконки like, dislike, views и пропишу ручками все пути.","type":"unstyled","key":"809om"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотел за основу взять карточку что была, но ИИшечка гугла мне предложила другой вариант, я его попробовал - и мне понравилось:","type":"unstyled","key":"30t82"},{"data":{"image":{"id":"6a8353386f87ef30a966ba45"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"причем даже нажатия по лайкам-дизлайкам работают!!! Правда изменяются сразу на трех карточках","type":"atomic:image","key":"48o1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, как же выглядит карточка под капотом? В каждом компоненте три файла, html, scss и ts и тут не исключение:","type":"unstyled","key":"cab0d"},{"data":{"image":{"id":"6a83544f37d269493c6d3949"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"post-card.ts","type":"atomic:image","key":"eigv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл стилей, довольно таки объемный:","type":"unstyled","key":"6e9r6"},{"data":{"image":{"id":"6a8354dc831e6619307efba2"},"images":[{"id":"6a8354dc831e6619307efba2"},{"id":"6a8354e36444b26f5ad20dde"},{"id":"6a8354e639e69b36afbc0f49"},{"id":"6a83550f831e6619307f5d2e"}],"contents":{"6a8354dc831e6619307efba2":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"at25j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл html тоже довольно таки непростой:","type":"unstyled","key":"9upp"},{"data":{"image":{"id":"6a83559237d269493c6fc3c8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5tjjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Остается только его подключить в main-page (как в шаблоне, так и main-page.ts):","type":"unstyled","key":"deopk"},{"data":{"image":{"id":"6a8355e54f7c4816e468b6b0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7hf88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В шаблоне просто карточка скопирована три раза, потом она будет генериться сама, на основе данных, полученных из PostgreSQL","type":"unstyled","key":"20os0"},{"data":{"image":{"id":"6a835648c8c0ed0f477ba1aa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4bt8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом, пожалуй, закончу статью. ","type":"unstyled","key":"87t49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продолжение...","type":"unstyled","key":"1m115"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"6a8c84e1b0a54f185225ddc2","originalUrl":"https://dzen.ru/a/aoyE4bClTxhSJd3C","publisherId":"5fb64ed739e0c373b671638e","publisherItemId":"-4365021395478752735","publisherName":"Движение-Жизнь","publisherAvatar":{"id":"631edd7735386357ec052c8c","groupId":223306,"imageName":"pub_5fb64ed739e0c373b671638e_631edd7735386357ec052c8c","namespace":"zen-logos","meta":{"mainColor":"#B0B0B0","origFormat":"JPEG"}},"title":"Фронтенд сайта на Angular 22 версии с нуля. Часть 3","publishTime":1787595568269,"isPublisherVerified":false,"image":{"id":"6a8c8b1e9f2d295ebda8c40a","groupId":271828,"imageName":"pub_6a8c84e1b0a54f185225ddc2_6a8c8b1e9f2d295ebda8c40a","namespace":"zen_doc","meta":{"mainColor":"#3070B0","origFormat":"PNG"},"sizes":{"orig":{"width":768,"height":567},"scale_600":{"width":600,"height":443},"scale_1200":{"width":768,"height":567},"scale_2400":{"width":768,"height":567}}},"isPremium":false,"timeToReadSeconds":72}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"9u251"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"en8nq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"k5ik2vCmlHjURqZEFu6N"}],"entityMap":{"0":{"data":{"url":"https://www.youtube.com/watch?v=BVIffUyYlUk&t=4s"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://www.jetbrains.com/ru-ru/lp/mono/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://disk.yandex.ru/d/m1_Mqo15QiPRcg"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://disk.yandex.ru/i/7bfP7Ph_KN1R3A"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}