Merge pull request #658 from webbomj/translate-challenge-5

docs(ru): added translate 5-crud.md

docs/src/content/docs/ru/challenges/angular/5-crud.md

@@ -0,0 +1,52 @@
+---
+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)_