为什么选择Delon？探索ng-alain核心模块的10大优势

为什么选择Delon？探索ng-alain核心模块的10大优势

【免费下载链接】delonDelon is a set of essential modules for ng-alain. https://github.com/ng-alain/ng-alain/issues项目地址: https://gitcode.com/gh_mirrors/de/delon

Delon是ng-alain的核心模块集合，为Angular开发者提供了丰富的企业级组件和工具，帮助快速构建高质量的管理系统。无论是表单处理、数据可视化还是权限控制，Delon都能提供简单高效的解决方案，让开发变得更加轻松快捷。

1. 模块化架构设计，灵活扩展能力强 🧩

Delon采用模块化设计，将功能划分为多个独立模块，如abc、auth、acl、form、chart等，每个模块专注于特定功能领域。这种架构不仅使代码结构清晰，还能按需加载，减少不必要的资源消耗。

Delon模块化架构示意图，展示了基础设施库、脚手架和工具的层级结构

2. 强大的表单处理能力，轻松应对复杂场景 📝

Delon的@delon/form模块基于JSON Schema标准，支持动态构建表单，提供丰富的表单控件和验证规则。无论是简单的登录表单还是复杂的多步骤表单，都能轻松实现。

<sf [schema]="schema" (formSubmit)="submit($event)"></sf>

支持多种布局方式（水平、垂直、行内），并提供表单联动、数据格式化等高级功能，满足各种业务需求。

3. 丰富的数据可视化组件，直观展示业务数据 📊

Delon的@delon/chart模块提供了多种图表组件，如柱状图、折线图、饼图、雷达图等，基于G2和ECharts构建，支持自定义主题和交互效果，帮助开发者快速实现数据可视化。

Delon图表组件展示的数据分析面板，包含多种图表类型和数据指标

4. 完善的权限控制体系，保障系统安全 🔒

Delon的@delon/acl模块提供了细粒度的权限控制功能，支持基于角色和权限点的访问控制。通过简单的配置，可以实现按钮、菜单、路由等元素的权限管理。

<button [acl]="'admin'">管理员操作</button>

5. 高效的认证机制，轻松集成身份验证 🔑

@delon/auth模块提供了JWT和简单Token两种认证方式，支持自动在HTTP请求中添加认证信息，处理Token过期和刷新，简化身份验证流程。

provideHttpClient(withInterceptors([authJWTInterceptor]))

6. 实用的工具函数库，提升开发效率 ⚡

@delon/util模块包含了大量实用的工具函数，如日期格式化、字符串处理、数组操作、表单验证等，覆盖日常开发中的常见需求，减少重复代码编写。

formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'); formatMask('15900000000', '999****9999'); // 159****0000

7. 灵活的主题系统，打造个性化界面 🎨

Delon的主题系统支持多种主题切换（默认、暗黑、紧凑），通过LESS变量可以轻松定制界面风格，满足不同项目的视觉需求。

// 自定义主题变量 @primary-color: #1890ff; @layout-header-height: 64px;

8. 便捷的Mock数据功能，前后端并行开发 🚀

@delon/mock模块提供了模拟数据生成功能，支持自定义API规则，帮助前端开发者在后端接口未完成的情况下进行开发和测试，提高开发效率。

export const USERS = { 'GET /api/users': (req: MockRequest) => { return { list: MockService.mock({ 'id|1000-9999': 0, 'name': '@cname', 'age|18-60': 0 }, 10) }; } };

9. 响应式设计，适配多种设备 📱💻

Delon的组件和布局系统采用响应式设计，能够自动适应不同屏幕尺寸，从手机到桌面设备都能提供良好的用户体验。

Delon响应式布局在桌面设备上的展示效果

10. 优化的包体积，提升应用性能 🚀

Delon注重包体积优化，通过按需加载和Tree-Shaking，减少不必要的代码引入，提升应用加载速度和运行性能。

Delon应用的包体积分析，展示了各模块的资源占比

如何开始使用Delon？

1. 克隆仓库：

git clone https://gitcode.com/gh_mirrors/de/delon

2. 安装依赖：

npm install

3. 启动开发服务器：

npm run start

Delon为ng-alain提供了强大的支持，无论是快速原型开发还是大型企业应用，都能满足需求。通过其丰富的组件和工具，开发者可以专注于业务逻辑，提高开发效率和产品质量。

更多详细信息，请参考官方文档：

• ACL权限控制
• 表单开发
• 图表组件
• 主题定制
• Mock数据
• 认证机制
• 性能优化

【免费下载链接】delonDelon is a set of essential modules for ng-alain. https://github.com/ng-alain/ng-alain/issues项目地址: https://gitcode.com/gh_mirrors/de/delon