{"id":19989958,"url":"https://github.com/FE-free/fc-angular","last_synced_at":"2025-05-04T09:33:56.830Z","repository":{"id":36153909,"uuid":"171450478","full_name":"FE-free/fc-angular","owner":"FE-free","description":"快速搭建angular后台管理系统的admin template。Fast development platform based on angular8, ng.ant.design built multi-tab page background management system (continuous upgrade) ^_^","archived":false,"fork":false,"pushed_at":"2023-01-07T07:28:46.000Z","size":236337,"stargazers_count":191,"open_issues_count":18,"forks_count":69,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-13T16:52:10.932Z","etag":null,"topics":["angular","angular-components","angular8","ant","ant-design","antd","frontend","multiple","ng-zorro","ngx","routereusestrategy","spread","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://fe-free.github.io/fc-angular/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FE-free.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-19T10:05:45.000Z","updated_at":"2024-03-11T06:43:01.000Z","dependencies_parsed_at":"2023-01-16T23:45:41.780Z","dependency_job_id":null,"html_url":"https://github.com/FE-free/fc-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FE-free%2Ffc-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FE-free%2Ffc-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FE-free%2Ffc-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FE-free%2Ffc-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FE-free","download_url":"https://codeload.github.com/FE-free/fc-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224391390,"owners_count":17303609,"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":["angular","angular-components","angular8","ant","ant-design","antd","frontend","multiple","ng-zorro","ngx","routereusestrategy","spread","typescript","ui-components"],"created_at":"2024-11-13T04:50:51.191Z","updated_at":"2024-11-13T04:50:55.551Z","avatar_url":"https://github.com/FE-free.png","language":"TypeScript","readme":"\u003cimg src=\"./media/logo.png\" style=\"margin: 0 auto;display: block;\"\u003e\nAdmin template based on AntDesign and Angular8\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/fc-angular/fc-angular\"\u003e\n        \u003cimg src=\"https://www.travis-ci.org/FE-free/fc-angular.svg?branch=master\" alt=\"Build Status\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/angular/angular\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/angular-8.1.0-green.svg\" alt=\"angular\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/NG-ZORRO/ng-zorro-antd\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/ng--zorro--antd-8.3.1-green.svg\" alt=\"ng-zorro-antd\"\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://npmcharts.com/compare/@fc-angular/core?minimal=true\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dm/@fc-angular/core.svg\" alt=\"Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@fc-angular/components\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@fc-angular/components.svg\" alt=\"Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@fc-angular/core\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/l/@fc-angular/core.svg\" alt=\"License\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://gitter.im/fc-angular/community\"\u003e\n        \u003cimg src=\"https://img.shields.io/gitter/room/fc-angular/community.svg\" alt=\"Chat\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nEnglish | [简体中文](https://github.com/luohong123/fc-angular/blob/master/README.md)\n\n# 一、简介\n\n## 1、项目介绍\n\n- 基于 angularV8，ng.ant.design V8.0.1 开发的后台管理系统\n- 【码云在线预览-国内访问更快】[http://perfect_l.gitee.io/fc-angular](http://perfect_l.gitee.io/fc-angular)\n- 【在线预览】[https://fe-free.github.io/fc-angular/index.html](https://fe-free.github.io/fc-angular/index.html)\n- 【源码地址】[https://github.com/FE-free/fc-angular](https://github.com/FE-free/fc-angular)\n\n\u003e 预览效果图\n\n![首页](./media/1.png)\n\n## 2、 平台功能开发进度\n\n- [x] 登录(用户名、密码、验证码)\n- [x] 首页\n- [x] layout\n- [x] 多 tab 页路由复用策略\n- [x] 退出登录\n- [x] 修改密码\n- [x] 系统消息(侧边栏消息)\n- [x] UI 控件（Ant Design）\n- [x] 引入阿里图标库\n- [x] 清除本地缓存\n- [x] spreadjs 报表可视化\n- [x] aot 打包\n- [x] 模版页面（列表、表单、详情、树列表）\n- [x] iframe\n- [x] threejs\n\n# 二、安装项目\n\n- 在 `git` 、`node`、`npm`、`vscode`  配置好多前提下，克隆代码，命令如下：\n\n```bash\ngit clone https://github.com/FE-free/fc-angular.git\nnpm install\nnpm start\n```\n\n- 在浏览器中输入  http://localhost:4200 ,项目启动成功, 在`package.json` 中可修改端口号。\n\n# 三、开发代码\n\n\u003ca name=\"98245d55\"\u003e\u003c/a\u003e\n\n## 1、 代码规范\n\n- 请按照 angular 官网提出的 `风格指南`  开发代码\n\n【风格指南】[https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module](https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module)\n\n## 2、 前后端通信\n\n【 使用 httpclient】[https://angular.cn/guide/http](https://angular.cn/guide/http)\n\n# 四、aot 打包部署\n\n通过    `ng build --aot`  命令生成 dist 文件，命令如下：\n\n```bash\nng build --aot\n```\n\n# 五、代码目录结构\n\n```markdown\n.\n├── README.md # 介绍文档\n├── \\_mock # 测试数据\n├── angular.json # 工作区中所有项目的默认 CLI 配置，包括 CLI 使用的构建选项、运行选项、测试工具选项（比如 TSLint、Karma、Protractor）等\n├── node_modules # 提供给整个工作区的 npm 包\n├── package-lock.json # 锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致。\n├── package.json # 配置用于工作区中所有项目的包依赖项\n├── proxy.config.json # 代理\n├── src\n│   ├── app\n│   │   ├── app.README.md # 介绍文档\n│   │   ├── app.component.ts\n│   │   ├── app.module.ts\n│   │   ├── app.route.ts # 根路由\n│   │   ├── components # 组件\n│   │   ├── service # 服务\n│   │   └── share.service.ts # 单例服务\n│   ├── assets # 静态资源文件\n│   │   ├── browser # 浏览器\n│   │   ├── doc # 文档\n│   │   ├── fonts # 字体图标\n│   │   │   ├── ali_iconfont # 阿里图标库\n│   │   │   └── antdesign # antdesign 本地图标\n│   │   ├── image # 图片资源\n│   │   ├── plugin # 第三方插件\n│   │   │   └── spread\n│   │   ├── styles # 样式文件\n│   ├── environments # 环境配置\n│   │   ├── environment.51.ts # 其它环境配置\n│   │   ├── environment.dev.ts # 开发环境配置\n│   │   └── environment.prod.ts # 上线环境配置\n│   ├── favicon.ico # 一个用在书签栏上的应用图标\n│   ├── fccomponents # 平台组件\n│   ├── fccore # 核心模块\n│   │   ├── business  \n│   │   ├── directive # 指令\n│   │   ├── fccore.module.ts # 核心模块\n│   │   ├── pipe # 管道\n│   │   └── service # 服务\n│   │   ├── cache.service.ts # 缓存服务\n│   │   ├── common.service.ts # 公共方法\n│   │   ├── dao.service.ts # httpClient 前后端通信\n│   │   ├── log.service.ts # 打印服务\n│   │   ├── message.service.ts # 消息服务\n│   │   └── user.service.ts # 用户服务\n│   ├── feature # 业务代码\n│   ├── index.html # 主 HTML 文件\n│   ├── karma.conf.js\n│   ├── main.ts # 应用的主入口点,引导应用的根模块 AppModule 来运行在浏览器中\n│   ├── polyfills.ts # 为浏览器支持提供腻子脚本\n│   ├── shared # 共享模块\n│   ├── styles.less # 项目的样式文件\n│   ├── test.ts\n│   ├── tsconfig.app.json # 继承自工作区级的 tsconfig.json 文件\n│   ├── tsconfig.spec.json\n│   └── tslint.json # 继承自工作区级的 tsconfig.json 文件\n├── tsconfig.json # 工作区中所有应用的默认 TypeScript 配置。包括 TypeScript 选项和 Angular 模板编译器选项。\n├── tslint.json # 工作区中所有应用的默认 TSLint 配置。\n├── .gitignore # 指定 Git 要忽略的非跟踪的文件。\n├── .editorconfig # 代码编辑器配置\n└── tslint 代码检查.READE.md # 介绍文档\n```\n\n# 六、规范\n\n\u003ca name=\"98245d55\"\u003e\u003c/a\u003e\n\n## 1、 代码规范\n\n- 请按照 angular 官网提出的 `风格指南`  开发代码\n\n【风格指南】[https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module](https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module)\n\n## 2、前后端通信\n\n【 使用 httpclient】[https://angular.cn/guide/http](https://angular.cn/guide/http)\n\n# 七、aot 打包部署\n\n- 通过    `ng build --aot`  命令生成 `docs` 文件，命令如下：\n\n```bash\nnpm run aot\n```\n\n# 八、前端工程化\n\n## 1、tslint\n\n## 2、 stylelint\n\n## 3、 commitlint\n\n## 4、 changelog\n\n- standard-version: 自动生成 CHANGELOG\n\n## 5. travis\n\n## 6. 使用 npm version 管理版本\n\n- 官网：https://docs.npmjs.com/cli/version\n\n# 九、学习帮助\n\n- [【angular 官网】](https://angular.cn/docs)\n- [【typescript 官网】](http://www.typescriptlang.org/index.html)\u003cbr/\u003e\n- [【ng.ant.design 官网】](https://ng.ant.design/docs/introduce/zh)\n- [【if 我是前端团队 Leader，怎么制定前端协作规范?】](https://juejin.im/post/5d3a7134f265da1b5d57f1ed#heading-18)\n- [【优雅的提交你的 Git Commit Message】](https://zhuanlan.zhihu.com/p/34223150)\n\n# 十、常见问题\n\n1、 如何修改组件内部样式？\n\n\u003e 注意 由于 Angular 的样式隔离，修改 ant.design 组件内的样式 需要用::ng-deep 来覆盖 NgZorro 的样式\n\n2. 打包如何优化？\n   开启 `aot` 打包，输入以下命令\n\n```bash\nnpm run aot\n```\n\n`aot` 打包时，优化编译时对 ts 语法检查非常严谨，如果有错误就一个一个的去改，直到错误修改完成，`aot`打包才能通过\n\n# Contributors\n\nThanks to everyone who contributed to the source code, comments, scripts, documentation, and test cases.\n\u003ca href=\"https://github.com/FE-free/fc-angular/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/fc-angular/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n`.prettierrc`、`.editorconfig` 文件配置参考自 [ng.ant.design 官方源码](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/.editorconfig)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFE-free%2Ffc-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFE-free%2Ffc-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFE-free%2Ffc-angular/lists"}