前言
一个软件产品有一个酷炫的界面这无疑是可以让更多的使用者在第一次接触的时候就喜欢上它，ThingsBoard这一套界面是采用的Angular Material主题为原型进行设计并开发而成从现在的操作逻辑和风格层面来看符合一个通用物联网平台的定位。
ThingsBoard是一个设备管理平台更多的时候给IT部门，运维部门进行管理设备维护数据使用，数据最终通过可视化大屏（看板）与业务系统的相关web ui进行集成显示给用户即可。
目录结构
ThingsBoard前端的目录结构非常简单所有代码都在app目录中进行分类存放并且所有开发都是以的组件（componet）方式进行，具体目录参见如下：
依赖
ThingsBoard前端项目的依赖比较简单开发者只需要了解如下依赖中的相关知识上手二次开发还是比较容易。
1.启动模块
前端项目入口为main.ts文析中的bootstrapModule方注册根模块app.module.ts文件中的AppModule类并配合index.html进行页面加载和引入根组件，核心模块，自定组件和可视化相关模块。
| main | app |
|---|---|
| 单元格 | 单元格 |
2.页面加载
前端相关的所有组件和页均通过home.module.ts文件中的HomeModule导入路由和页面进行html渲染。
| home | routing |
|---|---|
3.组件
这里我们以customer组件为例进行了解一个ThingsBoard前端组件中所必备的内容为路由模块，tabs组件，table组件和页面组件并最终由customerModel进行管理并注入到系统中。
| module | routing |
|---|---|
| module | routing |
|---|---|
