GigaIDE: Список задач (Angular)

Описание проекта

Простое веб-приложение для управления списком задач с использованием Angular и TypeScript. Приложение позволяет отмечать задачи как выполненные с эффектом зачеркивания.

Технологические особенности

Обратите внимание на особенности запуска и предпросмотра. Они описываются ниже в этом файле. Если запускать приложение неправильно, приложение будет отображать пустую белую страницу.

• Standalone-компоненты по умолчанию (Angular 17);
• Компонентная структура;
• Интерфейсы на TypeScript;
• Байндинг свойств;
• Работа с событиями;
• Стилизация на уровне компонента.

Требования

• Node.js (протестировано на версии v22.11.0 LTS);
• npm или yarn.

Установка и запуск

1. Клонирование репозитория

При разработке на GitVerse, вам достаточно открыть репозиторий в GIGA IDE Cloud. Не нужно делать никаких дополнительных действий для клонирования репозитория или настройки имени пользователя.

2. Установка зависимостей

npm install

3. Запуск в режиме разработки

# Запуск на GitVerse
npm run gitverse

4. Открытие приложения

Для разработки на GitVerse, перейдите по адресу:

Нюансы

КРАЙНЕ ВАЖНО: в самом конце URL обязан присутствовать прямой слеш (/). Иначе на экране будет отображаться пустая белая страница.

Чтобы в GIGA IDE Cloud можно было посмотреть на запущенное приложение,, вам нужно выполнить два магических шага: в index.html вам нужно указать

, а в команде запуска (например, в package.json) должен присутствовать параметр

--serve-path /absproxy/4200

. В проекте-примере эти требования уже выполнены.

Функциональность

• Отображение списка задач с возможностью отметки;
• Зачеркивание выполненных задач.

Структура проекта

• app/todo-list
  : Директория с файлами компонента
  todo-list
• todo.model.ts
  : Модель для элементов списка;
• app.component.ts
  : Место внедрения
  TodoListComponent
  .

Сборка для продакшена

npm run build

Собранные артефакты можно будет найти в директории

.

Лицензия

Universal Permissive License