---
title: TB and Angular
tags: Angular
image: https://i.imgur.com/LzO4YLC.png
disqus: hackmd
---

# TB and Angular
==TB 3.3 UI Update to Angular 11==
* [Angular](https://angular.io/)
* [Angular CLI](https://angular.io/cli)
* [Angular Material](https://material.angular.io/)
* [Angular Authentication w/ JWT](https://blog.angular-university.io/angular-jwt-authentication/)

$ cat ./ui-ngx/package.json | grep angular/cli
    "@angular/cli": "^11.2.13",

//UI 套件常見的有 Material UI, Clarity UI, PrimeNG, etc.
$ cat ./ui-ngx/package.json | grep material
    "@angular/material": "^11.2.13",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "material-design-icons": "^3.0.1",
    "ngx-daterangepicker-material": "^4.0.1",

//授權認證管理
$ cat ./ui-ngx/package.json | grep jwt
    "@auth0/angular-jwt": "^5.0.2",

[toc]

## Angular 基礎
官方文件: https://angular.tw/

* 框架理解
* 基本语法
* TypeScript
* 課程：英雄之旅 [here](https://angular.tw/tutorial)

### Versioning

## TB UI 架構
:::info
* Angular 框架本身包含了太多的組件和功能特性
* 優點: 可一站式解決，不需要額外的外部框架。
* 缺點: 過往學過的框架，可能無法直接就手。
* 有了 Angular 基礎，再來熟悉 ThingsBoard UI， 相對容易理解，層次分明，結構清晰。
* Angular 項目過程類似 Java 工程，降低後端 Java 工程人員學習曲線。
:::

### Component Layer
* 建立自己的 Component：TS，路由，HTML，CSS 等
* 建議先參考官方元件，後續再做自己的元件，相對容易

### Service Layer
* 可多參考官方範例程式，相對好理解。
* 為什麼要有服務層? 為了方便擴展和再利用。

### Others
* 結合後台業務邏輯，完成二次開發目標，需要很長的過程，畢竟這是一套功能強大的框架。
* 有人用 VUE 改寫了 ThingsBoard UI 前端，感覺有點重複製造輪子，先花點時間理解，直接基於官方版本改造，是不是更好?

## Data Flow
* Login Page (./ui-ngx/src/app/modules/login/pages/login/login.component.ts)

## 二次開發重點

### 新建元件
根據下述步驟，依序完成，即可建立新元件。
* ng cli 自動新增元件或手動新增
* ui-ngx/src/app/modules/home/pages/report 新增資料夾，預計完成 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/  //資料夾下相對應語言包，新增翻譯。
locale/
|-- locale.constant-cs_CZ.json
|-- locale.constant-de_DE.json
|-- locale.constant-el_GR.json
|-- locale.constant-en_US.json
|-- locale.constant-es_ES.json
|-- locale.constant-fa_IR.json
|-- locale.constant-fr_FR.json
|-- locale.constant-it_IT.json
|-- locale.constant-ja_JA.json
|-- locale.constant-ka_GE.json
|-- locale.constant-ko_KR.json
|-- locale.constant-lv_LV.json
|-- locale.constant-pt_BR.json
|-- locale.constant-ro_RO.json
|-- locale.constant-ru_RU.json
|-- locale.constant-sl_SI.json
|-- locale.constant-tr_TR.json
|-- locale.constant-uk_UA.json
|-- locale.constant-zh_CN.json
`-- locale.constant-zh_TW.json

### 進階

## Stack Overflow
- https://stackoverflow.com/questions/63911431/the-getentityattributes-function-in-thingsboard
-

## Resource(s)
- [Facebook ThingsBoard Taiwan Group](https://facebook.com/groups/thingsboard)
- [Angular 新手入門](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
- https://v11.material.angular.io/guide/getting-started
- https://yiqisoft.cn/blog/client-side/148.html
- https://yiqisoft.cn/blog/default/156.html

## 暫存
- [UI 訂製](https://www.ebaina.com/articles/140000009908)
- [前端架構分析](https://www.ebaina.com/articles/140000010056)
- [前端初级訂製](https://qdmana.com/2021/04/20210403062718476N.html)
- [Widget 入門知識](https://chowdera.com/2021/07/20210710223708684m.html)
-