<p>&lt;div align=&quot;center&quot;&gt;
    &lt;img src=&quot;<a href="https://avatars1.githubusercontent.com/u/46649777?s=200&amp;v=4">https://avatars1.githubusercontent.com/u/46649777?s=200&amp;v=4</a>&quot; /&gt;
&lt;/div&gt;
&lt;h1 align=&quot;center&quot; style=&quot;margin-top:10px&quot;&gt;
    NG-NEST-ADMIN
&lt;/h1&gt;

</p>
<p>基于 Angular 和 Nestjs 构建的开源后台管理系统。<a href="http://adminui.ngnest.com">Demo 地址</a></p>
<blockquote>
<ul>
<li>提供基本的系统管理模块（用户、角色、组织和菜单）</li>
<li>基于 RBAC 的权限管理</li>
<li>使用对应的 @ng-nest/ui 组件库</li>
</ul>
</blockquote>
<hr>
<h3 id="支持环境">支持环境</h3>
<ul>
<li>Angular ^14.0.0</li>
<li>Nestjs ^7.0.0</li>
</ul>
<p>Chrome Microsoft Edge Firefox Safari
最新 2 个版本 最新 2 个版本 最新 2 个版本 最新 2 个版本</p>
<h3 id="2-目录说明">2. 目录说明</h3>
<table>
<thead>
<tr>
<th>目录</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>api</td>
<td>Nestjs 后台 API 接口项目</td>
</tr>
<tr>
<td>ui</td>
<td>Angular 前端项目</td>
</tr>
</tbody></table>
<h3 id="3-开始--后台">3. 开始--后台</h3>
<p>demo 使用 <code>TypeORM</code> 连接的 <code>MySql</code> 数据库，运行前请在 <code>api/ormconfig.json</code> 文件中配置好数据库连接。<br><code>MySql</code> 数据库文件 <code>api/ng-nest-admin.sql</code> ，新建一个数据库直接执行导入。 </p>
<pre><code class="language-bash">$ cd api
$ npm install
$ npm run start:dev
</code></pre>
<h3 id="4-开始--前端">4. 开始--前端</h3>
<pre><code class="language-bash">$ cd ui
$ npm install
$ ng serve -o
</code></pre>
<p>&lt;img style=&quot;border: 1px solid #fefefe&quot; src=&quot;<a href="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png">https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png</a>&quot; /&gt;
&lt;img style=&quot;border: 1px solid #fefefe&quot; src=&quot;<a href="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/dark.png">https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/dark.png</a>&quot; /&gt;</p>


提供基本的系统管理模块（用户、角色、组织和菜单），基于 RBAC 的权限管理
使用对应的 @ng-nest/ui 组件库

ng-nest-admin: Angular 和 Nestjs 构建的开源后台管理系统，基于 @ng-nest/ui 组件库

<hr>
<p>&lt;p align=&quot;center&quot;&gt;&lt;img src=&quot;./src/erupt.svg&quot; height=&quot;150&quot; alt=&quot;logo&quot;/&gt;&lt;/p&gt;
&lt;h2 align=&quot;center&quot;&gt;Erupt Framework &nbsp; 🚀 &nbsp; 通用后台管理框架&lt;/h2&gt;
&lt;h3 align=&quot;center&quot;&gt;前端源码&lt;/h3&gt;
&lt;h3 align=&quot;center&quot;&gt;&lt;a href=&quot;<a href="https://erupt.xyz">https://erupt.xyz</a>&quot; target=&quot;_blank&quot;&gt;<a href="https://www.erupt.xyz&lt;/a&gt;&lt;/h3">https://www.erupt.xyz&lt;/a&gt;&lt;/h3</a>&gt;

</p>
<hr>
<p>&lt;h4 align=&quot;center&quot;&gt;通过 JSON Schema 自动构建表单，实现了erupt零前端代码能力&lt;/h4&gt;

</p>
<hr>
<p>&lt;p align=&quot;center&quot;&gt;
    &lt;a href=&quot;<a href="https://www.erupt.xyz">https://www.erupt.xyz</a>&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;<a href="https://img.shields.io/badge/Erupt-Framework-brightgreen">https://img.shields.io/badge/Erupt-Framework-brightgreen</a>&quot; alt=&quot;Erupt Framework&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://mvnrepository.com/search?q=erupt&quot;&gt;&lt;img">https://mvnrepository.com/search?q=erupt&quot;&gt;&lt;img</a> src=&quot;<a href="https://img.shields.io/maven-central/v/xyz.erupt/erupt">https://img.shields.io/maven-central/v/xyz.erupt/erupt</a>&quot; alt=&quot;maven-central&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://www.oracle.com/technetwork/java/javase/downloads/index.html&quot;&gt;&lt;img">https://www.oracle.com/technetwork/java/javase/downloads/index.html&quot;&gt;&lt;img</a> src=&quot;<a href="https://img.shields.io/badge/JDK-8+-green.svg">https://img.shields.io/badge/JDK-8+-green.svg</a>&quot; alt=&quot;jdk 8+&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;./LICENSE&quot;&gt;&lt;img src=&quot;<a href="https://img.shields.io/badge/license-Apache%202-blue">https://img.shields.io/badge/license-Apache%202-blue</a>&quot; alt=&quot;license Apache 2.0&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://gitee.com/erupt/erupt&quot;&gt;&lt;img">https://gitee.com/erupt/erupt&quot;&gt;&lt;img</a> src=&quot;<a href="https://gitee.com/erupt/erupt/badge/star.svg?theme=dark">https://gitee.com/erupt/erupt/badge/star.svg?theme=dark</a>&quot; alt=&quot;Gitee star&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://gitee.com/erupt/erupt&quot;&gt;&lt;img">https://gitee.com/erupt/erupt&quot;&gt;&lt;img</a> src=&quot;<a href="https://gitee.com/erupt/erupt/badge/fork.svg?theme=dark">https://gitee.com/erupt/erupt/badge/fork.svg?theme=dark</a>&quot; alt=&quot;Gitee fork&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://github.com/erupts/erupt&quot;&gt;&lt;img">https://github.com/erupts/erupt&quot;&gt;&lt;img</a> src=&quot;<a href="https://img.shields.io/github/stars/erupts/erupt?style=social">https://img.shields.io/github/stars/erupts/erupt?style=social</a>&quot; alt=&quot;GitHub stars&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;<a href="https://github.com/erupts/erupt&quot;&gt;&lt;img">https://github.com/erupts/erupt&quot;&gt;&lt;img</a> src=&quot;<a href="https://img.shields.io/github/forks/erupts/erupt?style=social">https://img.shields.io/github/forks/erupts/erupt?style=social</a>&quot; alt=&quot;GitHub forks&quot;&gt;&lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;p align=&quot;center&quot;&gt;
    &lt;a href=&quot;<a href="https://github.com/erupts/erupt&quot;&gt;Github">https://github.com/erupts/erupt&quot;&gt;Github</a> 仓库&lt;/a&gt; &nbsp; | &nbsp; 
    &lt;a href=&quot;<a href="https://gitee.com/erupt/erupt&quot;&gt;%E7%A0%81%E4%BA%91%E4%BB%93%E5%BA%93&lt;/a">https://gitee.com/erupt/erupt&quot;&gt;码云仓库&lt;/a</a>&gt; &nbsp; | &nbsp; 
    &lt;a href=&quot;<a href="https://www.erupt.xyz">https://www.erupt.xyz</a>&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;🦅 官方网站&lt;/b&gt;&lt;/a&gt; &nbsp; | &nbsp; 
    &lt;a href=&quot;<a href="https://www.erupt.xyz/demo">https://www.erupt.xyz/demo</a>&quot; target=&quot;_blank&quot;&gt;在线体验&lt;/a&gt; &nbsp; | &nbsp; 
    &lt;a href=&quot;<a href="https://www.yuque.com/erupts">https://www.yuque.com/erupts</a>&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;📕 使用文档&lt;/b&gt;&lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;p align=&quot;center&quot;&gt;
    QQ交流群：&lt;a href=&quot;<a href="https://jq.qq.com/?_wv=1027&amp;k=MCd4plZ0&quot;&gt;821389129">https://jq.qq.com/?_wv=1027&amp;k=MCd4plZ0&quot;&gt;821389129</a> 🔥&lt;/a&gt;
&lt;/p&gt;

</p>
<hr>
<h2 id="⛰-环境搭建">⛰ 环境搭建</h2>
<p>在开始之前，请确保你的开发环境中包括 Node.js 和 npm 包管理器。</p>
<p>Angular 需要 Node.js 版本 10.9.0 或更高版本。</p>
<p>要检查你的版本，请在终端/控制台窗口中运行 node -v</p>
<h2 id="🥌-使用方法">🥌 使用方法</h2>
<ol>
<li>安装 yarn</li>
</ol>
<pre><code class="language-shell">npm install -g yarn
</code></pre>
<ol start="2">
<li>构建：</li>
</ol>
<pre><code class="language-shell">yarn install
</code></pre>
<ol start="3">
<li>修改服务端地址</li>
</ol>
<pre><code>/proxy.config.json → target
</code></pre>
<ol start="4">
<li>启动：</li>
</ol>
<pre><code class="language-shell">yarn run start
</code></pre>
<h2 id="🍭-打包编译：">🍭 打包编译：</h2>
<ol>
<li>修改 angular.json 打包路径：<blockquote>
<p>projects.architect.build.options.outputPath</p>
</blockquote>
</li>
<li>执行打包命令</li>
</ol>
<pre><code class="language-shell">yarn run build
</code></pre>
<h2 id="📟-核心技术栈">📟 核心技术栈</h2>
<p>TypeScript / RxJS / Less / Angular / ng-zorro-antd / ng-alain</p>
<h2 id="🏅-代码仓库--git-repository">🏅 代码仓库 | Git Repository</h2>
<table>
<thead>
<tr>
<th></th>
<th>Github</th>
<th>码云</th>
</tr>
</thead>
<tbody><tr>
<td>后端源码</td>
<td><a href="https://github.com/erupts/erupt">https://github.com/erupts/erupt</a></td>
<td><a href="https://gitee.com/erupt/erupt">https://gitee.com/erupt/erupt</a></td>
</tr>
<tr>
<td>前端源码</td>
<td><a href="https://github.com/erupts/erupt-web">https://github.com/erupts/erupt-web</a></td>
<td><a href="https://gitee.com/erupt/erupt-web">https://gitee.com/erupt/erupt-web</a></td>
</tr>
<tr>
<td>示例代码</td>
<td><a href="https://github.com/erupts/erupt-example">https://github.com/erupts/erupt-example</a></td>
<td><a href="https://gitee.com/erupt/erupt-example">https://gitee.com/erupt/erupt-example</a></td>
</tr>
</tbody></table>
<hr>


自动建表：表结构自动生成，无需手动建表，易于上手：会简单的 Spring Boot 基础知识即可，使用简单：仅需了解 @Erupt 与 @EruptField 两个注解即可上手开发，代码简洁：仅需一个 .java 文件, template、controller、service、dao 都不需要创建

Erupt 框架前端源码，实现了 erupt 开发过程中零前端代码能力

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://github.com/ng-matero">https://github.com/ng-matero</a>&quot;&gt;
    &lt;img width=&quot;150&quot; src=&quot;<a href="https://avatars1.githubusercontent.com/u/49753463?s=200&amp;v=4">https://avatars1.githubusercontent.com/u/49753463?s=200&amp;v=4</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;h1 align=&quot;center&quot;&gt;
NG-MATERO
&lt;/h1&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p>Ng-Matero is an Angular admin template made with Material components.</p>
<p><a href="https://www.codefactor.io/repository/github/ng-matero/ng-matero"><img src="https://www.codefactor.io/repository/github/ng-matero/ng-matero/badge" alt="CodeFactor"></a>
<a href="https://www.npmjs.com/package/ng-matero"><img src="https://img.shields.io/npm/v/ng-matero.svg" alt="npm"></a>
<a href="https://github.com/ng-matero/ng-matero/releases"><img src="https://img.shields.io/github/release-date/ng-matero/ng-matero" alt="GitHub Release Date"></a>
<a href="https://prettier.io/"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" alt="prettier"></a>
<a href="https://github.com/ng-matero/ng-matero/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="GitHub license"></a>
<a href="https://gitter.im/matero-io/ng-matero"><img src="https://img.shields.io/gitter/room/ng-matero/ng-matero.svg" alt="Gitter"></a>
<a href="https://nzbin.gitbook.io/ng-matero/"><img src="https://img.shields.io/badge/docs-gitbook-red" alt="docs"></a>
<a href="https://github.com/ng-matero/extensions#readme"><img src="https://img.shields.io/badge/material-extensions-blue" alt="Material Extensions"></a>
<a href="https://opencollective.com/ng-matero"><img src="https://opencollective.com/ng-matero/all/badge.svg?label=financial+contributors" alt="Financial Contributors on Open Collective"></a></p>
<p>&lt;/div&gt;

</p>
<h2 id="✨-features">✨ Features</h2>
<ul>
<li>Material Extensions</li>
<li>Schematics support</li>
<li>Modern design style</li>
<li>Multiple admin layout</li>
<li>Powerful color system</li>
<li>Rich CSS helpers</li>
<li>Dark mode support</li>
<li>RTL support</li>
<li>Internationalization</li>
<li>Authentication</li>
<li>HTTP interceptors</li>
<li>Permissions management</li>
</ul>
<h2 id="📖-documentation">📖 Documentation</h2>
<p><a href="https://nzbin.gitbook.io/ng-matero/v/en-2/">English</a> ｜<a href="https://nzbin.gitbook.io/ng-matero/">简体中文</a></p>
<h2 id="📦-compatibility">📦 Compatibility</h2>
<p>Which version to use?</p>
<table>
<thead>
<tr>
<th>Angular</th>
<th>Material</th>
<th>Ng-Matero</th>
<th>Extensions</th>
</tr>
</thead>
<tbody><tr>
<td>v15</td>
<td>v15</td>
<td>15.x.x</td>
<td>15.x.x</td>
</tr>
<tr>
<td>v14</td>
<td>v14</td>
<td>14.3.0</td>
<td>14.6.3</td>
</tr>
<tr>
<td>v13</td>
<td>v13</td>
<td>13.1.1</td>
<td>13.3.1</td>
</tr>
<tr>
<td>v12</td>
<td>v12</td>
<td>12.8.0</td>
<td>12.10.1</td>
</tr>
<tr>
<td>v11</td>
<td>v11</td>
<td>11.3.2</td>
<td>11.5.1</td>
</tr>
<tr>
<td>v10</td>
<td>v10</td>
<td>10.4.1</td>
<td>10.16.5</td>
</tr>
<tr>
<td>v9</td>
<td>v9</td>
<td>9.7.2</td>
<td>9.11.14</td>
</tr>
<tr>
<td>v8</td>
<td>v8</td>
<td>0.16.0</td>
<td>0.9.3</td>
</tr>
</tbody></table>
<h2 id="🔧-installation">🔧 Installation</h2>
<p>The project has support <code>ng add</code> yet.</p>
<pre><code class="language-bash">$ ng new &lt;project-name&gt;
$ cd &lt;project-name&gt;
$ ng add ng-matero
</code></pre>
<p>You can also git clone the starter repo to start. But it&#39;s not recommended.</p>
<pre><code class="language-bash">$ git clone --depth=1 git@github.com:ng-matero/starter.git &lt;project-name&gt;
$ cd &lt;project-name&gt;
$ npm install
</code></pre>
<h2 id="⚙️-schematics">⚙️ Schematics</h2>
<p>You can use the ng-matero schematics to generate a module or a page.</p>
<h3 id="module-schematic">Module schematic</h3>
<p>Generate a lazy loaded module.</p>
<pre><code class="language-bash">$ ng g ng-matero:module &lt;module-name&gt;
</code></pre>
<p>The new module will be created in <code>routes</code> folder, it will be added in <code>routes.module</code> and its route declaration will be added in <code>routes-routing.module</code> automaticly.</p>
<h3 id="page-schematic">Page schematic</h3>
<p>Generate a page component in the module.</p>
<pre><code class="language-bash">$ ng g ng-matero:page &lt;page-name&gt; -m=&lt;module-name&gt;
</code></pre>
<p>Generate a entry component in the page component.</p>
<pre><code class="language-bash">$ ng g ng-matero:page &lt;page-name&gt;/&lt;entry-component-name&gt; -m=&lt;module-name&gt; -e=true
</code></pre>
<h3 id="example">Example</h3>
<p>Just two steps after initializing the project, you can get a route page.</p>
<pre><code class="language-bash">$ ng g ng-matero:module abc
$ ng g ng-matero:page def -m=abc
</code></pre>
<p>Take a look at <code>http://localhost:4200/#/abc/def</code>, enjoy it!</p>
<h2 id="💻-development">💻 Development</h2>
<pre><code class="language-bash">$ git clone git@github.com:ng-matero/ng-matero.git
$ cd ng-matero
$ npm install
$ npm run hmr
</code></pre>
<p>Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
<h2 id="🗺-roadmap">🗺 Roadmap</h2>
<p>Check <a href="https://github.com/ng-matero/ng-matero/projects">projects</a> to know the develop plans.</p>
<h2 id="🤝-contributors">🤝 Contributors</h2>
<h3 id="code-contributors">Code Contributors</h3>
<p>This project exists thanks to all the people who contribute. [<a href="CONTRIBUTING.md">Contribute</a>].
&lt;a href=&quot;https://github.com/ng-matero/ng-matero/graphs/contributors&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/contributors.svg?width=890&amp;button=false&quot; /&gt;&lt;/a&gt;</p>
<h3 id="financial-contributors">Financial Contributors</h3>
<p>Become a financial contributor and help us sustain our community. [<a href="https://opencollective.com/ng-matero/contribute">Contribute</a>]</p>
<h4 id="individuals">Individuals</h4>
<p>&lt;a href=&quot;https://opencollective.com/ng-matero&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/individuals.svg?width=890&quot;&gt;&lt;/a&gt;</p>
<h4 id="organizations">Organizations</h4>
<p>Support this project with your organization. Your logo will show up here with a link to your website. [<a href="https://opencollective.com/ng-matero/contribute">Contribute</a>]</p>
<p>&lt;a href=&quot;https://opencollective.com/ng-matero/organization/0/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/0/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/1/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/1/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/2/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/2/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/3/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/3/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/4/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/4/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/5/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/5/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/6/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/6/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/7/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/7/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/8/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/8/avatar.svg&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://opencollective.com/ng-matero/organization/9/website&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-matero/organization/9/avatar.svg&quot;&gt;&lt;/a&gt;</p>
<h2 id="📃-license">📃 License</h2>
<p>MIT</p>


开发 ng-matero 的初衷是希望提供一个基于 Angular Material 组件库的高质量、高度可定制的后台模板，同时基于 Schematics 提供更便利的业务指令。

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

<h1 id="ng-ant-admin">ng-ant-admin</h1>
<h1 id="在线文档">在线文档</h1>
<p><a href="http://1.117.181.242:8081/">doc</a></p>
<h1 id="注意，在maints中添加了-ngzoneeventcoalescing-true-ngzoneruncoalescing-true-，用于提升性能，如果你把握不住，请删除这两个属性（我在本项目中（纯净版）已经删除具体请在完整版本的ng-ant-admin中查看对应注释）">注意，在main.ts中添加了{ ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }，用于提升性能，如果你把握不住，请删除这两个属性,（我在本项目中（纯净版）已经删除具体请在完整版本的ng-ant-admin中查看对应注释）</h1>
<h1 id="项目介绍">项目介绍</h1>
<p>Ng-Ant-Admin 3.0发布(添加服务端真实接口)&lt;br&gt;
自费服务器，在线示例网速比较慢，抱歉&lt;br&gt;
如果本项目对您有用，麻烦帮我点个star，谢谢啊&lt;br&gt;
if help you, if you want ,please give me a star ,thank you&lt;br&gt;
账号admin，密码123456 ,数据库每10分钟从备份恢复一次&lt;br&gt;
默认登录超时时间为1h，上传，下载，websocket，系统管理模块均为真实接口调用展示。&lt;br&gt;
完成最常用的权限控制，人员账号管理，角色管理，菜单管理，登录超时等。添加了大量业务示例，开箱即用。&lt;br&gt;
使用本项目遇到问题，可以加入376065816 qq群号与我沟通。&lt;br&gt;</p>
<p>快速二开使用详解 <a href="https://www.bilibili.com/video/BV1gF411x7rN/">快速二开使用详解</a>&lt;br&gt;
项目搭建简易教程 <a href="https://www.bilibili.com/video/BV1EM4y1w7zd/">项目搭建简易教程</a>&lt;br&gt;
online demo地址 <a href="http://1.117.181.242/">demo</a>&lt;br&gt;
纯净版项目地址 <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-pure/">pure</a>&lt;br&gt;
pure project address <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-pure/">pure</a>&lt;br&gt;
服务端源码地址 <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-api">serviceApi</a>&lt;br&gt;
serviceApi address <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-api">serviceApi</a>&lt;br&gt;
线上swagger地址 <a href="http://1.117.181.242:8003/swagger-ui.html#/">swagger</a>&lt;br&gt;</p>
<h1 id="路由的key">路由的key</h1>
<p>key需要设置成路由地址最后一个&#39;/&#39;后的字符串，并且要唯一</p>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, data: {key: &#39;login&#39;, shouldDetach: &#39;no&#39;}, component: LoginFormComponent}
];
</code></pre>
<h1 id="栅格系统监听">栅格系统监听</h1>
<pre><code class="language-angular2html">enum EquipmentWidth {
  xs,  // (max-width: 575.98px)
  sm,  // (min-width: 576px) and (max-width: 767.98px)
  md,  // (min-width: 768px) and (max-width: 991.98px)
  lg,  // (min-width: 992px) and (max-width: 1199.98px)
  xl,  // (min-width: 1200px) and (max-width: 1599.98px)
  xxl  // (min-width: 1600px)
}
</code></pre>
<p>使用方式</p>
<pre><code>  constructor(private windowsWidthService: WindowsWidthService) {
  }
  
  this.windowsWidthService.getWindowWidthStore().pipe(takeUntil(this.destory$)).subscribe(res =&gt; {
    this.currentEquipmentWidth = res;
    this.cdr.markForCheck();
  })
</code></pre>
<h1 id="模块不需要预加载">模块不需要预加载</h1>
<pre><code class="language-typescript">export const routes: Routes = [
  {
    path: &#39;contact&#39;,
    loadChildren: import(() =&gt; &#39;./contact/contact.module&#39;).then(m =&gt; m.ContactModule),
    data: {
      preload: false
    }
  }
];
</code></pre>
<h1 id="模块不需要保存状态">模块不需要保存状态</h1>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, data: {key: &#39;login&#39;, shouldDetach: &#39;no&#39;}, component: LoginFormComponent}
];
</code></pre>
<h1 id="模块中打开新tab页来展示详情，必须设置参数如下">模块中打开新tab页来展示详情，必须设置参数如下</h1>
<p>在data中设置newTab</p>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, component: TabsComponent, data: {title: &#39;标签页操作&#39;, key: &#39;tabs&#39;}},
  {path: &#39;example-detail&#39;, component: DetailComponent, data: {newTab:&#39;true&#39;, title: &#39;演示详情&#39;, key: &#39;example-detail&#39;}}
];
</code></pre>
<h1 id="缓存页面中指定容器的滚动条">缓存页面中指定容器的滚动条</h1>
<p>在data中设置scrollContain 为元素选择器</p>
<pre><code class="language-typescript">  {path: &#39;&#39;, component: KeepScrollPageComponent, data: {title: &#39;缓存滚动条&#39;, key: &#39;keep-scroll-page&#39;,scrollContain:[&#39;#div-scroll1&#39;,&#39;#div-scroll2&#39;]}}
</code></pre>
<h1 id="切换tab调用的临时声明周期如下">切换tab调用的临时声明周期如下</h1>
<pre><code class="language-typescript">_onReuseInit: () =&gt; void;
_onReuseDestroy: () =&gt; void;
</code></pre>
<p>直接在目标组件中写出方法名为_onReuseInit或者_onReuseDestroy的方法即可实现</p>
<h2 id="系统截图">系统截图</h2>
<p><img src="https://gitee.com/hjxiaoqianduan/ng-ant-admin/raw/master/projectImg/11.png" alt="ScreenShot"></p>
<h2 id="捐赠">捐赠</h2>
<p>如果本项目对您有用，正巧您如果也想请我喝一杯咖啡，请扫下面的码，哈哈&lt;br&gt;
If this project is useful to you, and you happen to want to invite me for a cup of coffee, please scan Alipay or WeChat&lt;br&gt;
<img src="https://gitee.com/hjxiaoqianduan/ng-ant-admin/raw/master/projectImg/weixin.jpeg" alt="ScreenShot">
<img src="https://gitee.com/hjxiaoqianduan/ng-ant-admin/raw/master/projectImg/zhifubao.jpeg" alt="ScreenShot"></p>
<h3 id="license">License</h3>
<p>MIT </p>


完成最常用的权限控制，人员账号管理，角色管理，菜单管理，登录超时等。添加了大量业务示例，开箱即用

纯净ng-ant-admin: 基于Ng-Ant-Admin 3.0发布(添加服务端真实接口)

<h1 id="ng-zorro-admin">ng-zorro-admin</h1>
<ul>
<li>个人维护, 仅支持中文 I18n 太麻烦,不如 google 翻译</li>
<li>此项目没有任何单元测试</li>
<li>增加手机端自适应</li>
<li>升级到ng-zorro-antd 14.x angular 14.x</li>
</ul>
<p>项目基于 <code>angular</code> , <code>ng-zorro-antd</code>  开发，
layout 初始版基于 <a href="https://github.com/NG-ZORRO/ng-zorro-antd">ng-zorro-antd</a> 后续会逐步升级优化</p>
<p>参照 <code>Ant Design Pro</code> 实现的 angular 风格的后台管理系统</p>
<ul>
<li><p><a href="https://angular.cn/">angular</a></p>
</li>
<li><p><a href="https://github.com/NG-ZORRO/ng-zorro-antd">ng-zorro-antd</a></p>
</li>
<li><p><a href="https://github.com/llkui/ng-antd-admin">llkui/ng-antd-admin</a></p>
</li>
</ul>
<p><a href="http://ng.ant.design"><img src="https://img.alicdn.com/tfs/TB1t6QPylr0gK0jSZFnXXbRRXXa-4000-1378.png" alt=""></a></p>
<p><a href="https://imgtu.com/i/bAy9qf"><img src="https://s4.ax1x.com/2022/02/25/bAy9qf.png" alt="bAy9qf.png"></a></p>
<h2 id="📦-安装">📦 安装</h2>
<pre><code class="language-bash">$ git clone https://github.com/wangz-code/ng-zorro-admin.git ng-zorro-admin
$ cd ng-zorro-admin
$ npm install
</code></pre>
<h2 id="📝-开发环境">📝 开发环境</h2>
<pre><code class="language-bash">$ yarn dev
</code></pre>
<h2 id="🎉-打包">🎉 打包</h2>
<pre><code class="language-bash">$ yarn build
</code></pre>
<h2 id="☀️-license">☀️ License</h2>
<p><a href="https://github.com/wangz-code/ng-zorro-admin/blob/main/LICENSE">MIT</a></p>
<h2 id="🖥-支持环境">🖥 支持环境</h2>
<ul>
<li>Angular <code>^14.x</code> <a href="https://www.npmjs.org/package/ng-zorro-antd"><img src="https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square" alt="npm package"></a></li>
<li>支持服务端渲染</li>
<li>现代浏览器，<a href="https://angular.io/guide/browser-support">浏览器支持</a></li>
<li><a href="http://electron.atom.io/">Electron</a></li>
</ul>
<table>
<thead>
<tr>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png&quot; alt=&quot;IE / Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;IE / Edge</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Firefox</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Chrome</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Safari</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png&quot; alt=&quot;Opera&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Opera</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png&quot; alt=&quot;Electron&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Electron</th>
</tr>
</thead>
<tbody><tr>
<td>Edge</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>


个人维护, 仅支持中文 I18n 太麻烦,不如 google 翻译，此项目没有任何单元测试
增加手机端自适应，升级到ng-zorro-antd 14.x angular 14.x

ng-zorro-admin: 基于 ng-zorro-antd 开发，参照 Ant Design Pro 实现的 angular 风格的后台管理系统

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://ng-alain.com">https://ng-alain.com</a>&quot;&gt;
    &lt;img width=&quot;100&quot; src=&quot;<a href="https://ng-alain.com/assets/img/logo-color.svg">https://ng-alain.com/assets/img/logo-color.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;h1 align=&quot;center&quot;&gt;NG-ALAIN&lt;/h1&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;
  一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务。

</p>
<p>  <a href="https://dev.azure.com/ng-alain/ng-alain/_build/latest?definitionId=2&amp;branchName=master"><img src="https://dev.azure.com/ng-alain/ng-alain/_apis/build/status/ng-alain-CI?branchName=master" alt="Build Status"></a>
  <a href="https://github.com/ng-alain/ng-alain/releases"><img src="https://img.shields.io/github/release-date/ng-alain/ng-alain.svg?style=flat-square" alt="GitHub Release Date"></a>
  <a href="https://www.npmjs.com/package/ng-alain"><img src="https://img.shields.io/npm/v/ng-alain.svg?style=flat-square" alt="NPM version"></a>
  <a href="https://prettier.io/"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
  <a href="https://github.com/ng-alain/ng-alain/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square" alt="GitHub license"></a>
  <a href="https://gitter.im/ng-alain/ng-alain"><img src="https://img.shields.io/gitter/room/ng-alain/ng-alain.svg?style=flat-square" alt="Gitter"></a>
  <a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode"><img src="https://img.shields.io/badge/ng--zorro-VSCODE-brightgreen.svg?style=flat-square" alt="ng-zorro-vscode"></a>
  <a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode"><img src="https://img.shields.io/badge/ng--alain-VSCODE-brightgreen.svg?style=flat-square" alt="ng-alain-vscode"></a></p>
<p>&lt;/div&gt;

</p>
<p><a href="README.md">English</a> | 简体中文</p>
<h2 id="快速入门">快速入门</h2>
<ul>
<li><a href="https://ng-alain.com/docs/getting-started">如何开始使用？</a></li>
</ul>
<h2 id="链接">链接</h2>
<ul>
<li><a href="https://ng-alain.com">Document</a> (<a href="https://ng-alain-doc.surge.sh">Surge Mirror</a>)</li>
<li><a href="https://github.com/ng-alain/delon">@delon Source</a></li>
<li><a href="https://ng-alain.surge.sh">DEMO</a> (<a href="https://ng-alain.gitee.io/">国内镜像</a>)</li>
</ul>
<h2 id="特性">特性</h2>
<ul>
<li>基于 <code>ng-zorro-antd</code></li>
<li>响应式</li>
<li>国际化</li>
<li>基建类库 <a href="https://github.com/ng-alain/delon">@delon</a>（包括：业务组件、ACL访问控制、缓存、授权、动态表单等）</li>
<li>延迟加载及良好的启用画面</li>
<li>良好的UI路由设计</li>
<li>定制主题</li>
<li>Less预编译</li>
<li>RTL</li>
<li>良好的目录组织结构</li>
<li>简单升级</li>
<li>支持Docker部署</li>
</ul>
<h2 id="architecture">Architecture</h2>
<p><img src="https://raw.githubusercontent.com/ng-alain/delon/master/_screenshot/architecture.png" alt="Architecture"></p>
<blockquote>
<p><a href="https://github.com/ng-alain/delon">delon</a> 是基于 Ant Design 设计理念的企业级中后台前端业务型组件库。</p>
</blockquote>
<h2 id="应用截图">应用截图</h2>
<p><img src="https://raw.githubusercontent.com/ng-alain/delon/master/_screenshot/desktop.png" alt="desktop">
<img src="https://raw.githubusercontent.com/ng-alain/delon/master/_screenshot/ipad.png" alt="ipad">
<img src="https://raw.githubusercontent.com/ng-alain/delon/master/_screenshot/iphone.png" alt="iphone"></p>
<h2 id="如何贡献">如何贡献</h2>
<p><a href="https://github.com/ng-alain/ng-alain/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"></a></p>
<p>在任何形式的参与前，请先阅读 <a href="https://github.com/ng-alain/ng-alain/blob/master/CONTRIBUTING.md">贡献者文档</a>。如果你希望参与贡献，欢迎 <a href="https://github.com/ng-alain/ng-alain/pulls">Pull Request</a>，或给我们 <a href="https://ng-alain.com/issue-helper/index.html#zh">报告 Bug</a>。</p>
<blockquote>
<p>强烈推荐阅读 <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way">《提问的智慧》</a>(<strong>本指南不提供此项目的实际支持服务！</strong>)、<a href="https://github.com/seajs/seajs/issues/545">《如何向开源社区提问题》</a> 和 <a href="http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html">《如何有效地报告 Bug》</a>、<a href="https://zhuanlan.zhihu.com/p/25795393">《如何向开源项目提交无法解答的问题》</a>，更好的问题更容易获得帮助。</p>
</blockquote>
<h2 id="赞助">赞助</h2>
<p>ng-alain是MIT协议的开源项目。为了项目能够更好的持续的发展，我们期望获得更多的支持者，你可以通过如下任何一种方式支持我们：</p>
<ul>
<li><a href="https://www.patreon.com/cipchk">patreon</a></li>
<li><a href="https://opencollective.com/ng-alain">opencollective</a></li>
<li><a href="https://www.paypal.me/cipchk">paypal</a></li>
<li><a href="https://ng-alain.com/assets/donate.png">支付宝或微信</a></li>
</ul>
<p>或购买我们 <a href="https://e.ng-alain.com/">商品主题</a>。</p>
<h2 id="backers">Backers</h2>
<p>Thank you to all our backers! 🙏</p>
<p>&lt;a href=&quot;https://opencollective.com/ng-alain#backers&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://opencollective.com/ng-alain/backers.svg?width=890&quot;&gt;&lt;/a&gt;</p>
<h3 id="license">License</h3>
<p>The MIT License (see the <a href="https://github.com/ng-alain/ng-alain/blob/master/LICENSE">LICENSE</a> file for the full text)</p>


基建类库 @delon（包括：业务组件、ACL访问控制、缓存、授权、动态表单等）
延迟加载及良好的启用画面，良好的UI路由设计

NG-ALAIN: 一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务

<h1 id="ng-ant-admin">ng-ant-admin</h1>
<p><a href="https://www.codefactor.io/repository/github/huajian123/ng-ant-admin"><img src="https://www.codefactor.io/repository/github/huajian123/ng-ant-admin/badge" alt="CodeFactor"></a></p>
<h1 id="在线文档">在线文档</h1>
<p><a href="http://1.117.181.242:8081/">doc</a></p>
<h1 id="注意，在maints中添加了-ngzoneeventcoalescing-true-ngzoneruncoalescing-true-，用于提升性能，如果你把握不住，请删除这两个属性">注意，在main.ts中添加了{ ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }，用于提升性能，如果你把握不住，请删除这两个属性</h1>
<h1 id="项目介绍">项目介绍</h1>
<p>Ng-Ant-Admin 3.0发布(添加服务端真实接口)&lt;br&gt;
自费服务器，在线示例网速比较慢，抱歉&lt;br&gt;
如果本项目对您有用，麻烦帮我点个star，谢谢啊&lt;br&gt;
if help you, if you want ,please give me a star ,thank you&lt;br&gt;
账号admin，密码123456 ,数据库每10分钟从备份恢复一次&lt;br&gt;
默认登录超时时间为1h，上传，下载，websocket，系统管理模块均为真实接口调用展示。&lt;br&gt;
完成最常用的权限控制，人员账号管理，角色管理，菜单管理，登录超时等。添加了大量业务示例，开箱即用。&lt;br&gt;
使用本项目遇到问题，可以加入376065816 qq群号与我沟通。&lt;br&gt;</p>
<p>快速二开使用详解 <a href="https://www.bilibili.com/video/BV1gF411x7rN/">快速二开使用详解</a>&lt;br&gt;
项目搭建简易教程 <a href="https://www.bilibili.com/video/BV1EM4y1w7zd/">项目搭建简易教程</a>&lt;br&gt;
online demo地址 <a href="http://1.117.181.242/">demo</a>&lt;br&gt;
纯净版项目地址 <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-pure/">pure</a>&lt;br&gt;
pure project address <a href="https://gitee.com/hjxiaoqianduan/ng-ant-admin-pure/">pure</a>&lt;br&gt;
服务端源码地址 <a href="https://github.com/huajian123/ng-ant-admin-api">serviceApi</a>&lt;br&gt;
serviceApi address <a href="https://github.com/huajian123/ng-ant-admin-api">serviceApi</a>&lt;br&gt;
线上swagger地址 <a href="http://1.117.181.242:8003/swagger-ui.html#/">swagger</a>&lt;br&gt;</p>
<h1 id="路由的key">路由的key</h1>
<p>key需要设置成路由地址最后一个&#39;/&#39;后的字符串，并且要唯一</p>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, data: {key: &#39;login&#39;, shouldDetach: &#39;no&#39;}, component: LoginFormComponent}
];
</code></pre>
<h1 id="栅格系统监听">栅格系统监听</h1>
<pre><code class="language-angular2html">enum EquipmentWidth {
  xs,  // (max-width: 575.98px)
  sm,  // (min-width: 576px) and (max-width: 767.98px)
  md,  // (min-width: 768px) and (max-width: 991.98px)
  lg,  // (min-width: 992px) and (max-width: 1199.98px)
  xl,  // (min-width: 1200px) and (max-width: 1599.98px)
  xxl  // (min-width: 1600px)
}
</code></pre>
<p>使用方式</p>
<pre><code>  constructor(private windowsWidthService: WindowsWidthService) {
  }
  
  this.windowsWidthService.getWindowWidthStore().pipe(takeUntil(this.destory$)).subscribe(res =&gt; {
    this.currentEquipmentWidth = res;
    this.cdr.markForCheck();
  })
</code></pre>
<h1 id="模块不需要预加载">模块不需要预加载</h1>
<pre><code class="language-typescript">export const routes: Routes = [
  {
    path: &#39;contact&#39;,
    loadChildren: import(() =&gt; &#39;./contact/contact.module&#39;).then(m =&gt; m.ContactModule),
    data: {
      preload: false
    }
  }
];
</code></pre>
<h1 id="模块不需要保存状态">模块不需要保存状态</h1>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, data: {key: &#39;login&#39;, shouldDetach: &#39;no&#39;}, component: LoginFormComponent}
];
</code></pre>
<h1 id="模块中打开新tab页来展示详情，必须设置参数如下">模块中打开新tab页来展示详情，必须设置参数如下</h1>
<p>在data中设置newTab</p>
<pre><code class="language-typescript">const routes: Routes = [
  {path: &#39;&#39;, component: TabsComponent, data: {title: &#39;标签页操作&#39;, key: &#39;tabs&#39;}},
  {path: &#39;example-detail&#39;, component: DetailComponent, data: {newTab:&#39;true&#39;, title: &#39;演示详情&#39;, key: &#39;example-detail&#39;}}
];
</code></pre>
<h1 id="缓存页面中指定容器的滚动条">缓存页面中指定容器的滚动条</h1>
<p>在data中设置scrollContain 为元素选择器</p>
<pre><code class="language-typescript">  {path: &#39;&#39;, component: KeepScrollPageComponent, data: {title: &#39;缓存滚动条&#39;, key: &#39;keep-scroll-page&#39;,scrollContain:[&#39;#div-scroll1&#39;,&#39;#div-scroll2&#39;]}}
</code></pre>
<h1 id="切换tab调用的临时声明周期如下">切换tab调用的临时声明周期如下</h1>
<pre><code class="language-typescript">_onReuseInit: () =&gt; void;
_onReuseDestroy: () =&gt; void;
</code></pre>
<p>直接在目标组件中写出方法名为_onReuseInit或者_onReuseDestroy的方法即可实现</p>
<h2 id="系统截图">系统截图</h2>
<p><img src="https://github.com/huajian123/ng-ant-admin/blob/master/projectImg/11.png" alt="ScreenShot"></p>
<h2 id="捐赠">捐赠</h2>
<p>如果本项目对您有用，正巧您如果也想请我喝一杯咖啡，请扫下面的码，哈哈&lt;br&gt;
If this project is useful to you, and you happen to want to invite me for a cup of coffee, please scan Alipay or WeChat&lt;br&gt;
<img src="https://github.com/huajian123/ng-ant-admin/blob/master/projectImg/weixin.jpeg" alt="ScreenShot">
<img src="https://github.com/huajian123/ng-ant-admin/blob/master/projectImg/zhifubao.jpeg" alt="ScreenShot"></p>
<h3 id="license">License</h3>
<p>MIT </p>


前端采用Angular最新版本、NgZorro UI。后端采用Spring Boot、Spring Security、Redis & Jwt。权限认证使用Jwt。