云智慧集团成立于 2009 年，是国内领先的全栈智能业务运维解决方案服务商。经过多年自主研发，公司形成了从 IT 运维、电力运维到 IoT 运维的产业布局，覆盖 ITOM、ITOA、ITSM、DevOps 以及 IoT 几大领域，为金融、政府、运营商、能源、交通、制造等上百家行业的客户，提供了数字化运维体系建设及全生命周期运维管理解决方案。云智慧秉承 Make Digital Online 的使命，致力于通过先进的产品技术，为企业数字化转型和提升 IT 运营效率持续赋能。

作者简介

杨迎辉，云智慧/开发工程师，云智慧前端开发工程师，精通 React、Vue、Angular，负责 APM 浏览器性能监控。

Angular 的发展史

Angular 是一款来自谷歌开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

Angular 团队计划每 6 个月发布一个主要版本，Angular 未来的版本不会像 1.x 和 Angular2.x 那样发生重大的变更，因此 Angular5.x、Angular6.x、Angular7.x 和我们现在的开发方式也是一样的。

AngularJs 优缺点

优点：

1. 模板功能强大丰富

2. 比较完善的前端 MVC 框架

3. 引入了 Java 的一些概念

缺点：

1. 性能（由于数据的双向绑定）

2. 路由

3. 表单验证

4. JavaScript 语言

5. 作用域

6. 学习成本高

Angular 新特性

1. 全新的命令行工具 angular/cli

2. 服务端渲染

3. 移动和桌面兼容—ionic 和 electron

Angular 架构图

TypeScript

特性

1. 类 Clases

1. 泛型

1. 接口 Interfaces

1. 模块 Modules

1. 类型注解 Type annotations

1. 编译时类型检查 Compile time type checking

如何使用 Angular

1. npm install@angular/cli -g 全局安装 angular 脚手架工具

2. ng new project 新建 angular 项目

3. cd project 进入到项目里面

4. ng serve 启动 angular

AngularJS 与 Garfana

1. 开发数据源插件（对接数据平台）

2. 添加数据源

3. 创建仪表盘→编辑→metrics

4. 添加模板变量

数据源开发

要与 grafana 的其余部分进行交互，插件模板文件可以导出 5 个不同的组件

DataSource（Required）

QueryCtrl（Required）

ConfigCtrl（Required）

AnnotationsQueryCtrl

plugin.json 有两个特定于数据源的设置

"metrics":true

"annotations":false,

这些设置指示插件可以提供哪种数据。至少其中一个必须是真的。

数据源应包含以下功能

query（options）//使用面板数据

testDatasource()//使用的数据源配置页面，以确保连接工作

annotationQuery（options）//仪表板使用注释

metricFindQuery（options）//所使用的查询编辑器来获取指标的建议

添加数据源：

datesource.query 的时间序列响应

datesource.query 的表响应

具体实践

$q.all()执行多个异步回调

Angular 总结

1. Angular 相比其他框架如 React、Vue，学习曲线比较陡峭。

2. Angular 有良好的生态环境，开发者使用 NG 开发越来越多。

3. Angula+Typescript，具有较强的模块化思想，代码结构较为清晰。

4. Angular 是大而全的框架，更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节提出了自己的一套解决方案，使用它们的难点是要付过前期曲线陡峭的学习期，优点是由于使用了标准化的开发方式，后期能极大的提高开发生产力，提高开发效率。

5. 5. Angular 由 Google 出品，前景可观。

写在最后

近年来，在 AIOps 领域极速发展的背景下，IT 工具、平台能力、解决方案、AI 场景及可用数据集的迫切需求在各行业迸发。基于此，云智慧在 2021 年 8 月发布了 AIOps 社区，旨在树起一面开源旗帜，为各行业客户、用户、研究者和开发者们构建活跃的用户及开发者社区，共同贡献及解决行业难题、促进该领域技术发展。

社区先后开源了数据可视化编排平台-FlyFish、运维管理平台 OMP、云服务管理平台-摩尔平台、Hours 算法等产品。

优秀开源项目—FlyFish：

项目介绍：https://www.cloudwise.ai/flyFish.html

Github 地址： https://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址： https://gitee.com/CloudWise/fly-fish

请您通过下方链接了解我们，添加小助手微信（xiaoyuerwie），备注：飞鱼。申请加入开发者交流群，可与业内大咖进行 1V1 交流！