Angular_rs2021q1: Book Shop

[coriander31415]

https://github.com/rolling-scopes-school/lectures/blob/master/Angular/angular-course.md - Курс Angular

[coriander31415]

Модуль #1. Angular intro. TypeScript

• Введение в курс.
• Общие сведения об Angular.
• Что такое Angular-cli.
• Компиляция приложения. Angular Ivy.
• Обработка событий в Angular.
• Основы Typescript.
• Выдача первого задания.

Материалы для изучения

• Лекция (видео)
• Примеры из видео
• Слайды
• https://www.typescriptlang.org/docs/home.html
• https://www.typescriptlang.org/docs/handbook/basic-types.html
• https://www.typescriptlang.org/play/index.html
• https://cli.angular.io/
• https://angular.io/cli
• https://angular.io/tutorial

---

Задание №1: Intro

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-intro.md

Требования:

1. Angular-CLI
   • [x] Установить Angular-CLI
   • [x] Просмотреть CLI QuickStart.
   • [x] Просмотреть Style Guide.
   • [x] Просмотреть СLI Commands.
2. Создание проекта:
   • [x] С использованием angular-cli создайте новый проект (ng new bookShop) и загрузите его на гитхаб в репозиторий с названием book-shop.
   • [x] В package.json заменить содержимое команды start на ng lint && ng serve -o.

Рекомендации к заданиям:

• В проекте создаем файл, в котором вы будете описывать что сделанно в конкретном PR, что бы было легче ориентироваться вам самим и проверяющим.
• Сначала импортируем Ангуляр пакеты, затем сторонние пакеты, затем свои. Разделяем блоки импортов пустой строкой.
• Поля класса описываем в следующей последовательности, блоки полей и методы отделяем пустой строкой:
  (1) - input,
  (2) - output,
  (3) - публичные поля,
  (4) - приватные поля,
  (5) - constructor,
  (6) - методы жизненного цикла с префиксом ng,
  (7) - обработчики событий с префиксом on,
  (8) - публичные методы,
  (9)- приватные методы,
• Модификатор public для полей и методов не пишем, потому что они public по-умолчанию.
• То, к чему нужен доступ в темплейте должны быть public, а не private.
• В корневой папке приложения app должны быть только корневой компонент и корневой модуль. Остальные файлы должны быть разложены по папкам.
• Модели именовать ProductModel, CartModel, и т. д.
• Проект организовать по функционалу, а не по типам cущностей:
  (1) - components,
  (2) - models,
  (3) - services,
  (4) - shared,
  (5) - directives,
  (6) - pipes,
  (7) - core.

[coriander31415]

Модуль #2. Angular. Components.

• Базовая структура приложения.
• Что такое Components, шаблоны.
• Двухсторонее связывание.
• Жизненный цикл Components.
• Взаимодействие Components.
• Создание и использование Components в приложении.

Материалы для изучения:

• Лекция(видео)
• Примеры из видео
• Слайды
• https://angular.io/tutorial
• https://angular.io/tutorial/toh-pt1
• https://angular.io/tutorial/toh-pt2
• https://angular.io/tutorial/toh-pt3
• https://angular.io/guide/architecture-components
• https://angular.io/guide/displaying-data
• https://angular.io/guide/template-syntax
• https://angular.io/guide/lifecycle-hooks
• https://angular.io/guide/component-interaction
• Механизм ChangeDetection - https://webdraftt.com/tutorial/angular-change-detection
• Angular 2020Q1. Components - https://youtu.be/rY_FWXmh4QI

---

Задание №2: Components

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-components.md

Требования:

• [x] 1. Создать компонент BookComponent. Используйте его в AppComponent.
• [x] Модель книг BookModel описать интерфейсом:
  • name: string;
  • description: string;
  • price: number;
  • category: enum (Создайте enum с несколькими категориями);
  • createDate: number;
  • isAvailable: boolean;
• [x] 2. Вывести свойства BookComponent в его темплейте.
• [x] 3. Добавить кнопку Buy в шаблон BookComponent. Реализовать обработчик события onBuy по нажатию на кнопку Buy, который должен добавлять книгу в корзину. BookComponent реализовать как презентационный компонент с input и output, без зависимостей. Если товара нет, кнопку Buy делать недоступной.
• [x] 3. Создать компонент CartComponent и использовать в AppComponent темплейте.
• [x] Создать CartItemComponent и использовать внутри CartComponent.
• [x] Компонент CartItemComponent должен отображать приобретенную книгу и колличество единиц данного экземпляра.
• [x] Реализовать возможности: изменить количество товара, удалить товар из корзины.
• [x] 4. Для взаимодействия между компонентами использовать декораторы: @Input(), @Output().
• [x] 5. По возможности использовать OnPush стратегию для презентационных компонентов (BookComponent, CartItemComponent).
• [x] 6. По возможности использовать два или более метода-хука жизненного цикла компонента.
• [x] 7. Использовать различные DOM событие (click, wheel, blur...).
• [x] 8. Добавить в разметку AppComponent элемент <h1 #appTitle> с шаблонной переменной. Использовать @ViewChild, получить доступ к DOM-элементу темплейта, установить заголовок для приложения из класса.

Рекомендации:

Не используйте для имен событий, которые генерят компоненты префикс on. Используйте его для нейминга обработчиков этих событий

[coriander31415]

Модуль #3. Angular. Modules & Services, Dependency injection

• Что такое модули, зачем они нужны, как их использовать.
• CoreModule и SharedModule.
• Понятие Services, их задачи.
• Понятие Dependency injection, что это и как его использовать.

Материалы для изучения:

• Лекция(видео)

• Примеры из видео

• Слайды

• https://angular.io/tutorial/toh-pt4

• https://angular.io/guide/architecture-modules

• https://angular.io/guide/ngmodules

• https://angular.io/guide/ngmodule-faq

• https://angular.io/guide/architecture-services

• https://angular.io/guide/dependency-injection

• https://angular.io/guide/dependency-injection-providers

• https://angular.io/guide/dependency-injection-in-action

• https://www.freelancermap.com/freelancer-tips/12255-forroot-forchild-angular

• Angular 2020Q1. Modules & Services - https://youtu.be/t4LuNI9HCMM

• Local storage in Angular - https://stackoverflow.com/questions/40589730/local-storage-in-angular-2/57635667#57635667

---

Задание №3: Services

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-services-di.md

Требования:

• [x] 1. Создать сервис BooksService, который будет возвращать книги с помощью метода getBooks(). Использовать этот сервис в компоненте BooksListComponent для доставки массива книг.
• [x] 2. Создать сервис CartService, который должен содержать данные корзины магазина и управлять ее содержимым. Он будет доставлять список приобритенных книг в виде массива CartItemComponent в компонент CartListComponent. Кроме этого сервис должен содержать следующую информацию:
  • CartProduct - о добавленных товарах в корзину;
  • totalQuantity - общее количество товаров в корзине;
  • totalSum - общую стоимость товаров в корзине;
  Сервис должен предоставлять следующий функционал:
  • addBook() - добавить товар в корзину с нужным колличеством;
  • removeBook() - удалить указанный товар из корзины;
  • increaseQuantity()/decreaseQuantity() - увеличить/уменьшить колличество указанного товара в корзине; • removeAllBooks() - очистить корзину;
  • updateCartData() - пересчитать общее количество товароа и сумму после каждой операции, которая влияет на корзину;
• [x] 3. Создайте сервис LocalStorageService (core/services/local-storage.service.ts), который позволит работать с window.localStorage (как класс, useClass). Он должен предоставлять методы для: • установки значения: строки или объекта (setItem()) • получения значения: строки или объекта (getItem()) • удаления значения по ключу (removeItem())
• [x] 4. Создайте сервис ConfigOptionsService (core/services/config-options.service.ts), который должен хранить объект настроек (id, login, email, ...). Сервис должен предоставлять методы для установки и извлечения данных. Метод установки на вход принимает объект, а метод извлечения данных возвращает объект. Предусмотреть возможность установки подмножества свойств. Например, { id, login }.

Дополнительное задание

• [x] 1. Создайте сервис ConstantsService (core/services/constant.service.ts), в виде готового литерала объекта, например { App: "TaskManager", Ver: "1.0" }. Зарегистрируйте его, используя useValue.
• [x] 2. Создайте сервис GeneratorService (core/services/generator.ts), который должен генерировать случайную последовательность символов длины n из набора a-z, A-Z, 0-9. Создайте функцию GeneratorFactory(n: number), которая будет предоставлять сгенеренную строку, используя GeneratorService. Зарегистрируйте GeneratorFactory используя useFactory.
• [x] 3. Создайте демо-компонент AboutComponent (layout/components/about.component.ts) и внедрите перечисленные выше сервисы. Используйте декоратор @Optional().

[coriander31415]

Задание №4: Modules

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-modules.md

Требования:

• [x] 1. Разбить приложение на несколько модулей: • AppModule, • CartModule, • BooksModule, • OrdersModule, • SharedModule (то, что много раз используется: компоненты, директивы, пайпы)
• [x] 2. Экспортируйте из SharedModule следующие модули: CommonModule, OrdersModule. Используйте SharedModule, BooksModule, CartModule, а модуль CommonModule, OrdersModule уберите из импорта, если они там присутствуют.

[coriander31415]

Модуль #4. Angular. Directives & Pipes.

• Базовые знания о Directives. Понятие Атрибутивных и Структурных Directives. Встроенные Directives.
• Создание Directives.
• Понятие Decorators и взаимодействие с пользователем с помощью Directives.
• Базовые знания о Pipes. Параметры. Цепочки Pipe. Встроенные Pipe.
• Создание Pipe.

Материалы для изучения:

• Лекция(видео)

• Примеры из видео

• Слайды

• https://angular.io/api/core/Directive

• https://angular.io/guide/attribute-directives

• https://angular.io/guide/structural-directives

• https://angular.io/api/core/Pipe

• https://angular.io/guide/pipes

• https://angular.io/api/common

• https://angular.io/guide/cheatsheet

• https://youtu.be/S7TKY7hfWa0 - Angular 2020Q1. Directives & Pipes

• https://blog.angular-university.io/angular-ngif/ - Angular ngIf: Complete Guide

• https://blog.angular-university.io/angular-ng-content/ - Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component API Design

• https://habr.com/ru/post/491136/ - Проекция контента в Angular или затерянная документация по ng-content

---

Задание №5: Directives

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-directives.md

Требования:

• [x] 1. Создать массив из нескольких BookComponents. Создать компонент BooksListComponent. Полученный массив книг необходимо отобразить на странице c помощью встроенной директивы \*ngFor.
• [x] 2. Создать массив приобретенных книг из нескольких CartItemComponent. Создать компонент CartListComponent, который должен отображать список приобретенных книг. Кроме списка купленных товаров, необходимо отображать количество купленных товаров и общую сумму. Полученный массив приобретенных книг необходимо отобразить на странице c помощью встроенной директивы \*ngFor. Использовать директиву \*ngIf + else для отображения CartComponent, если корзина не пустая. Если корзина пустая отображать другой альтернативный блок (или другой компонент, например Empty) с сообщением о пустой корзине.
• [x] 3. Создать собственную директиву, которая будет изменять фон товара в корзине (CartItemComponent) при наведении мышки на него. Попробовать использовать различные подходы и декораторы, такие как @HostBinding, @HostListener.
• [x] 4. В любом удобном Вам компоненте применить директивы ngClass или ngStyle.
• [x] 5. Напишите директиву shared/directives/<directive-name>, которая добавляет обработчик события click к хост элементу. Клик изменяет размер шрифта элемента и рамку у компонента или элемента. Добавьте @Input() с цветом для директивы. Используйте ElementRef + Renderer2.

[coriander31415]

• https://angular.io/api/common#pipes - Pipes

• https://webdraftt.com/tutorial/angular-pipes - Pipe (WebDraft)

• https://metanit.com/web/angular2/8.1.php - Работа с pipes (Metanit)

• https://metanit.com/web/angular2/8.2.php - Создание своих pipes (Metanit)

• https://www.digitalocean.com/community/tutorials/angular-built-in-pipes-angular - Built-in Pipes in Angular

• https://hub.packtpub.com/angular-pipes-angular-4/ - 8 built-in Angular Pipes in Angular 4 that you should know

• https://ultimatecourses.com/blog/angular-ngfor-async-pipe - Handling Observables with NgFor and the Async Pipe

• https://angular.io/api/common/AsyncPipe - AsyncPipe

• https://metanit.com/web/angular2/8.4.php - AsyncPipe (Metanit)

• https://medium.com/front-end-weekly/several-ways-to-use-async-pipes-in-angular-fb0d080e8e12 - Several Ways to Use Async Pipes in Angular

Задание №6: Pipes

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-pipes.md

Требования:

• [x] 1. Применить один или более встроенных пайпов в вашем приложении, например:
  • для форматирования цены
  • для форматирования даты обновления
  • для форматирования категорий в верхний регистр
• [x] 2. Изменить метод getBooks() сервиса BookService так, чтобы он возвращал promise/observable. Применить async пайп для отображения данных, предоставленных сервисом BookService на странице.
• [x] 3. Создайте OrderByPipe для сортировки массива объектов (shared/pipes/order-by.pipe.ts). Пайп принимает два параметра:
  • поле в виде строки, по которому необходимо сортировать массив объектов
  • булевый флаг, который определяет направление сортировки. По умолчанию сортировка по убыванию.
• [x] 4. Применить OrderByPipe в вашем приложении для сортировки товаров корзины, реализовать возможность сортировать массив книг по цене, количеству, названию c помощью выпадающего списка.

[coriander31415]

Модуль #5. Angular. Routing

• Основы маршрутизации.
• Директива RouterOutlet.
• Множественная маршрутизация. Маршруты с параметрами.
• Router guards.
• Асинхронная загрузка.

Материалы для изучения:

• Лекция(видео)
• Примеры из видео
• Слайды
• https://angular.io/tutorial/toh-pt5
• https://angular.io/guide/router
• https://angular.io/api/router
• https://angular.io/api/router/RouterLinkActive
• https://angular.io/api/router/ActivatedRoute
• https://angular.io/api/router/Resolve
• Angular 2020Q1. Routing - https://youtu.be/t_bGVB6jzUw
• https://webdraftt.com/tutorial/angular-routing-basics - Маршрутизация
• https://webdraftt.com/tutorial/angular-router-events - События маршрутизации
• https://webdraftt.com/tutorial/angular-routing-guards - Guard
• https://webdraftt.com/tutorial/angular-asynchronous-routing - Асинхронная маршрутизация
• https://youtube.com/playlist?list=PLZXaBJ6VTNREL_62QYU4GzloG1IE07Os9 - Youtube playlist A_ROUTING

---

Задание №7: Routing

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-routing.md

Требования:

Создайте следующие пути в приложении:

• [ ] 1. Список товаров /products-list
• [ ] 2. Карточку товара /product/:productID
• [ ] 3. Корзину (изменить количество, удалить из корзины) /cart
• [ ] 4. Формирование заказа /order
• [ ] 5. Админку (добавление/редактирование товара, количества, цены, ..., просмотр заказов):
• /admin
• /admin/products
• /admin/product/add
• /admin/product/edit:productID + resolve guard
• /admin/orders

Рекомендации

• [ ] Страница order должна работать следующим образом: в корзине когда Вы делаете заказ, вы перенаправляетесь на страницу /order, где появляется форма для ввода сопутствующей информации (адрес доставки, способ оплаты, коментарии к заказу). Когда вы подтверждаете заказ формируется ордер и товары из корзины удаляются.

• [ ] Админку защитить c помощью canActivateGuard. Подгружать динамически, если у пользователя есть право работать как админ.

[coriander31415]

Модуль #6. Angular. HTTP.

• Модуль HttpClientModule.
• Объект HttpTypeEvent.
• Перехват HTTP-запросов с помощью Http Interceptor.

Материалы для изучения HTTP:

• Лекция HTTP (видео)
• Примеры из видео (часть 1)
• Примеры из видео (часть 2)
• Слайды
• https://angular.io/tutorial/toh-pt6
• https://angular.io/guide/http
• https://angular.io/api/common/http
• https://angular.io/api/common/http/HttpClient
• https://angular.io/api/common/http/HttpResponse
• https://angular.io/api/common/http/HttpHeaders
• https://angular.io/api/common/http/HttpParams
• Angular 2020Q1. HTTP - https://youtu.be/2LVepjuFjHw

---

Задание №8: HttpClient

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-httpclient.md

Требования:

• [ ] 1. Реализуйте бекэнд для вашего проекта, используя, например, json-server
• [ ] 2. Создайте сервис для работы с HttpClient.
• [ ] 3. Реализуйте часть методов по схеме Promise, а часть по схеме Observable.
• [ ] 4. Реализуйте TimingInterceptor, который в консоль выводит длительность запросов. Добавьте фильтр, чтобы время подсчитывалось только для конкретных запросов.
• [ ] 5. Реализуйте сервис AppSettings, который должен загружать настройки приложения из localStorage используя сервис LocalStorageService, разработанный ранее. Если в localStorage ничего нет, то загружать из файла assets/app-settings.json и при удачной загрузке записывать эти данные в localStorage, используя сервис LocalStorageService. При неудачной попытке делать две попытки. Если загрузить все-таки не удалось, то устанавливать значения настроек поумолчанию.

Рекомендации:

В качестве настроек можно применять считать применение различных фильтров для книг по category, дате, направление сортировки и т.д.

[coriander31415]

Модуль #7. RxJS & Observables

• Принципы реактивного программирования для JavaScript.
• Observable. Subject. Операторы RxJS.

Материалы для изучения RxJS & Observables:

• Лекция RxJS & Observables (видео)
• Примеры из видео
• Слайды
• https://rxjs-dev.firebaseapp.com/api
• http://rxmarbles.com/
• https://www.learnrxjs.io/
• https://www.npmjs.com/package/rxjs
• Angular 2020Q1. RxJS & Observables - https://youtu.be/uXaMBTsuTbQ
• Angular 2020Q1 RxJS & Observables. HTTP. Task review - https://youtu.be/aRgMI3bhhtY

[coriander31415]

Модуль #8. Angular. Redux & NgRx

• О библиотеке NgRx
• Управление состоянием хранилища. Store, Actions, Reducers, Selectors.
• Использование Effects.
• Преимущества NgRx.

Материалы для изучения:

• Лекция (видео)
• Слайды
• Angular 2020Q1. Redux & NgRx - https://youtu.be/-8APehOVRLM

---

Задание №9: NgRx

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-ngrx.md

Требования:

• [ ] 1. Внедрить для вашего приложения @ngrx/store, @ngrx/effects
  1.1. Описать стейт функциональной области и стейт приложения
  1.2. Описать несколько действий
  1.3. Создать редюсер
  1.4. Создать фиче и стейт селекторы
  1.5. Создать эффекты для работы с источником данных
• [ ] 2. Внедрить для вашего приложения @ngrx/router-store 2.1. Реализовать навигацию с помощью действия GO (часть навигации) 2.2. Реализовать комбинированный селектор для получения данных по параметру из урла, наример getProductByUrl
• [ ] 3. По желанию применить @ngrx/entity 3.1. Использовать встроенные селекторы 3.2. Использовать встроенные методы работы с коллекцией в редюсере
• [ ] 4. По желанию применить @ngrx/data

[coriander31415]

Модуль #9. Angular. Unit test.

• Структура теста.
• Тестирование компонентов с помощью TestBed.
• Тестирование компонентов с подходом Test host.
• Тестирование вложенных компонентов.

Материалы для изучения:

• Лекция (видео)
• Примеры из видео
• Слайды
• https://angular.io/guide/testing
• https://blog.stevensanderson.com/2009/08/24/writing-great-unit-tests-best-and-worst-practises/​
• https://www.kenneth-truyers.net/2012/12/15/key-qualities-of-a-good-unit-test/
• https://www.youtube.com/watch?v=Eu35xM76kKY
• https://github.com/stas-dolgachov/angular-testing-lecture
• Angular 2020Q1 Unit testing - https://youtu.be/MSXCNHrmk9U

---

Задание №10: Unit tests

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-unit-tests.md

Требования:

1. Создайте 2-3 интеграционных юнит тестов для тестирования ваших компонентов.
2. Создайте изолированный юнит тест для тестирования одного из ваших сервисов.
3. Создайте изолированный юнит тест для тестирования одной из ваших директив.
4. Создайте изолированный юнит тест для тестирования OrderByPipe.
5. Создайте поверхностный юнит тест для тестирования вашего AppComponent.
6. Создайте отчет о покрытии кода тестами.

[coriander31415]

Tasks review:

• Angular 2020Q1 Components, Directives & Pipes. Task review - https://youtu.be/PWsq_OvZsQo
• Angular 2020Q1 Modules & Services. Routing. Task review - https://youtu.be/xY-y8bAQq6A
• Angular 2020Q1 RxJS & Observables. HTTP. Task review - https://youtu.be/aRgMI3bhhtY
• Angular 2020Q1. Angular intro. Task review - https://youtu.be/jwIVkodBPgU