ng-alain Component Development
Construir componentes de interfaz de usuario empresarial con ng-alain
La construcción de interfaces de usuario empresariales con Angular requiere conocimiento de los componentes, temas y patrones de ng-alain. Esta habilidad proporciona ejemplos de código listos para usar para tablas ST, formularios SF, permisos ACL y diseños adaptables, siguiendo las mejores prácticas de Angular.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «ng-alain Component Development». Create an ST table component for displaying orders with order ID, customer name, total amount, status badge, and date columns
Ожидаемый результат:
- Generated OrderTableComponent with ST columns configuration
- Added pagination with page size selector
- Included status badges (pending, processing, shipped, delivered)
- Added Edit and Delete action buttons with confirmation dialogs
- Configured sorting on amount and date columns
Аудит безопасности
БезопасноPure documentation skill containing only markdown content with inline code examples for reference. No executable code, no file system access, no network calls, no command execution. Safe for publication.
Оценка качества
Что вы можете построить
Componentes de panel de control empresarial
Crear paneles de control ricos en datos con tablas, tarjetas de estadísticas y diseños adaptables utilizando componentes de ng-zorro.
Gestión de formularios y datos
Crear formularios complejos con validación de esquemas, menús desplegables asíncronos e integración de modales para operaciones CRUD.
Sistemas de control de acceso
Implementar visibilidad de interfaz de usuario basada en roles con directivas ACL y servicios de permisos en aplicaciones empresariales.
Попробуйте эти промпты
Crear un componente ST table con paginación que muestre una lista de usuarios con columnas para ID, nombre, correo electrónico, estado y acciones.
Crear un formulario SF con esquema para un sistema de gestión de tareas con campos para título, descripción, menú desplegable de estado, botones de radio de prioridad, selector asíncrono de responsable, selector de fecha límite y entrada de etiquetas.
Crear componente Angular con permisos ACL que muestre botones de Crear, Editar y Eliminar solo cuando los usuarios tengan los permisos correspondientes 'task:create', 'task:edit' y 'task:delete'.
Crear una página completa de gestión de tareas con encabezado de página, navegación de ruta de exploración, tarjetas de estadísticas adaptables para conteo de tareas, y una tabla ST con filtro, ordenamiento y botones de acción.
Лучшие практики
- Usar SHARED_IMPORTS para consolidar importaciones comunes de ng-zorro y @delon entre componentes
- Implementar puntos de corte adaptativos (nzXs, nzSm, nzMd, nzLg) para diseños mobile-first
- Agregar etiquetas ARIA y atributos de accesibilidad adecuados para navegación por teclado
Избегать
- Evitar números mágicos hardcodeados para anchos de columnas - usar puntos de corte adaptativos en su lugar
- No omitir estados de carga durante la obtención de datos asíncrona
- Evitar mezclar formularios basados en plantillas y reactivos sin una separación clara