Комплексное тестовое приложение на Angular, демонстрирующее максимум возможностей фреймворка.
- Standalone компоненты с lifecycle hooks (OnInit, OnDestroy)
- Inputs/Outputs для взаимодействия между компонентами
- View Encapsulation с изолированными стилями
- Content Projection и структурные директивы
- UserService - управление пользователями с signals и RxJS
- ProductService - каталог товаров с фильтрацией и сортировкой
- CartService - корзина покупок с state management
- Dependency Injection с providedIn: 'root'
- Angular Signals для реактивного состояния
- Computed signals для вычисляемых значений
- RxJS Observables для асинхронных операций
- BehaviorSubject для совместимости с RxJS
- Lazy Loading компонентов
- Route Parameters для детальных страниц
- Navigation Guards (заготовки)
- Wildcard routes для 404 страниц
- Reactive Forms с валидацией
- Template-driven Forms с ngModel
- Dynamic Forms с FormArray
- Custom Validators и error handling
- Структурные директивы (*ngFor, *ngIf, *ngSwitch)
- Атрибутивные директивы (ngClass, ngStyle)
- Кастомные директивы (HighlightDirective)
- Встроенные pipes (date, currency, slice, titlecase)
- Кастомные pipes (CustomCurrencyPipe)
- Pure и Impure pipes
- Angular Material компоненты
- Responsive Design с CSS Grid и Flexbox
- Анимации и transitions
- Loading States и error handling
src/app/
├── components/ # Компоненты приложения
│ ├── header/ # Шапка с навигацией
│ ├── home/ # Главная страница
│ ├── product-list/ # Список товаров
│ ├── product-detail/ # Детали товара
│ ├── user-list/ # Список пользователей
│ ├── cart/ # Корзина покупок
│ ├── profile/ # Профиль пользователя
│ ├── forms-demo/ # Демо форм
│ └── not-found/ # 404 страница
├── services/ # Сервисы
│ ├── user.service.ts
│ ├── product.service.ts
│ └── cart.service.ts
├── models/ # TypeScript интерфейсы
│ ├── user.model.ts
│ ├── product.model.ts
│ └── cart-item.model.ts
├── pipes/ # Кастомные pipes
│ └── custom-currency.pipe.ts
├── directives/ # Кастомные директивы
│ └── highlight.directive.ts
├── guards/ # Route guards (заготовки)
├── mocks/ # Моковые данные
└── app.routes.ts # Конфигурация роутинга
- Angular 20 - основной фреймворк
- TypeScript - типизированный JavaScript
- Angular Material - UI компоненты
- RxJS - реактивное программирование
- SCSS - препроцессор CSS
- Yarn - менеджер пакетов
- Установите зависимости:
yarn install- Запустите приложение:
yarn start- Откройте браузер по адресу:
http://localhost:4200
- / - Главная страница с hero секцией и рекомендуемыми товарами
- /products - Каталог товаров с фильтрацией и поиском
- /products/:id - Детальная страница товара
- /users - Список пользователей
- /forms - Демонстрация различных типов форм
- /cart - Корзина покупок
- /profile - Профиль пользователя
- /404 - Страница не найдена
- Standalone компоненты
- Lifecycle hooks (OnInit, OnDestroy)
- Input/Output свойства
- View encapsulation
- Content projection
- Dependency injection
- Singleton services
- State management
- HTTP клиент (имитация)
- Структурные директивы
- Атрибутивные директивы
- Кастомные директивы
- Host listeners
- Встроенные pipes
- Кастомные pipes
- Pure vs Impure pipes
- Async pipes
- Reactive forms
- Template-driven forms
- Валидация
- Динамические поля
- Lazy loading
- Route parameters
- Query parameters
- Navigation guards
- Angular Signals
- RxJS Observables
- BehaviorSubject
- Computed values
- Responsive Design - адаптивный дизайн для всех устройств
- Material Design - современный UI/UX
- TypeScript - строгая типизация
- SCSS - продвинутые стили
- Анимации - плавные переходы
- Loading States - индикаторы загрузки
- Error Handling - обработка ошибок
Это демонстрационное приложение создано для показа всех основных возможностей Angular. Все данные являются моковыми и используются только для демонстрации функциональности.
Приложение использует новейшие возможности Angular 20, включая standalone компоненты, signals и современные паттерны разработки.