diff --git a/docs/src/content/docs/ru/challenges/angular/5-crud.md b/docs/src/content/docs/ru/challenges/angular/5-crud.md new file mode 100644 index 0000000..b0ba670 --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/5-crud.md @@ -0,0 +1,50 @@ +--- +title: 🟢 Crud приложение +description: Задача 5 посвящена рефакторингу crud-приложения +author: thomas-laforge +challengeNumber: 5 +command: angular-crud +sidebar: + order: 2 +--- + +## Информация + +Взаимодействие и синхронизация глобального/локального состояния с вашей серверной частью - это основа любого приложения. Вам необходимо освоить следующие рекомендации для создания надежных приложений на Angular. + +## Обзор + +В этом упражнении у вас есть небольшое CRUD приложение, которое получает список задач (TODOS), обновляет и удаляет некоторые задачи. + +В настоящее время у нас есть работающий пример, но он наполнен множеством плохих практик. + +### Шаг 1: рефакторинг с учетом лучших практик + +Что вам нужно будет сделать: + +- Избегайте **any** в качестве типа. Использование интерфейсов Typescript предотвращает ошибки +- Используйте **отдельную службу** для всех ваших http-запросов и используйте **Signal** для вашего списка задач +- Не **изменяйте** данные (пример ниже) + +```typescript +// Избегайте этого +this.todos[todoUpdated.id - 1] = todoUpdated; + +// Предпочитаю что-то вроде этого кода, но он нуждается в улучшении, потому что мы все еще хотим тот же порядок в списке +this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated]; +``` + +### Шаг 2: Улучшаем + +- Добавьте кнопку **Delete**: _Документация к fake API_ +- Обработайте **ошибки** правильно. _(Глобально)_ +- Добавьте глобальный **loading** индикатор загрузки. _Вы можете использовать MatProgressSpinnerModule_ + +### Шаг 3: Удобство в обслуживании!! Добавьте немного тестов + +- Добавьте 2/3 тестов + +### Шаг 4: Благоговение!!! овладейте своим состоянием. + +- Используйте **component store of ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** или **ngrx/signal-store** как локальное состояние вашего компонента. +- Добавьте **локальный** индикатор Loading/Error, например, только для обрабатываемого Todo и **отключите (disable)** все кнопки обрабатываемого Todo. _(Подсказка: вам нужно будет создать ItemComponent)_