Watch 1 Star 2 Fork 0

SteinsGate / fc-angularTypeScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于angular + Ant Design 的模版 spread retract

Clone or download
Loading...
README.md
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/luohong123/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.

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/perfect_l/fc-angular.git
git@gitee.com:perfect_l/fc-angular.git
perfect_l
fc-angular
fc-angular
master

Help Search