angular-architecture

作用域规则（必需）

“作用域决定结构”——组件的存放位置取决于其用途。

用途	存放位置
由 1 个功能使用	features/[feature]/components/
由 2 个或更多功能使用	features/shared/components/

示例

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

---

项目结构

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

---

文件命名（必需）

不要使用 .component、.service、.model 后缀。文件夹会说明文件的类型。

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

✅ cart.ts
❌ cart.service.ts

✅ user.ts
❌ user.model.ts

---

风格指南

我们遵循的规范（来自官方文档）

• 优先使用 inject()，而不是构造函数注入
• 优先使用 class 和 style 绑定，而不是 ngClass/ngStyle
• 仅供模板使用的成员使用 protected
• 输入、输出和查询使用 readonly
• 处理函数按操作命名（saveUser），而不是按事件命名（handleClick）
• 保持生命周期钩子简单——委托给名称清晰的方法
• 每个文件只包含一个概念

@Component({...})
export class UserProfileComponent {
  // 1. Injected dependencies
  private readonly userService = inject(UserService);
  
  // 2. Inputs/Outputs
  readonly userId = input.required<string>();
  readonly userSaved = output<User>();
  
  // 3. Internal state
  private readonly _loading = signal(false);
  readonly loading = this._loading.asReadonly();
  
  // 4. Computed
  protected readonly displayName = computed(() => ...);
  
  // 5. Methods
  save(): void { ... }
}

我们覆盖的规范

官方规范	我们的做法	原因
user-profile.component.ts	user-profile.ts	多余——文件夹已说明上下文
user.service.ts	user.ts	同上

---

命令

# New project
ng new my-app --style=scss --ssr=false

# Component in feature
ng g c features/products/components/product-card --flat

# Service in feature  
ng g s features/products/services/product --flat

# Guard in core
ng g g core/guards/auth --functional

---

资源

• https://angular.dev/style-guide