ThingsBoard 采用 Angular 框架作为前端,真是先知先觉。

当然,在国内,用 React 和 Vue 的前端居多,所以,不是很流行的 Angular 自然成为 ThingsBoard 二次开发的一大障碍。细细品,还是觉得 ThingsBoard 团队强大的先知先觉。

本文之前,有关 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/ 下相应的语音包下新增翻译;
    menu.png

深化

后面的文章,将进一步讲解组件中每个文件的用法。敬请期待

标签: none

添加新评论