Angular3--Thingsboard实例

1 搭建VSCode调试环境

在代码下

npm install
npm start

VScode中安装debug插件和Angular Language Service插件。

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Angular Debug (Chrome)",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "trace": true,
        "sourceMapPathOverrides": {
          "webpack:///./*": "${webRoot}/*"
        }
      }
    ]
  }
  

之后debug，就非常方便了。

2 Angular Material

Angular Material 是一个由 Angular 团队开发和维护的 UI 组件库，它基于 Google 的 Material Design 设计语言，专为 Angular 应用提供高质量、响应式且易于使用的 UI 组件。通过 Angular Material，开发者可以快速构建符合现代设计标准的用户界面，同时专注于应用的核心功能。

就是在thingsboard中mat开头的东西。

表单控件： mat-input（输入框）、mat-select（下拉选择）、mat-checkbox（复选框）、mat-radio-group（单选组）、mat-slider（滑块）等。

布局组件： mat-toolbar（顶部工具栏）、mat-sidenav（侧边栏）、mat-grid-list（网格布局）、mat-card（卡片）。

交互组件： mat-button（按钮）、mat-icon（图标）、mat-menu（菜单）、mat-dialog（对话框）、mat-tooltip（提示框）。

数据展示： mat-table（高级表格，支持排序、分页、过滤）、mat-paginator（分页器）、mat-progress-bar（进度条）。

使用下面的命令安装：

ng add @angular/material

• 官方文档：Angular Material UI Component Library
• 组件示例：Angular Material UI Component Library
• GitHub 仓库：https://github.com/angular/components

3 Thingsboard前端代码结构

ui-ngx/
├── src/
│   ├── app/                 <-- 主要应用代码（重点）
│   │   ├── modules/         <-- 各个模块（页面、组件）
│   │   ├── services/        <-- 前端服务层（REST、WebSocket 等）
│   │   ├── shared/          <-- 公共组件、指令、管道
│   │   ├── core/            <-- 核心功能（权限、拦截器）
│   │   └── app.component.ts <-- 根组件
│   ├── assets/              <-- 静态资源
│   ├── environments/        <-- 环境配置（dev/prod）
│   └── index.html           <-- SPA 入口
├── angular.json             <-- Angular 配置文件
├── package.json             <-- 依赖管理
 

3.1 modules

这个是对页面划分的功能模块封装

modules/
├── dashboard/           <-- 仪表盘（大屏）
├── home/                <-- 主页面框架（顶部栏、左侧栏）
├── device/              <-- 设备管理
├── entity-view/         <-- 实体视图
├── rulechain/           <-- 规则链编辑器
├── alarm/               <-- 报警管理
├── widgets/             <-- 小部件（图表、控件）
├── tenant/              <-- 租户管理
├── profile/             <-- 用户配置页
├── ...
每个模块对应的就是一个页面或者部分页面，这部分的组成是：

xxx-routing.module.ts：路由定义

xxx.module.ts：模块声明

xxx.component.ts/html/scss：页面组件逻辑、模板、样式

xxx.component.html   <-- HTML 模板（视图）

3.2 services

通信与业务服务层

services/
├── api/                <-- 与后端 REST API 通信
│   ├── device.service.ts
│   ├── dashboard.service.ts
│   └── ...
├── websocket.service.ts <-- WebSocket 连接和订阅数据
├── utils.service.ts     <-- 通用工具类
├── auth.service.ts      <-- 登录认证
 

3.3 shared

shared/
├── components/          <-- 可复用组件
│   ├── entity-select/   <-- 下拉框实体选择器
│   └── ...
├── pipes/               <-- Angular 管道
├── directives/          <-- Angular 自定义指令
├── models/              <-- 全局类型定义（如 TbDevice、Dashboard）
└── utils/               <-- 各类小工具函数
 

在shared/models 有核心数据结构（如 Dashboard, Device 等）

3.4 core

core/
├── interceptors/       <-- HTTP 拦截器（统一加 token）
├── guards/             <-- 路由守卫（权限检查）
├── auth/               <-- 权限系统
├── services/           <-- 核心服务，如 AppInit