AIKraft/AI/Войти
AIKraft/Skills/ionic angular

ionic angular

Guides the agent through Angular-specific patterns for Ionic app development. Covers project structure, standalone vs NgModule architecture detection, Angular Router integration with Ionic navigation (tabs, side menu, modals), lazy loading, Ionic page lifecycle hooks, reactive forms with Ionic input components, Angular services for state management, route guards, performance optimization, and test

capawesome-team official Разработка

Что делает навык

Направляет разработчика через специфичные для Angular паттерны при создании приложений Ionic, включая структуру проекта, навигацию, формы и управление состоянием. Автоматически определяет архитектуру (standalone или NgModule) и адаптирует примеры кода под неё.

Когда применять

  • Настройка структуры проекта Ionic с Angular и выбор между standalone и NgModule архитектурой
  • Интеграция Angular Router с навигационными компонентами Ionic (вкладки, боковое меню, модальные окна)
  • Реализация реактивных форм с использованием input-компонентов Ionic
  • Управление состоянием приложения с помощью Angular-сервисов и защита маршрутов (route guards)

Как работает

  1. Проверить файл src/main.ts для определения архитектуры: наличие bootstrapApplication указывает на standalone, а platformBrowserDynamic().bootstrapModule — на NgModule
  2. Адаптировать импорты: для standalone компонентов использовать @ionic/angular/standalone, для NgModule — IonicModule в модуле страницы
  3. Пошагово проводить пользователя через одну тему за раз, обеспечивая последовательное изучение навигации, форм и жизненного цикла

Примеры запросов агенту

Как настроить навигацию с использованием Ionic Tabs и Angular Router в standalone приложении?
Создай реактивную форму с компонентами Ionic Input и подключи её к сервису состояния
Как реализовать ленивую загрузку модулей и защитить маршруты с помощью route guards в Ionic Angular?

Что понадобится

  • Ionic Framework 7 или 8 с пакетом @ionic/angular
  • Angular 16+ (рекомендуется Angular 17+ для standalone архитектуры)
  • Node.js, npm и установленный Ionic CLI (npm install -g @ionic/cli)

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «ionic-angular» из репозитория: # https://github.com/capawesome-team/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r ionic-angular/ ~/.claude/skills/ionic-angular/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.