Ng-Matero：基于 Angular Material 搭建的中后台管理框架

本文链接：https://blog.csdn.net/nzb329/article/details/99728026

Ng-Matero 0.1 已发布，添加 schematics，支持 ng add

前言

目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。

很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。另外，Material 的确是一个高质量的组件库，不管是设计思路还是使用方式，都近乎完美。

经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet 工具。同时，为了弥补 Material 的不足以及更好的发挥框架的优势，我创建了另外一个项目以扩展 Material 的组件库。

因为目前还没有完善的文档，所以本篇文章会简单介绍一下框架的使用。

Github： https://github.com/ng-matero/ng-matero

预览地址： https://ng-matero.github.io/ng-matero/

目录结构

先看一下目录结构，这个目录结构遵循了 Angular 的最佳实践，尽量保证结构的规范化与合理性。

├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── interceptors                    # HTTP 拦截器
│   │   │   │   └── default.interceptor.ts      
│   │   │   ├── services
│   │   │   │   ├── settings.service.ts         # 页面布局配置
│   │   │   │   ├── menu.service.ts             # 菜单配置
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes-routing.module.ts        # 业务路由注册口
│   │   │   └── routes.module.ts                # 业务路由模块
│   │   ├── shared                              # 共享模块
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── theme                               # 主题目录
│   │   │   ├── admin-layout                    # admin 布局
│   │   │   ├── auth-layout                     # 登陆注册布局
│   │   |   └── theme.module.ts                 # 主题模块
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── material.module.ts                  # Material 组件模块
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
│   │   ├── component                           # 公用组件样式
│   │   ├── helpers                             # 工具类
│   │   ├── mixins                              # mixins
│   │   ├── plugins                             # 第三方库样式
│   │   ├── ** 
│   │   ├── theme                               # 主题核心样式
│   │   └── app.scss                            # 主题样式入口文件
└── └── style.scss                              # 样式主入口文件