目录

• 关注我们
  • 关注 ThingsBoard 微信公众号
  • 访问 ThingsBoard 中文社区网站
  • ThingsBoard 采用 Angular 框架作为前端，真是先知先觉。
• Angular 基础
• ThingsBoard UI 架构
  • Service 层
  • 其他
• 二次开发要点
  • 新建组件
  • 业务逻辑
  • 主菜单扩展
• 深化
  • Component 层

关注我们

关注 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