angular 整洁架构目录结构

原创

mob649e815a6b81 2024-10-22 06:22:32 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815a6b81的原创作品，请联系作者获取转载授权，否则将追究法律责任

Angular 整洁架构及其目录结构

在现代前端开发中，Angular 被广泛使用。为了确保大型应用程序的可维护性和可扩展性，采用整洁架构（Clean Architecture）是一种推荐的做法。整洁架构的核心思想是将业务逻辑、应用逻辑和外部层进行隔离，使得系统更加可测、可维护，且具有良好的灵活性。接下来，我们将探讨 Angular 的整洁架构及其推荐的目录结构。

整洁架构概述

整洁架构由以下几个主要层次构成：

实体（Entities）：表示业务规则与数据模型。
用例（Use Cases）：定义应用的具体操作，包含各类业务逻辑。
接口适配器（Interface Adapters）：将数据从外部层（如数据库、API）转换为用例所需的格式。
框架与驱动（Frameworks and Drivers）：如 UI 框架、数据库、HTTP 请求等。

在 Angular 中，整洁架构的实现通常建议如下目录结构：

src/
|-- app/
|   |-- core/
|   |   |-- services/
|   |   |-- guards/
|   |   |-- interceptors/
|   |-- features/
|   |   |-- feature-a/
|   |   |   |-- components/
|   |   |   |-- services/
|   |   |   |-- store/
|   |   |-- feature-b/
|   |-- shared/
|   |   |-- components/
|   |   |-- directives/
|   |   |-- pipes/
|   |-- models/
|   |-- utils/
|-- assets/
|-- environments/

目录结构解读

core/: 这里存放应用的核心功能，如单例服务、守卫和拦截器，避免被多次导入。
features/: 每一个特性模块包括该特性的所有组件、服务和状态管理文件，可以进行懒加载，从而优化加载性能。这种模块化使得功能易于扩展和维护。
shared/: 存放可以跨多个特性复用的组件、指令和管道。
models/: 封装数据模型和类型，有助于类型安全和代码可读性。
utils/: 存放一些通用工具函数，方便全局使用。

状态图

在 Angular 应用中，状态管理至关重要。我们可以使用状态图来演示一个用例的状态流转过程。

stateDiagram
    [*] --> 主页面
    主页面 --> 数据加载中
    数据加载中 --> 数据加载成功: 加载成功
    数据加载中 --> 数据加载失败: 加载失败
    数据加载成功 --> 显示数据
    数据加载失败 --> 错误提示

使用状态管理库

在 Angular 中，常用的状态管理库有 NgRx 和 Akita。以下示范如何通过 NgRx 进行状态管理。

// actions.ts
import { createAction, props } from '@ngrx/store';

export const loadItems = createAction('[Item List] Load Items');
export const loadItemsSuccess = createAction(
  '[Item List] Load Items Success',
  props<{ items: Item[] }>()
);
export const loadItemsFailure = createAction(
  '[Item List] Load Items Failure',
  props<{ error: any }>()
);

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import { loadItems, loadItemsSuccess, loadItemsFailure } from './actions';

export interface State {
    items: Item[];
    error: any;
    loading: boolean;
}

export const initialState: State = {
    items: [],
    error: null,
    loading: false,
};

export const itemReducer = createReducer(
    initialState,
    on(loadItems, state => ({ ...state, loading: true })),
    on(loadItemsSuccess, (state, { items }) => ({ ...state, loading: false, items })),
    on(loadItemsFailure, (state, { error }) => ({ ...state, loading: false, error }))
);

旅行图

旅行图可以帮助我们理解用户在应用中如何互动。以下是一个用户在 Angular 应用中进行的操作流程示例。

journey
    title 用户在应用中的互动
    section 登录模块
      用户打开应用: 5: 用户
      用户填写账号密码: 4: 用户
      用户点击登录: 5: 用户
    section 数据加载
      系统加载用户数据: 3: 系统
      用户查看数据: 4: 用户