English | 简体中文
一、简介
1、项目介绍
- 基于 angularV8，ng.ant.design V8.0.1 开发的后台管理系统
- 【码云在线预览-国内访问更快】http://perfect_l.gitee.io/fc-angular
- 【在线预览】https://fe-free.github.io/fc-angular/index.html
- 【源码地址】https://github.com/FE-free/fc-angular
预览效果图
2、 平台功能开发进度
- 登录(用户名、密码、验证码)
- 首页
- layout
- 多 tab 页路由复用策略
- 退出登录
- 修改密码
- 系统消息(侧边栏消息)
- UI 控件（Ant Design）
- 引入阿里图标库
- 清除本地缓存
- spreadjs 报表可视化
- aot 打包
- 模版页面（列表、表单、详情、树列表）
- iframe
- threejs
二、安装项目
- 在
git、node、npm、vscode配置好多前提下，克隆代码，命令如下：
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 管理版本
九、学习帮助
- 【angular 官网】
- 【typescript 官网】
- 【ng.ant.design 官网】
- 【if 我是前端团队 Leader，怎么制定前端协作规范?】
- 【优雅的提交你的 Git Commit Message】
十、常见问题
1、 如何修改组件内部样式？
注意 由于 Angular 的样式隔离，修改 ant.design 组件内的样式 需要用::ng-deep 来覆盖 NgZorro 的样式
- 打包如何优化？开启
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 官方源码
-
代码目录结构 ├── README.md # 介绍文档 ├── _mock # 测试数据 ├── angular.json # 工作区中所有项目的默认 CLI 配置，
-
环境：nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g @angular/cli@1.4.9 ng new angularDemo ng -v ng set --global packageManager=cnpm npm install jqu
-
FC++ 是最好的基于 C++ 的函数编程库开放源码实现，可以把它插入遗留的 C++ 代码中。BSFC++ 等项目中已经使用了 FC++，BSFC++ 是一个用 C++ 进行函数大规模同步并行编程的库。 FC++ 的编译方法：g++ user_source1.cpp –I<path to FC++ installation>
-
FC 是指阿里云的函数计算服务。 前置准备 开通阿里云函数计算服务 安装及配置阿里云的 Serverless 应用部署工具 fun 工程配置 初始化 SSR 工程 安装 FC 工程插件 build-plugin-rax-fc npm install build-plugin-rax-fc --save-dev 在项目 build.json 中加入插件，示例： { "plugins": [
-
我是个新来的反应者，不懂什么。我有两个组件：父函数组件和子类组件。假设，从FC我需要从useState钩子传递非常简单的数组。当构造函数中的类内组件尝试注销道具时，结果是空数组。但在组件中成功渲染数组项。如果我不使用-useState钩子并将现有的array-console.log（props）结果传递给该数组。为什么会这样？我认为它与异步操作有关，但如果需要在基于props的构造函数中定义初始状
-
React代码如下, 前三次每次点击button都会打印不同的结果，苦思不得解，请大佬解惑。。 第一次点击button打印：click 1 2 第二次点击button打印：click 1 第三 ~ 第 N 次点击button打印：click 如何解释第二次的打印结果呢？？？ 我原以为第二次点击button，只会打印click，依据是状态的newValue === prevValue，不会触发re-
-
问题内容： 我有以下XML： 我的部分Java代码： 我遇到的问题。 按下布局以获取其特定部分的坐标时（如果我一直向左或向右按下/拖动），则我的应用程序FC。我在下面添加LogCat： 01-25 01：13：21.059：E / AndroidRuntime（13345）：致命例外：主要01-25 01：13：21.059：E / AndroidRuntime（13345）：java.lan
-
最近想看一下童年游戏的源码，有人知道在哪里下载资源嘛？