{"id":18008521,"url":"https://github.com/gurov/knigopis2","last_synced_at":"2026-04-09T16:09:06.497Z","repository":{"id":86577829,"uuid":"85200051","full_name":"gurov/knigopis2","owner":"gurov","description":"Angular 2 клиент для api.knigopis.com, шаг за шагом","archived":false,"fork":false,"pushed_at":"2017-09-09T04:10:45.000Z","size":117,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T21:43:44.795Z","etag":null,"topics":["angular-cli","angular2","angular4","bootstrap4","rxjs","typescript","ulogin"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/playlist?list=PLR0eLsPS8yxOfKiTFOmlBflzF_DmL-kFd","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gurov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-16T13:38:56.000Z","updated_at":"2019-10-08T11:09:13.000Z","dependencies_parsed_at":"2023-03-02T21:30:20.762Z","dependency_job_id":null,"html_url":"https://github.com/gurov/knigopis2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurov%2Fknigopis2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurov%2Fknigopis2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurov%2Fknigopis2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurov%2Fknigopis2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gurov","download_url":"https://codeload.github.com/gurov/knigopis2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174456,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-cli","angular2","angular4","bootstrap4","rxjs","typescript","ulogin"],"created_at":"2024-10-30T01:19:02.541Z","updated_at":"2026-04-09T16:09:06.450Z","avatar_url":"https://github.com/gurov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Knigopis2\n\n\n[![CircleCI](https://circleci.com/gh/gurov/knigopis2/tree/master.svg?style=shield\u0026circle-token=17f0b5b5162c47741913d49d9fafcaa6232ca61a)](https://circleci.com/gh/gurov/knigopis2/tree/master)\n\nAngular 2 клиент для [api.knigopis.com](https://github.com/knigopis/api.knigopis.com).\n\nЕсть такой сайт [www.knigopis.com](http://www.knigopis.com/) — дневник читателя и сервис учёта прочитанных книг. Его создатель - мой друг [Роман](http://github.com/rnixik). Клиентская часть сайта Книгописи написана на первом Ангуляре, а в данном проекте я пытаюсь написать клиентскую часть на Ангуляре 2 и параллельно изучаю его. Для работы с книгами использую прокси и [api.knigopis.com](https://github.com/knigopis/api.knigopis.com).\n\n## Как попробовать?\n\nПосмотреть рабочую версию этого репозитория можно тут: [alpha.knigopis.com](http://alpha.knigopis.com).\n\nЧтобы самому попробовать запустить проект локально, нужно сделать следующее:\n1) Установить [Angular cli](https://cli.angular.io/) (будет запускаться локальный сервер с прокси);\n2) Клонировать репозиторий: `git clone https://github.com/gurov/knigopis2`;\n3) Зайти в полученный резозиторий `cd knigopis2`;\n4) Установить зависимости `npm i`\n5) Запустить проект `npm run start`\n\n## Разработка шаг за шагом\nСсылки на видео разработки доступны по клику для каждой части.\n\n### Часть 1\n\n1) О сайте книгописи\n2) Костяк проекта на Angular 2\n3) Настройка прокси\n\n[![Книгопись и Angular 2, часть 1](http://img.youtube.com/vi/yC49u1Y5faE/mqdefault.jpg)](http://www.youtube.com/watch?v=yC49u1Y5faE \"Книгопись и Angular 2, часть 1\")\n\n### Часть 2\n\n1) Создаем bookService для обращения к api\n2) RxJs и Observable объекты\n4) Модели Book, User, интерфейс List\n3) Вывод списка\n\n[![Книгопись и Angular 2, часть 2](http://img.youtube.com/vi/TSANCWd1kNk/mqdefault.jpg)](http://www.youtube.com/watch?v=TSANCWd1kNk \"Книгопись и Angular 2, часть 2\")\n\n\n### Часть 3\n\n1) Обработка ошибок для bookService\n2) Расширяем настройки прокси\n4) Добавляем UserService\n3) Выносим обработку запросов к http сервису в отдельный файл\n\n[![Книгопись и Angular 2, часть 3](http://img.youtube.com/vi/HbL1dmYIhdQ/mqdefault.jpg)](http://www.youtube.com/watch?v=HbL1dmYIhdQ \"Книгопись и Angular 2, часть 3\")\n\n### Часть 4\n\n1) Подключаем Bootstrap 4\n2) Создаем HomeComponent\n3) Добавляем главное меню\n\n[![Книгопись и Angular 2, часть 4](http://img.youtube.com/vi/s42urb3xkzY/mqdefault.jpg)](http://www.youtube.com/watch?v=s42urb3xkzY \"Книгопись и Angular 2, часть 4\")\n\n### Часть 5\n\n1) Создаем UserBookListComponent\n2) Добавляем getUserBooks функцию в UserService для получения списка книг\n3) Расширяем модель Book\n4) Прописываем роутинг на страницу пользователя\n\n[![Книгопись и Angular 2, часть 5](http://img.youtube.com/vi/DGSUFjsutnw/mqdefault.jpg)](http://www.youtube.com/watch?v=DGSUFjsutnw \"Книгопись и Angular 2, часть 5\")\n\n### Часть 6\n\n1) Добавляем отписку от роута в UserBookListComponent\n2) Создаем BookComponent\n3) Добавляем getUserInfo в UserService\n4) Форматируем UserBookListComponent\n4) Форматируем HomeComponent\n\n[![Книгопись и Angular 2, часть 6](http://img.youtube.com/vi/Nt9FXoWvKpI/mqdefault.jpg)](http://www.youtube.com/watch?v=Nt9FXoWvKpI \"Книгопись и Angular 2, часть 6\")\n\n### Часть 7\n\n1) Добавляем оглавление (Bootstrap 4: list groups)\n2) Адаптируем под широкие экраны и мобильные телефоны (Bootstrap 4: `.push-md-*` and `.pull-md-*`)\n3) Добавляем сортировку по годам (Angular 2 Pipe: yearSort)\n\n[![Книгопись и Angular 2, часть 7](http://img.youtube.com/vi/iwFsj2p3VOg/mqdefault.jpg)](http://www.youtube.com/watch?v=iwFsj2p3VOg \"Книгопись и Angular 2, часть 7\")\n\n### Часть 8\n\n1) Добавляем поиск по книгам (BookSearchPipe)\n2) Добавляем анимацию загрузки книг (CSS3 лоадер)\n3) Выводим ошибку загрузки книг\nPS) Извините, немного замешкался во второй половине видео\n\n[![Книгопись и Angular 2, часть 8](http://img.youtube.com/vi/dzLO7Irev6I/mqdefault.jpg)](http://www.youtube.com/watch?v=dzLO7Irev6I \"Книгопись и Angular 2, часть 8\")\n\n### Часть 9.1\n\n1) Добавляем виджет авторизации (uLogin)\n2) Добавляем initAuth функцию в window (RxJs Subject, AuthService)\n3) Получаем access-token (UserService, getCredentials, httpPost)\n\n[![Книгопись и Angular 2, часть 9.1](http://img.youtube.com/vi/DMHXDjKqsn0/mqdefault.jpg)](http://www.youtube.com/watch?v=DMHXDjKqsn0 \"Книгопись и Angular 2, часть 9.1\")\n\n### Часть 9.2\n\n1) Изменяем модели (Credentials, User)\n2) Добавляем заголовок авторизации к запросам (ApiSerivice)\n3) Записываем токен в localStorage (AuthService)\n4) Запоминаем авторизованного пользователя (AuthService)\n4) Прячем uLogin меню и показываем юзера (AppComponent)\n\n[![Книгопись и Angular 2, часть 9.2](http://img.youtube.com/vi/kOzXQXm6Aks/mqdefault.jpg)](http://www.youtube.com/watch?v=kOzXQXm6Aks \"Книгопись и Angular 2, часть 9.2\")\n\n### Часть 10\n\n1) Добавляем в верхнее меню ссылки на свой список книг и на страницу добавления книги (AppComponent)\n2) Добавляем компоненту редактирования книги (BookEditComponent)\n3) Добавляем ссылку с книги на страницу редактирования (BookComponent)\n4) Добавляем метод put в ApiService\n5) Добавляем методы get и update в BookService\n\n[![Книгопись и Angular 2, часть 10](http://img.youtube.com/vi/KFVFLhlFko8/mqdefault.jpg)](http://www.youtube.com/watch?v=KFVFLhlFko8 \"Книгопись и Angular 2, часть 10\")\n\n### Часть 11\n\n1) Добавляем метод delete в ApiService\n2) Создаем общую функцию getRequestOptionsArgs для методов ApiService\n3) Добавляем метод remove а BookSerice и изменяем update\n4) Добавляем методы saveAndClose, saveAndAdd, remove в BookEditComponent\n\n[![Книгопись и Angular 2, часть 11](http://img.youtube.com/vi/EW-Cgu5fA1w/mqdefault.jpg)](http://www.youtube.com/watch?v=EW-Cgu5fA1w \"Книгопись и Angular 2, часть 11\")\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgurov%2Fknigopis2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgurov%2Fknigopis2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgurov%2Fknigopis2/lists"}