1. Проинсталировать Angular-CLI (https://github.com/angular/angular-cli)
   и/или AngularConsole (https://angularconsole.com)

   • Просмотреть CLI QuickStart https://angular.io/docs/ts/latest/cli-quickstart.html
   • Просмотреть Style Guide https://angular.io/guide/styleguide
   • Просмотреть СLI Commands https://angular.io/cli
   • Просмотреть Deprecation Guide https://angular.io/guide/deprecations

2. Создайте проект (ng new shop) и загрузите его на гитхаб без каких-либо дополнительных папок.
   Код можете писать для себя в отдельных бренчах. Итоговый код добавляйте в мастер и после этого отправляйте мне.
   В package.json замените содержимое команды start на ng lint && ng serve -o, чтобы при запуске проекта запускался линтинг и открывался браузер

3. Создайте компонент FirstComponent. Используйте его в AppComponent.

4. Добавьте несколько простых свойств для компонента FirstComponent и несколько свойств в виде массива. Выведите их в темплейт:

   • name: string
   • description: string
   • price: number
   • category: enum (Создайте enum с несколькими категориями) https://www.typescriptlang.org/docs/handbook/enums.html
   • isAvailable: boolean
   • ...

5. Создайте компонент ProductComponent. Добавьте кнопку Buy в шаблон. Реализуйте обработчик события клик onBuy(),
   который выводит в консоль сообщение о покупке товара.

6. Создайте сервис ProductsService, который будет возвращать товары с помощью метода getProducts().
   Модель товара ProductModel опишите интерфейсом и/или классом,
   который реализует данный интерфейс. Создайте массив из нескольких товаров.
   Создайте компонент ProductListComponent. Используйте в нем сервис ProductsService, получите и отобразите товары на станице
   c помощью директивы *ngFor.

7. Создайте компонент (ng g c cart) и используйте его в AppComponent темплейте. Компонент должен отображать список купленых товаров.
   Организуйте список в виде отдельного сервиса - CartService. Используйте директиву *ngIf + else для отображения корзины (CartComponent), если она не пустая.
   Если корзина пустая отображать другой альтернативный блок с сообщением о пустой корзине.

8. Реализуйте любую дополнительную функциональность.

9. Создайте файл changelog.md в корне проекта и описывайте в нем то, что реализовали.

10. Исправьте ошибки линтинга, если таковые будут.

11. Загрузите ваш проект на github и отправьте мне ссылку ([email protected]). Cсылку надо отправлять после каждого задания.
    Это будет сигнал для меня, что вы завершили его.

12. Несколько бест практисис (Возвращайтесь к этому списку в каждом домашнем задании. Если есть что добавить, предлагайте):

    1. Сначала импортируем Ангуляр пакеты, затем сторонние пакеты, например, Rxjs, затем свои. Разделяем блоки пустой строкой
    2. Поля класса описываем в следующей последовательности, блоки полей и методы отделяем пустой строкой:
       • Инпуты,
       • Аутпуты
       • Другие декорируемые свойства
       • публичные поля
       • приватные поля
       • конструктор
       • методы жизненного цикла с префиксом ng
       • обработчики событий с префиксом on
       • публичные методы
       • приватные методы
    3. Модификатор public для полей и методов не используем. Они public по-умолчанию. Для параметров конструктора используем.
    4. То, к чему нужен доступ в темплейте - public, а не private.
    5. В корневой папке приложения app должны быть только корневой компонент и корневой модуль. Остальные файлы должны быть разложены по папкам.
    6. Модели именовать ProductModel, CartModel, и т. д.
    7. Проект организовать по функционалу, а не по типам сущностей.
       Например
       cart
       components
       models
       services
       products
       components
       models
       services
       shared
       directives
       pipes
       core
       services

Angular: Services and DI

1. Создайте/модифицируйте сервис CartService (cart/services/cart.service.ts), который должен содержать данные корзины интернет магазина и управлять содержимым.
   Сервис должен хранить информацию:
   cartProducts - о добавленных товарах в корзину
   totalQuantity - общее количество товаров в корзине
   totalSum - общую сумму товаров в корзине
   Сервис должен предоставлять следующий функционал:
   addProduct() - добавить в корзину товар с количеством
   removeProduct() - удалить указанный товар из корзины
   increaseQuantity()/decreaseQuantity() - увеличить/уменьшить количество для указаного товара
   removeAllProducts() - очистить корзину
   updateCartData() - пересчитать общее количество товара и сумму после каждой операции, которая влияет на корзину

2. Создайте сервис LocalStorageService (core/services/local-storage.service.ts), который позволит работать
   с window.localStorage (как класс, useClass).
   Он должен предоставлять методы для:

   • установки значения: строки или объекта (setItem)
   • получения значения: строки или объекта (getItem)
   • удаления значения по ключу (removeItem)

3. Создайте сервис ConfigOptionsService (core/services/config-options.service.ts), который должен хранить объект настроек (id, login, email, ...).
   Сервис должен предоставлять методы для установки и извлечения данных. Метод установки на вход принимает объект,
   а метод извлечения данных возвращает объект. Предусмотреть возможность установки подмножества свойств.
   Например, { id, login }

4. Создайте сервис ConstantsService (core/services/constant.service.ts), в виде готового литерала объекта,
   например { App: "TaskManager", Ver: "1.0" }. Зарегистрируйте его, используя useValue.

5. Создайте сервис GeneratorService (core/services/generator.ts), который должен генерировать случайную последовательность символов длины n
   из набора a-z, A-Z, 0-9. Создайте функцию GeneratorFactory(n: number), которая будет предоставлять сгенеренную строку, используя GeneratorService
   Зарегистрируйте GeneratorFactory используя useFactory.

6. Создайте демо-компонент AboutComponent (layout/components/about.component.ts) и внедрите перечисленные выше сервисы.
   Используйте декоратор @optional().

7. Напишите директиву shared/directives/, которая добавляет обработчик события click к хост элементу.
   Клик изменяет размер шрифта элемента, рамку или что-то другое на Ваше усмотрение.
   Добавьте @input() для директивы. Используйте ElementRef + Renderer2

1. Применить один или более встроенных пайпов в вашем приложении, например,

   • для форматирования цены
   • для форматирования даты обновления
   • для форматирования категории в верхний регистр

2. Изменить метод getProducts() сервиса ProductService так, чтобы он возвращал promise/observable.
   Применить async пайп для отображения данных, предоставленных сервисом ProductService на странице.

3. Создайте OrderByPipe для сортировки массива объектов (shared/pipes/order-by.pipe.ts)
   Пайп принимает два параметра:

   • поле в виде строки, по которому необходимо сортировать массив объектов
   • булевый флаг, который определяет порядок сортировки. По умолчанию сортировка по убыванию.

4. Зарегистрируйте OrderByPipe в SharedModule.
   Применить OrderByPipe в вашем приложении для сортировки товаров корзины,
   реализовать возмомность сортировать массив товаров по цене, количеству, названию
   c помощью выпадающего списка

5. Экспортируйте из SharedModule следующие модули CommonModule, FormsModule. Используйте SharedModule
   ProductsModule, CartModule, а модули CommonModule, FormsModule уберите из импорта, если они там присутствуют.

6. Описать в changelog, где применены пайпы.

1. Реализуйте компонент ProcessOrderComponent - реактивная форма,
   в которую пользователь должен внести данные для завершения формирования заказа:
   • Имя пользователя (обязательное поле)
   • Фамилия пользователя
   • Email (обязательное поле)
   • телефон
   • Чекбокс: самовывоз - скрывает часть формы с адресом доставки
   • Адрес доставки - можно одно поле textarea
2. Добавьте валидацию необходимых полей
   • реализуйте валидатор для имени пользователя и директиву валидации для email
3. Добавьте возможность ввести несколько контактных телефонов (продублируйте поле), а также возможность удалить их.
4. Формируйте сообщения валидации внутри класса компонента или создайте дополнительный сервис.

1. реализуйте бекэнд для вашего проекта, используя, например, json-server

2. создайте сервис для работы с HttpClient.

3. реализуйте часть методов по схеме Promise, а часть по схеме Observable.

4. реализуйте TimingInterceptor, который в консоль выводит длительность запросов.
   Добавьте фильтр, чтобы время подсчитыалось только для конкретных запросов.

Angular 5+ Components

Продолжить модификацию Вашего предыдущего приложения

1. Разбить приложение на несколько модулей:

   • AppModule,
   • CartModule,
   • ProductsModule,
   • OrdersModule,
   • SharedModule (то, что много раз используется: компоненты, директивы, пайпы)

2. Создайте или модифицируйте ProductListComponent, который делегирует отображение списка товаров
   компоненту ProductComponent. Товары компоненту предоставить с помощью метода getProducts() сервиса ProductService.

3. Реализовать возможность добавления товара в корзину (click), если товар есть в наличии (доступен).
   Товар в корзину должен добавлять ProductListComponent.
   ProductComponent реализовать как презентационный компонент с инпутами и аутпутами без зависимостей.
   Если товара нет, кнопку делать недоступной.

4. Создайте или модифицируйте CartListComponent, который отображает список купленных товаров.
   Кроме списка купленных товаров, отображать количество купленных товаров и общую сумму.

5. Создайте компонент СartItemComponent, который отображает одну сущность из списка выше.
   Используйте этот компонент в CartListComponent.
   Реализовать возможности: изменить количество товара, удалить товар из корзины.

6. По возможности использовать декораторы: @input(), @output().

7. По возможности использовать OnPush стратегию для презентационных компонентов.

8. По возможности использовать два или более метода-хука жизненого цикла компонента.

9. Использовать DOM событие (click, wheel, blur...).

10. Создать или модифицировать сервис (CartService) для предоставления данных компоненту CartListComponent,
    подсчета количества и суммы.

11. Добавить в разметку AppComponent элемент <h1 #appTitle> с шаблонной переменной.
    Использовать @ViewChild, получить доступ к DOM элементу темплейта,
    установить заголовок для приложения из класса.

12. При наведении мышки на товар в корзине (CartItemComponent) стилизировать его изменением фона.
    Для этого создать директиву и зарегистрировать ее в SharedModule.
    Использовать @HostBinding, @HostListener декораторы.

13. По возможности применить директиву ngClass или ngStyle.

14. Реализуйте свою небольшую функциональность.

15. Опишите изменения в changelog проекта.

16. Если вы вели разработку в отдельной ветке, то добавьте все в мастер.

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

Продолжите модифицировать Ваш проект по продаже чего угодно (книги, машины, продукты,...)

Реализуйте:

1. Список товаров (по аналогии TaskFeature Area)
   /products-list
   ...

2. Карточку товара.
   /product/:productID
   ...

3. Корзина (изменить количество, удалить из корзины) (по аналогии UserFeature Area)
   /cart
   ...

4. Формирование заказа
   /order
   ...

5. Админку (добавление/редактирование товара, количества, цены, ..., просмотр заказов).
   /admin + canActivateGuard
   /admin/products
   /admin/product/add
   /admin/product/edit:productID + resolve guard
   /admin/orders
   ...
   Админку защитить. Подгружать динамически, если у пользователя есть право работать как админ.
   canActivateGuard

6. Любую дополнительную интересную для Вас функциональность. (опишите, что Вы реализуете в changelog).

7. Организуйте работу с localstorage. Например, для хранения товаров или заказов.

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