angular-architecture

Structure Angular projects with scope rules, directory layout, and naming conventions.

2|Updated Aug 2, 2023

Search Tags:#architecture #project structure #angular #style guide #component placement #file naming

Ready to run

npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill angular-architecture-ic-facet

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-architecture
Source: https://github.com/ic-facet/gestion-programas-asignatura/tree/main/.cursor/skills/angular-architecture
Command: npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill angular-architecture-ic-facet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a clear, opinionated guide to structuring Angular projects, ensuring consistency, maintainability, and scalability by defining scope rules, project layout, and file naming conventions.

Core Features & Use Cases

Scope Rule Enforcement: Guides component placement based on feature usage (single vs. shared).
Standardized Project Structure: Outlines a recommended directory layout for features, shared modules, and core elements.
File Naming Conventions: Eliminates redundant suffixes like .component or .service for cleaner code.
Style Guide Adherence: Promotes modern Angular practices like inject() and signals.
Use Case: When starting a new Angular project or refactoring an existing one, use this Skill to establish a robust and scalable architecture from the outset.

Quick Start

Generate a new Angular component within the 'features/user-profile/components/' directory using the specified naming conventions.

Frequently Asked Questions about angular-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure an Angular project for scalability and maintainability?▼

Structure Angular projects by enforcing a standard directory layout for features and shared modules, applying the Scope Rule for component placement, and adopting modern practices like inject() and signals.

What is the Scope Rule for Angular component placement?▼

The Scope Rule for Angular component placement dictates organizing components based on feature usage, separating single-use components into specific feature directories and reusable ones into shared modules.

What are the best file naming conventions for Angular projects?▼

Best Angular file naming conventions omit redundant suffixes like .component or .service, ensuring cleaner code paths and a standardized project structure across feature directories.

Does this Angular style guide support modern practices like signals and inject()?▼

Yes, this Angular style guide enforces modern practices by promoting the use of inject() for dependency injection and signals, improving overall code quality and maintainability.

Can I use these architecture guidelines to refactor an existing Angular project?▼

Yes, you can use these architecture guidelines to refactor existing Angular projects by reorganizing directories, removing redundant file suffixes, and migrating components to the Scope Rule structure.

When should I establish an Angular project architecture?▼

Establish Angular project architecture at the outset of a new project or during refactoring to ensure consistency, applying directory layouts and naming conventions before scaling feature development.