Coder Social home page Coder Social logo

fe-free / fc-angular Goto Github PK

View Code? Open in Web Editor NEW
191.0 12.0 69.0 230.8 MB

快速搭建angular后台管理系统的admin template。Fast development platform based on angular8, ng.ant.design built multi-tab page background management system (continuous upgrade) ^_^

Home Page: https://fe-free.github.io/fc-angular/index.html

TypeScript 47.98% JavaScript 10.35% HTML 28.78% CSS 6.31% Shell 0.04% Less 6.53%
angular typescript multiple ant-design angular-components ant ng-zorro ui-components routereusestrategy antd

fc-angular's Introduction

Admin template based on AntDesign and Angular8

Build Status angular ng-zorro-antd Downloads Version License Chat

English | 简体中文

一、简介

1、项目介绍

预览效果图

首页

2、 平台功能开发进度

  • 登录(用户名、密码、验证码)
  • 首页
  • layout
  • 多 tab 页路由复用策略
  • 退出登录
  • 修改密码
  • 系统消息(侧边栏消息)
  • UI 控件(Ant Design)
  • 引入阿里图标库
  • 清除本地缓存
  • spreadjs 报表可视化
  • aot 打包
  • 模版页面(列表、表单、详情、树列表)
  • iframe
  • threejs

二、安装项目

  • gitnodenpmvscode  配置好多前提下,克隆代码,命令如下:
git clone https://github.com/FE-free/fc-angular.git
npm install
npm start
  • 在浏览器中输入  http://localhost:4200 ,项目启动成功, 在package.json 中可修改端口号。

三、开发代码

1、 代码规范

  • 请按照 angular 官网提出的 风格指南  开发代码

【风格指南】https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module

2、 前后端通信

【 使用 httpclient】https://angular.cn/guide/http

四、aot 打包部署

通过    ng build --aot  命令生成 dist 文件,命令如下:

ng build --aot

五、代码目录结构

.
├── README.md # 介绍文档
├── \_mock # 测试数据
├── angular.json # 工作区中所有项目的默认 CLI 配置,包括 CLI 使用的构建选项、运行选项、测试工具选项(比如 TSLint、Karma、Protractor)等
├── node_modules # 提供给整个工作区的 npm 包
├── package-lock.json # 锁定安装时的包的版本号,并且需要上传到 git,以保证其他人在 npm install 时大家的依赖能保证一致。
├── package.json # 配置用于工作区中所有项目的包依赖项
├── proxy.config.json # 代理
├── src
│   ├── app
│   │   ├── app.README.md # 介绍文档
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.route.ts # 根路由
│   │   ├── components # 组件
│   │   ├── service # 服务
│   │   └── share.service.ts # 单例服务
│   ├── assets # 静态资源文件
│   │   ├── browser # 浏览器
│   │   ├── doc # 文档
│   │   ├── fonts # 字体图标
│   │   │   ├── ali_iconfont # 阿里图标库
│   │   │   └── antdesign # antdesign 本地图标
│   │   ├── image # 图片资源
│   │   ├── plugin # 第三方插件
│   │   │   └── spread
│   │   ├── styles # 样式文件
│   ├── environments # 环境配置
│   │   ├── environment.51.ts # 其它环境配置
│   │   ├── environment.dev.ts # 开发环境配置
│   │   └── environment.prod.ts # 上线环境配置
│   ├── favicon.ico # 一个用在书签栏上的应用图标
│   ├── fccomponents # 平台组件
│   ├── fccore # 核心模块
│   │   ├── business  
│   │   ├── directive # 指令
│   │   ├── fccore.module.ts # 核心模块
│   │   ├── pipe # 管道
│   │   └── service # 服务
│   │   ├── cache.service.ts # 缓存服务
│   │   ├── common.service.ts # 公共方法
│   │   ├── dao.service.ts # httpClient 前后端通信
│   │   ├── log.service.ts # 打印服务
│   │   ├── message.service.ts # 消息服务
│   │   └── user.service.ts # 用户服务
│   ├── feature # 业务代码
│   ├── index.html # 主 HTML 文件
│   ├── karma.conf.js
│   ├── main.ts # 应用的主入口点,引导应用的根模块 AppModule 来运行在浏览器中
│   ├── polyfills.ts # 为浏览器支持提供腻子脚本
│   ├── shared # 共享模块
│   ├── styles.less # 项目的样式文件
│   ├── test.ts
│   ├── tsconfig.app.json # 继承自工作区级的 tsconfig.json 文件
│   ├── tsconfig.spec.json
│   └── tslint.json # 继承自工作区级的 tsconfig.json 文件
├── tsconfig.json # 工作区中所有应用的默认 TypeScript 配置。包括 TypeScript 选项和 Angular 模板编译器选项。
├── tslint.json # 工作区中所有应用的默认 TSLint 配置。
├── .gitignore # 指定 Git 要忽略的非跟踪的文件。
├── .editorconfig # 代码编辑器配置
└── tslint 代码检查.READE.md # 介绍文档

六、规范

1、 代码规范

  • 请按照 angular 官网提出的 风格指南  开发代码

【风格指南】https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module

2、前后端通信

【 使用 httpclient】https://angular.cn/guide/http

七、aot 打包部署

  • 通过    ng build --aot  命令生成 docs 文件,命令如下:
npm run aot

八、前端工程化

1、tslint

2、 stylelint

3、 commitlint

4、 changelog

  • standard-version: 自动生成 CHANGELOG

5. travis

6. 使用 npm version 管理版本

九、学习帮助

十、常见问题

1、 如何修改组件内部样式?

注意 由于 Angular 的样式隔离,修改 ant.design 组件内的样式 需要用::ng-deep 来覆盖 NgZorro 的样式

  1. 打包如何优化? 开启 aot 打包,输入以下命令
npm run aot

aot 打包时,优化编译时对 ts 语法检查非常严谨,如果有错误就一个一个的去改,直到错误修改完成,aot打包才能通过

Contributors

Thanks to everyone who contributed to the source code, comments, scripts, documentation, and test cases.

.prettierrc.editorconfig 文件配置参考自 ng.ant.design 官方源码

fc-angular's People

Contributors

dependabot[bot] avatar luohong123 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fc-angular's Issues

路由复用策略造成onDestroy失效

在使用路由复用策略时,删除快照,onDestroy并不会被触发,如果我在删除组件中订阅了事件,想在onDestroy时,取消订阅就做不到了,另外我想在onDestroy做一些清除,以防内存泄漏,也就做不到了,有什么好的方案吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.