<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发布(添加服务端真实接口)

<div class="card center"> <div class="van-doc-intro" style="text-align:center;"> <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png"> <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Ngx-Vant</h2> <p>轻量、可靠的移动端 Angular 组件库</p> </div> </div>
<h3 id="介绍">介绍</h3>
<p>Ngx-Vant 是<strong>Zan Design System</strong>视觉规范实现的<strong>Angular UI</strong> 组件库，全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。 &lt;br&gt;&lt;br&gt;</p>
<p>目前 Vant 官方提供了 <a href="https://vant-contrib.gitee.io/vant">Vue 2 版本</a>、<a href="https://vant-contrib.gitee.io/vant/next">Vue 3 版本</a>和<a href="http://vant-contrib.gitee.io/vant-weapp">微信小程序版本</a>，并由社区团队维护 <a href="https://github.com/mxdi9i7/vant-react">React 版本</a>。</p>
<h3 id="特性">特性</h3>
<ul>
<li>提供 60 多个高质量组件，覆盖移动端各类场景</li>
<li>完善的中英文文档和示例</li>
<li>支持 Angular14</li>
<li>支持按需引入</li>
<li>支持主题定制</li>
<li>支持国际化</li>
<li>支持 TypeScript</li>
</ul>
<h3 id="快速上手">快速上手</h3>
<p>请参考<a href="#/zh-CN/quickstart">快速上手</a>章节。</p>
<h3 id="贡献代码">贡献代码</h3>
<p>修改代码请阅读我们的<a href="#/zh-CN/contribution">开发指南</a>。</p>
<p>使用过程中发现任何问题都可以提 <a href="https://github.com/yutao331763646/ngx-vant/issues">Issue</a> 给我们，当然，我们也非常欢迎你给我们发 <a href="https://github.com/yutao331763646/ngx-vant/pulls">PR</a>。</p>
<h3 id="浏览器支持">浏览器支持</h3>
<p>现代浏览器以及 Android 4.0+, iOS 8.0+。</p>
<h3 id="生态">生态</h3>
<table>
<thead>
<tr>
<th>项目</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><a href="https://github.com/youzan/vant-demo">vant-demo</a></td>
<td>Vant 官方示例合集</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant-weapp">vant-weapp</a></td>
<td>微信小程序组件库</td>
</tr>
<tr>
<td><a href="https://github.com/mxdi9i7/vant-react">vant-react</a></td>
<td>Vant React 版（由社区维护）</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-cli">vant-cli</a></td>
<td>开箱即用的组件库搭建工具</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-icons">vant-icons</a></td>
<td>Vant 图标库</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator">vant-touch-emulator</a></td>
<td>在桌面端使用 Vant 的辅助库</td>
</tr>
</tbody></table>
<h3 id="链接">链接</h3>
<ul>
<li><a href="https://github.com/yutao331763646/ngx-vant/issues">意见反馈</a></li>
</ul>
<h3 id="开源协议">开源协议</h3>
<p>本项目基于 <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89">MIT</a> 协议，请自由地享受和参与开源</p>


Lightweight Mobile UI Components built on Vant and Angular

Ngx-Vant 轻量、可靠的移动端 Angular 组件库

<p><code>ng-zorro-antd</code> 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</p>
<p><a href="https://dev.azure.com/ng-zorro/NG-ZORRO/_build"><img src="https://img.shields.io/azure-devops/build/ng-zorro/0d271b73-3774-4dbc-a081-088df0b28bf8/2/master?style=flat-square" alt="Azure branch"></a>
<a href="https://codecov.io/gh/NG-ZORRO/ng-zorro-antd"><img src="https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd.svg?style=flat-square" alt="Codecov"></a>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/releases"><img src="https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square" alt="GitHub Release Date"></a>
<a href="https://www.npmjs.org/package/ng-zorro-atnd"><img src="https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square" alt="npm package"></a>
<a href="https://npmjs.org/package/ng-zorro-antd"><img src="http://img.shields.io/npm/dm/ng-zorro-antd.svg?style=flat-square" alt="NPM downloads"></a>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square" alt="GitHub license"></a>
<a href="https://discord.com/channels/748677963142135818/764322550712893451"><img src="https://img.shields.io/discord/748677963142135818?label=Discord&style=flat-square" alt="Discord"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode"><img src="https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square" alt="extension-for-VSCode"></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier"></a>
<a href="https://twitter.com/ng_zorro"><img src="https://img.shields.io/badge/Twitter-NG--ZORRO-blue.svg?style=flat-square&logo=twitter" alt="Twitter"></a></p>
<p>&lt;/div&gt;

</p>
<p><a href="http://ng.ant.design"><img src="https://img.alicdn.com/tfs/TB1t6QPylr0gK0jSZFnXXbRRXXa-4000-1378.png" alt=""></a></p>
<p><a href="README.md">English</a> | 简体中文</p>
<h2 id="✨-特性">✨ 特性</h2>
<ul>
<li>提炼自企业级中后台产品的交互语言和视觉风格。</li>
<li>开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。</li>
<li>使用 TypeScript 构建，提供完整的类型定义文件。</li>
<li>支持 OnPush 模式，性能卓越。</li>
<li>数十个国际化语言支持。</li>
<li>深入每个细节的主题定制能力。</li>
</ul>
<h2 id="☀️-授权协议">☀️ 授权协议</h2>
<p><a href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE">MIT</a></p>
<p><a href="https://app.fossa.com/projects/git%2Bgithub.com%2FNG-ZORRO%2Fng-zorro-antd?ref=badge_shield"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2FNG-ZORRO%2Fng-zorro-antd.svg?type=shield" alt="FOSSA Status"></a></p>
<h2 id="🖥-支持环境">🖥 支持环境</h2>
<ul>
<li>Angular <code>^15.0.0</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>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
</tr>
</tbody></table>
<h2 id="🎨-设计规范">🎨 设计规范</h2>
<p><code>ng-zorro-antd</code> 与 Ant Design 设计规范定期同步，你可以在线查看<a href="https://nz-styles-syncer.now.sh/">同步日志</a>。</p>
<h2 id="📦-安装">📦 安装</h2>
<p>我们强烈推荐官方的 <code>@angular/cli</code> 工具链辅助进行开发，在实际项目开发中，它可以很好的满足对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。</p>
<pre><code class="language-bash">$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd
</code></pre>
<blockquote>
<p>如果你想了解更多CLI工具链的功能和命令，建议访问 <a href="https://github.com/angular/angular-cli">Angular CLI</a> 了解更多</p>
</blockquote>
<h2 id="🔨-使用">🔨 使用</h2>
<p>将想要使用的组件模块引入到你的 <code>app.module.ts</code> 文件和其它的<a href="https://angular.cn/guide/feature-modules">特性模块</a>中。</p>
<pre><code class="language-ts">import { NzButtonModule } from &#39;ng-zorro-antd/button&#39;;
@NgModule({
  imports: [ NzButtonModule ]
})
export class AppModule {
}
</code></pre>
<blockquote>
<p><code>@angular/cli</code> 的用户不需要担心下面这项设置，但知道也挺有好处。
然后在 <code>angular.json</code> 文件中引入样式和 SVG icon 资源。</p>
</blockquote>
<pre><code class="language-diff">{
  &quot;assets&quot;: [
+   {
+     &quot;glob&quot;: &quot;**/*&quot;,
+     &quot;input&quot;: &quot;./node_modules/@ant-design/icons-angular/src/inline-svg/&quot;,
+     &quot;output&quot;: &quot;/assets/&quot;
+   }
  ],
  &quot;styles&quot;: [
+   &quot;node_modules/ng-zorro-antd/ng-zorro-antd.min.css&quot;
  ]
}
</code></pre>
<p>参考<a href="https://ng.ant.design/docs/getting-started/zh">快速上手</a>以了解更多。</p>
<h2 id="🔗-链接">🔗 链接</h2>
<ul>
<li><a href="https://github.com/NG-ZORRO/ng-zorro-antd-mobile">ng-zorro-antd-mobile</a></li>
<li><a href="https://github.com/ng-alain/ng-alain">ng-alain</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">VSCode 的 snippet 扩展</a></li>
</ul>
<h2 id="⌨️-开发">⌨️ 开发</h2>
<pre><code class="language-bash">$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start
</code></pre>
<p>浏览器会自动打开。</p>
<h2 id="🤝-如何贡献">🤝 如何贡献</h2>
<p><a href="https://github.com/NG-ZORRO/ng-zorro-antd/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-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md">贡献者文档</a>。如果你希望参与贡献，欢迎 <a href="https://github.com/NG-ZORRO/ng-zorro-antd/pulls">Pull Request</a>，或给我们 <a href="http://ng.ant.design/issue-helper/#/new-issue">报告 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>，更好的问题更容易获得帮助。
感谢 <a href="https://www.jetbrains.com/?from=ng-zorro-antd">JetBrains</a> 提供的免费开源 License 赞助</p>
</blockquote>
<p><a href="https://www.jetbrains.com/?from=ng-zorro-antd"><img src="https://img.alicdn.com/tfs/TB1sSomo.z1gK0jSZLeXXb9kVXa-120-130.svg" alt="JetBrains"></a></p>
<h2 id="❓-社区互助">❓ 社区互助</h2>
<p>如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。</p>
<p>通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 <code>ng-zorro-antd</code> 标签。</p>
<ol>
<li><a href="https://stackoverflow.com/questions/tagged/ng-zorro-antd">Stack Overflow</a>（English）</li>
<li><a href="https://segmentfault.com/t/ng-zorro">Segment Fault</a>（中文）</li>
<li><a href="https://discord.com/channels/748677963142135818/764322550712893451"><img src="https://img.shields.io/discord/748677963142135818?label=Discord&style=flat-square" alt="Discord"></a></li>
<li>加入钉钉 NG-ZORRO 自助服务群（中文）</li>
</ol>
<p>&lt;img src=&quot;<a href="https://img.alicdn.com/tfs/TB1aRk.clCw3KVjSZFlXXcJkFXa-750-990.jpg">https://img.alicdn.com/tfs/TB1aRk.clCw3KVjSZFlXXcJkFXa-750-990.jpg</a>&quot; width=&quot;300&quot;&gt;

</p>
<h2 id="🎉-谁在使用">🎉 谁在使用</h2>
<ul>
<li><a href="https://www.alibaba.com/">阿里巴巴</a></li>
<li><a href="https://www.aliyun.com/">阿里云</a></li>
<li><a href="https://www.thoughtworks.com/">思特沃克</a></li>
<li><a href="http://www.cmbchina.com/">招商银行</a></li>
<li><a href="https://www.gongdao.com/">共道科技</a></li>
<li><a href="http://www.uce.cn/">优速快递</a></li>
<li><a href="https://qingflow.com/">轻流</a></li>
<li><a href="http://www.aisino.com/">航天信息股份有限公司</a></li>
<li><a href="http://datagrand.com/">达观数据</a></li>
<li><a href="https://www.ververica.com/">Ververica</a></li>
<li><a href="https://flink.apache.org/">Apache Flink</a></li>
<li><a href="https://zeppelin.apache.org/">Apache Zeppelin</a></li>
<li><a href="https://submarine.apache.org/">Apache Submarine</a></li>
<li><a href="https://metron.apache.org/">Apache Metron</a></li>
<li><a href="http://pag.company/">Process Automation Group</a></li>
<li><a href="https://www.scentbird.com/">ScentBird</a></li>
<li><a href="https://www.sit.ac.nz/">Southern Institute of Technology</a></li>
<li><a href="https://hub.hapify.io/">Hapify (Dynamic boilerplates tool)</a></li>
</ul>
<blockquote>
<p>我们在这里列出了部分使用者，如果你的公司和产品使用了 NG-ZORRO，欢迎到 <a href="https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142">这里</a> 留言。</p>
</blockquote>


ng-zorro-antd 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用

Admin管理页面

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

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

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

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

UI组件库

Ngx-Vant 轻量、可靠的移动端 Angular 组件库

Angular UI Component Library based on Ant Design