---
title: 🟢 Crud приложение
description: Задача 5 посвящена рефакторингу crud-приложения
author: thomas-laforge
contributors:
  - webbomj
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**: _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Документация к fake API</a>_
- Обработайте **ошибки** правильно. _(Глобально)_
- Добавьте глобальный **loading** индикатор загрузки. _Вы можете использовать MatProgressSpinnerModule_

### Шаг 3: Удобство в обслуживании!! Добавьте немного тестов

- Добавьте 2/3 тестов

### Шаг 4: Благоговение!!! овладейте своим состоянием.

- Используйте **component store of ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** или **ngrx/signal-store** как локальное состояние вашего компонента.
- Добавьте **локальный** индикатор Loading/Error, например, только для обрабатываемого Todo и **отключите (disable)** все кнопки обрабатываемого Todo. _(Подсказка: вам нужно будет создать ItemComponent)_
