Angular Expert
Создание современных приложений Angular с Signals
Боретесь с устаревшими паттернами Angular и сложными NgModules? Этот навык предоставляет экспертное руководство по современному Angular (v20+) с Signals, Standalone Components и Zoneless архитектуре.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Angular Expert”。 Создать компонент карточки пользователя с signal inputs
预期结果:
Автономный UserCardComponent, использующий input() для свойств id, name и role с значениями по умолчанию, output() для событий выбора и computed signal для форматирования отображения.
正在使用“Angular Expert”。 Как мигрировать с @Input() на signal inputs?
预期结果:
Замените декоратор @Input() на функцию input(). Для обязательных входных данных используйте input.required<T>(), для опциональных - input<T>(defaultValue). Обновите ссылки в шаблоне для вызова сигналов как функций: {{ name() }} вместо {{ name }}.
安全审计
安全All static analysis findings were false positives. The skill contains documentation-only content (markdown and JSON configuration) with no executable code. URL references point to official Angular documentation. Markdown code formatting was incorrectly flagged as shell execution. No actual security risks detected.
质量评分
你能构建什么
Настройка нового проекта Angular
Получите экспертное руководство по запуску современного приложения Angular с Signals, Standalone Components и оптимальной конфигурацией с самого начала.
Модернизация устаревшего Angular
Планируйте и выполняйте постепенную миграцию с NgModules на Standalone Components, используя Signals и Zoneless паттерны инкрементально.
Оптимизация производительности
Реализуйте продвинутые паттерны, такие как отложенная загрузка, инкрементная гидратация и OnPush change detection для максимальной производительности.
试试这些提示
Создайте новый компонент Angular с использованием Signals для управления состоянием. Компонент должен отображать счетчик с кнопками инкремента и декремента, используя signal inputs для начального значения и signal outputs для событий.
Помогите мне преобразовать существующий компонент Angular на основе NgModule в Standalone Component. Обновите все импорты, удалите зависимости от модулей и убедитесь, что компонент использует современные signal-based inputs и outputs.
Проведите меня через преобразование существующего приложения Angular в Zoneless режим. Объясните необходимые изменения конфигурации, как обрабатывать триггеры change detection и какие паттерны использовать для асинхронных операций без zone.js.
Настройте серверный рендеринг с инкрементной гидратацией для приложения Angular. Настройте блоки defer с соответствующими триггерами (on viewport, on interaction, on idle) для оптимальных показателей Core Web Vitals.
最佳实践
- Используйте Signals для локального состояния компонента, а RxJS - для асинхронных потоков, таких как HTTP-запросы
- Включите OnPush change detection и позвольте Signals автоматически триггерить обновления
- Предпочитайте Standalone Components с прямыми импортами вместо SharedModules для лучшего tree-shaking
避免
- Использование RxJS BehaviorSubject для простого локального состояния, когда достаточно Signals
- Полная загрузка feature modules вместо использования loadComponent и блоков defer
- Смешение устаревших паттернов декораторов с Signals, вызывающее несоответствующий change detection