如何进行 ThingsBoard 前端二次开发？超强 Angular 框架帮你忙。
目录
关注我们
关注 ThingsBoard 微信公众号
手动增加微信公众号：thingsboard_cn
访问 ThingsBoard 中文社区网站
访问网址：http://www.thingsboard.club
ThingsBoard 采用 Angular 框架作为前端，真是先知先觉。
当然，在国内，用 React 和 Vue 的前端居多，所以，不是很流行的 Angular 自然成为 ThingsBoard 二次开发的一大障碍。细细品，还是觉得 ThingsBoard 团队强大的先知先觉。
如果你有 ThingsBoard 服务需求或二次开发需求，请与我们联系： 18616669123
本文之前，有关 ThingsBoard 后端的无缝二次开发已经有比较详细的文章，请需要的朋友自取。Angular 基础
学习一项新技术，新框架，难免要下苦功，熟读官方文档是必不可少的：https://angular.cn/
- 框架理解
- 基本语法
- TypeScript
- 教程：英雄指南
- 自己操练一下，熟能生巧
ThingsBoard UI 架构
- 由于 angular 这个框架本身包含了太多的组件和功能特性，好处是不需要额外的外部框架来支撑一站式解决，不好之处就是以前学过的框架可能无法直接拿来即用。
- 因为有了 angular 基础，再来熟悉 ThingsBoard UI 会现对容易一些，层次分明，结构清晰。
- 都说码 angular 项目过程像 Java 工程，所以，后端 Java 工程人员是一大捷径。
Component 层
- 无非就是建立自己的 Component：TS，路由，HTML，CSS；
- 参考官方组件，做自己的组件就现对容易一些；
Service 层
- 官方工程有很多例程，供参考，大都是比较好理解的（虽然没有注释）；
- 很多前端人员不太理解为什么要有服务层，我也不太理解，但是这样做的确是方便了扩展和复用；
其他
- 结合后台业务逻辑，完成二次开发目标，需要很长的过程，毕竟这是一套功能强大的框架。
- 也有人用 VUE 改写了 ThingsBoard UI 前端，感觉有点重复制造轮子，真的理解了在官方上面改造不是更好？
二次开发要点
新建组件
- ng cli 自动创建组件或手工创建 src/app/modules/home/pages/report 目录来完成组件开发；
- 依次创建 report.module.ts, report.component.ts, report.component.html, report.component.css, report-routing.module.ts, 其他需要的格式文件
- 在 src/app/modules/home/pages/home-pages.module.ts 引入 ReportModule 组件；
这样，组件算是创建好了。
业务逻辑
- Service 创建集成
- 业务逻辑实现
主菜单扩展
- 在 src/app/core/services/menu.service.ts 下新增菜单，注意区分不同角色的菜单项目；
- 在 src/assets/locale/ 下相应的语音包下新增翻译；
深化
后面的文章，将进一步讲解组件中每个文件的用法。敬请期待
如果你有 ThingsBoard 服务需求或二次开发需求，请与我们联系： 18616669123