当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

fc-angular

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 赫连卓
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Admin template based on AntDesign and Angular8

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 官方源码

  • 代码目录结构 ├── 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的构造函数中定义初始状

  • 问题内容: 我有以下XML: 我的部分Java代码: 我遇到的问题。 按下布局以获取其特定部分的坐标时(如果我一直向左或向右按​​下/拖动),则我的应用程序FC。我在下面添加LogCat: 01-25 01:13:21.059:E / AndroidRuntime(13345):致命例外:主要01-25 01:13:21.059:E / AndroidRuntime(13345):java.lan

  • 最近想看一下童年游戏的源码,有人知道在哪里下载资源嘛?

  • 问题内容: 我正在运行OS X 10.11.3,并且已经安装了包括Matplotlib 1.5.1的Anaconda3-2.5.0-MacOSX-x86_64.pkg。当我尝试使用以下命令在Jupyter中导入Matplotlib时: 我收到一条很长的错误消息,从以下内容开始: /Users/hgbauer/anaconda/lib/python3.5/site-packages/matplotl