🟢 Crud приложение

Информация

Взаимодействие и синхронизация глобального/локального состояния с вашей серверной частью - это основа любого приложения. Вам необходимо освоить следующие рекомендации для создания надежных приложений на Angular.

Обзор

В этом упражнении у вас есть небольшое CRUD приложение, которое получает список задач (TODOS), обновляет и удаляет некоторые задачи.

В настоящее время у нас есть работающий пример, но он наполнен множеством плохих практик.

Шаг 1: рефакторинг с учетом лучших практик

Что вам нужно будет сделать:

• Избегайте any в качестве типа. Использование интерфейсов Typescript предотвращает ошибки
• Используйте отдельную службу для всех ваших http-запросов и используйте Signal для вашего списка задач
• Не изменяйте данные (пример ниже)

// Избегайте этого
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)