# Angular Architecture

Angular architecture: Scope Rule, project structure, file naming, style guide.

- Repository: https://github.com/Gentleman-Programming/Gentleman-Skills (661 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-03-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-architecture -g -a claude-code -y`
Codex: `npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-architecture -g -a codex -y`
Cursor: `npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-architecture -g -a cursor -y`
Gemini CLI: `npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-architecture -g -a gemini-cli -y`

## Description

Angular architecture: Scope Rule, project structure, file naming, style guide. Trigger: When structuring Angular projects or deciding where to place components.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## The Scope Rule (REQUIRED)

**"Scope determines structure"** - Where a component lives depends on its usage.

| Usage | Placement |
|-------|-----------|
| Used by 1 feature | `features/[feature]/components/` |
| Used by 2+ features | `features/shared/components/` |

### Example

```
features/
  shopping-cart/
    shopping-cart.ts          # Main component = feature name
    components/
      cart-item.ts            # Used ONLY by shopping-cart
      cart-summary.ts         # Used ONLY by shopping-cart
  checkout/
    checkout.ts
    components/
      payment-form.ts         # Used ONLY by checkout
  shared/
    components/
      button.ts               # Used by shopping-cart AND checkout
      modal.ts                # Used by multiple features
```

---

## Project Structure

```
src/app/
  features/
    [feature-name]/
      [feature-name].ts       # Main component (same name as folder)
      components/             # Feature-specific components
      services/               # Feature-specific services
      models/                 # Feature-specific types
    shared/                   # ONLY for 2+ feature usage
      components/
      services/
      pipes/
  core/                       # App-wide singletons
    services/
    interceptors/
    guards/
  app.ts
  app.config.ts
  routes.ts
  main.ts
```

---

## File Naming (REQUIRED)

No `.component`, `.service`, `.model` suffixes. The folder tells you what it is.

```
✅ user-profile.ts
❌ user-profile.component.ts

✅ cart.ts
❌ cart.service.ts

✅ user.ts
❌ user.model.ts
```

---

## Style Guide

### What We Follow (from official docs)

- `inject()` over constructor injection
- `class` and `style` bindings over `ngClass`/`ngStyle`
- `protected` for template-only members
- `readonly` for inputs, outputs, queries
- Name handlers for action (`saveUser`) not event (`handleClick`)
- Keep lifecycle hooks simple - delegate to well-named methods
- One concept per file

The rest: https://github.com/Gentleman-Programming/Gentleman-Skills/blob/HEAD/curated/angular/architecture/SKILL.md