{"id":19989947,"url":"https://github.com/huajian123/ng-antd-admin","last_synced_at":"2025-05-16T02:02:22.818Z","repository":{"id":37316051,"uuid":"323488373","full_name":"huajian123/ng-antd-admin","owner":"huajian123","description":"Angular19  nestjs 中后台管理系统模板，移动端适配 Mobile adaptation ng-zorro ant-design-pro front-end framework ","archived":false,"fork":false,"pushed_at":"2025-03-29T16:19:17.000Z","size":41185,"stargazers_count":657,"open_issues_count":1,"forks_count":163,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-09T01:44:55.287Z","etag":null,"topics":["admin","angular","angular19","ant-design","ant-design-pro","drizzle-orm","jwt","mswjs","nestjs","ng-zorro","standalone-components","typescript","zoneless"],"latest_commit_sha":null,"homepage":"https://huajian123.github.io/ng-antd-admin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huajian123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-12-22T01:24:42.000Z","updated_at":"2025-05-06T02:07:34.000Z","dependencies_parsed_at":"2023-10-11T16:06:45.993Z","dependency_job_id":"e24a99d4-6aee-4def-bd40-37fb4748e54f","html_url":"https://github.com/huajian123/ng-antd-admin","commit_stats":null,"previous_names":["huajian123/ng-antd-admin","huajian123/ng-ant-admin"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huajian123%2Fng-antd-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huajian123%2Fng-antd-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huajian123%2Fng-antd-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huajian123%2Fng-antd-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huajian123","download_url":"https://codeload.github.com/huajian123/ng-antd-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453646,"owners_count":22073616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","angular","angular19","ant-design","ant-design-pro","drizzle-orm","jwt","mswjs","nestjs","ng-zorro","standalone-components","typescript","zoneless"],"created_at":"2024-11-13T04:50:50.534Z","updated_at":"2025-05-16T02:02:22.797Z","avatar_url":"https://github.com/huajian123.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ng-antd-admin\n[![CodeFactor](https://www.codefactor.io/repository/github/huajian123/ng-antd-admin/badge)](https://www.codefactor.io/repository/github/huajian123/ng-antd-admin)\n![License](https://img.shields.io/badge/License-MIT-blue.svg)\n[![Angular](https://img.shields.io/badge/Build%20with-Angular%20CLI-red?logo=angular)](https://www.github.com/angular/angular)\n\n## ✨前言\n- 我作为angular的粉丝，想以本项目作为我为angular社区尽一点力所能及之力，希望大家喜欢这个模板，也希望更多的国内开发者能重新审视angular这一前端框架，特别是ng17以后的版本，我相信angular会越来越好，我也会一直维护下去，如果您有什么好的建议，可以加我的微信号hj345678912，我拉你进交流群，一起学习进步交流（平时群里说话人不多）。\n\n## ✨项目介绍\n- 本项目也有一点点教学性质，其中用到大量angular新特性，有详细的注释以及参考文章链接在代码中，大家可以看看源码，有问题与我讨论，有改进处可以提pr，我们一起进步\n- \u003cfont color=red\u003e在线预览地址\u003c/font\u003e [这里](https://huajian123.github.io/ng-antd-admin/)为了节省服务器费用，这个预览地址是基于ng18的纯静态网站，所有数据采用mswjs作为mock，如果你只想简单本地启动前端看看效果，可以下载这里的代码，直接npm安装好依赖就可以启动，源码[这里](https://github.com/huajian123/ng-antd-admin/tree/ng17-mock)，\n- 我也提供了剔除掉所有第三方包以及所有业务，仅保留框架基本结构的纯净版，你可以基于纯净版对接你自己的后端服务，项目地址 [pure](https://gitee.com/hjxiaoqianduan/ng-antd-admin-pure/)，\u003cbr\u003e\n- 如果您用我的项目进行学习或者参考，请先确定您使用的是angular哪个版本，因为angular15后写法有部分不一样，所以我的建议是，您正在使用angular什么版本，则下载对应版本的ng-antd-admin,最新版本直接从master分支下载即可，历史版本在这个链接进行下载[这里](https://github.com/huajian123/ng-antd-admin/releases)。\u003cbr\u003e\n\n## ✨关于前端\n- 支持最新angular版本\n- Support the latest angular version\n- 所有组件onPush,性能卓越\n- All components onPush, excellent performance\n- 代码示例丰富，有完整服务端后台，前后端分离示例\n- Rich code examples, complete server background, front-end and back-end separation examples\n- 常用工具类，服务， 指令，管道，封装了表格，抽屉，对话框等常用功能\n- Common tools, services, instructions, pipelines。Encapsulates common functions such as tables, drawers, and dialog boxes\n- \u003cfont color=red size=6\u003e全部组件均为独立组件，文件量减少（如果需要module版本，请看[这里](https://github.com/huajian123/ng-antd-admin/releases/tag/v15.0)）\u003c/font\u003e\n- \u003cfont color=red size=6\u003eStandalone Components（module style is [here](https://github.com/huajian123/ng-antd-admin/releases/tag/v15.0)）\u003c/font\u003e\n- 已开启zoneless\n\n## ✨关于后端\n- 采用nestjs,drizzle,postgresql,以rbac为权限模型，集成了jwt,添加了接口权限，功能权限。完成用户管理，菜单管理，部门管理，角色管理等模块。开箱即用\n\n## ✨特性\n- 支持最新angular版本\n- Support the latest angular version\n- 所有组件onPush,性能卓越\n- All components onPush, excellent performance\n- 代码示例丰富，有完整服务端后台，前后端分离示例\n- Rich code examples, complete server background, front-end and back-end separation examples\n- 常用工具类，服务， 指令，管道，封装了表格，抽屉，对话框等常用功能\n- Common tools, services, instructions, pipelines。Encapsulates common functions such as tables, drawers, and dialog boxes\n- \u003cfont color=red size=6\u003e全部组件均为独立组件，文件量减少（如果需要module版本，请看[这里](https://github.com/huajian123/ng-antd-admin/releases/tag/v15.0)）\u003c/font\u003e\n- \u003cfont color=red size=6\u003eStandalone Components（module style is [here](https://github.com/huajian123/ng-antd-admin/releases/tag/v15.0)）\u003c/font\u003e\n\n# ✨以前录制的使用教程\n- 快速二开使用详解 [快速二开使用详解](https://www.bilibili.com/video/BV1gF411x7rN/)\u003cbr\u003e\n- 项目搭建简易教程 [项目搭建简易教程](https://www.bilibili.com/video/BV1EM4y1w7zd/)\u003cbr\u003e\n\n# ✨如何启动\n1. 如果你只想看看前端，启动起来看看效果，直接拉取源码[这里](https://github.com/huajian123/ng-antd-admin/tree/ng17-mock)，这个ng18的纯前端版本，  \n   直接npm install，npm run star查看效果。\n\n2. 如果你想启动nodejs端，\n1. 需要本地安装好docker。\n2. 进入nest-api目录下\n3. 在命令行运行命令\"docker-compose up -d\"，用以安装postgresql镜像以及容器，\n4. 启动docker中的容器新拉的postgresql容器，\n5. 你可能需要一款数据库连接工具，例如用DataGrip,Navicat等工具连接docker中的postgres数据库。用户名“admin”，密码“123456”，数据库名称“ng-antd-admin-db”\n6. 执行nest-api目录下的ng-antd-admin-db.sql这个sql\n7. 在nest-api目录下npm install ,执行npm run start.在ui目录下执行npm install ,以及npm run start\n\n# ✨前端的一些配置项\n# 路由的key(routing key)\nkey需要设置成路由地址最后一个'/'后的字符串，并且要所有路由中唯一\u003cbr\u003e\nThe key needs to be set to the string after the last '/' of the routing address, and it must be unique\u003cbr\u003e\n```typescript\nconst routes: Routes = [\n  {path: '', data: {key: 'login', shouldDetach: 'no'}, component: LoginFormComponent}\n];\n```\n\n# 组件不需要保存状态，(Modules don't need to save state)\n保存状态的意思是，类似于vue的keep-alive，在angular中称为路由复用，组件的状态会保留，不会由于切换页签而丢失状态，默认都是开启的，如果不需要这个功能，则配置shouldDetach: 'no'\n```typescript\nconst routes: Routes = [\n  {path: '', data: {key: 'login', shouldDetach: 'no'}, component: LoginFormComponent}\n];\n```\n\n# 组件在保存状态下的生命周期(The temporary statement cycle of switching tab calls is as follows)\n组件在保存状态下(即“路由复用”)的情况下切换页签，onInit,onOndestroy会失效(因为组件被缓存了，没有重新创建或者销毁)，我们提供了临时声明周期如下，可以在进入页面，或者离开页面时被触发\n直接在目标组件中写出方法名为_onReuseInit或者_onReuseDestroy的方法即可实现，你可以全局搜这两个方法的名字，看示例\u003cbr\u003e\nIt can be realized by directly writing the method named _onReuseInit or _onReuseDestroy in the target component\u003cbr\u003e\n```typescript\n_onReuseInit: () =\u003e void;\n_onReuseDestroy: () =\u003e void;\n\n```\n\n# 栅格系统监听(grid system monitoring)\n```angular2html\nenum EquipmentWidth {\n  xs,  // (max-width: 575.98px)\n  sm,  // (min-width: 576px) and (max-width: 767.98px)\n  md,  // (min-width: 768px) and (max-width: 991.98px)\n  lg,  // (min-width: 992px) and (max-width: 1199.98px)\n  xl,  // (min-width: 1200px) and (max-width: 1599.98px)\n  xxl  // (min-width: 1600px)\n}\n```\n使用方式(How to use)\n```\n  constructor(private windowsWidthService: WindowsWidthService) {\n  }\n  \n  this.windowsWidthService.getWindowWidthStore().pipe(takeUntil(this.destory$)).subscribe(res =\u003e {\n    this.currentEquipmentWidth = res;\n    this.cdr.markForCheck();\n  })\n```\n\n\n# 组件不要预加载(Modules do not need to be preloaded)\n如果模块不需要预加载则添加以下配置，默认都是开启的\n```typescript\nexport const routes: Routes = [\n  {\n    path: 'contact',\n    loadChildren: import(() =\u003e './contact/contact.module').then(m =\u003e m.ContactModule),\n    data: {\n      preload: false\n    }\n  }\n];\n```\n\n\n# 模块中打开新tab页来展示详情，必须设置参数如下(Open a new tab page in the module to display the details, and the parameters must be set as follows)\n在data中设置，这个场景请看在线地址上的演示，菜单为：功能\u003e标签页操作\u003e打开详情页1、打开详情页2、打开详情页3\n```typescript\nconst routes: Routes = [\n  {path: '', component: TabsComponent, data: {title: '标签页操作', key: 'tabs'}},\n  {path: 'example-detail', component: DetailComponent, data: {newTab:'true', title: '演示详情', key: 'example-detail'}}\n];\n```\n\n# 在当前页签中打开详情\n在data中设置title需要是同样的，这样就可以在当前页签中打开详情，这个场景请看在线地址上的演示，菜单为：系统管理\u003e角色管理\u003e设置权限\n```typescript\nexport default [\n  {\n    path: '',\n    component: RoleManageComponent,\n    title: '角色管理',\n    data: { key: 'role-manage' }\n  },\n  {\n    path: 'set-role',\n    component: SetRoleComponent,\n    title: '角色管理',\n    data: {\n      key: 'set-role',\n      authCode: ActionCode.RoleManagerSetRole\n    }\n  }\n] satisfies Route[];\n```\n\n# 缓存页面中指定容器的滚动条(The scroll bar of the specified container in the cache page)\n在data中设置scrollContain 为元素选择器 (Set scrollContain as element selector in data)，这个场景请看在线地址上的演示，菜单为：功能\u003e滚动条\u003e缓存滚动条\n```typescript\n  {path: '', component: KeepScrollPageComponent, data: {title: '缓存滚动条', key: 'keep-scroll-page',scrollContain:['#div-scroll1','#div-scroll2']}}\n\n```\n\n\n## 系统截图(System screenshot)\n![ScreenShot](https://github.com/huajian123/ng-antd-admin/blob/master/ui/projectImg/11.png)\n\n## star支持\n怎么说呢，所以如果本项目对您有用，如果您也愿意的话，麻烦帮忙点个star，谢谢啊\u003cbr\u003e\n\u003cbr\u003e\nif help you, if you want ,please give me a star ,thank you\u003cbr\u003e\n\n## 另外\n如果项目需要定制，或者有好的远程项目，兼职，外包等，也可以与我联系。不限前后端，移动端技术栈。希望可以出卖点体力赚取点收入\n\n## 捐赠\n如果本项目对您有用，正巧您如果也想请我喝一杯咖啡，请扫下面的码，哈哈。在此感谢您\u003cbr\u003e\nIf this project is useful to you, and you happen to want to invite me for a cup of coffee, please scan Alipay or WeChat\u003cbr\u003e\n![ScreenShot](https://github.com/huajian123/ng-antd-admin/blob/master/ui/projectImg/weixin.jpeg)\n![ScreenShot](https://github.com/huajian123/ng-antd-admin/blob/master/ui/projectImg/zhifubao.jpeg)\n\n\n\n### 🏴授权协议License\n\nMIT \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuajian123%2Fng-antd-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuajian123%2Fng-antd-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuajian123%2Fng-antd-admin/lists"}