写点什么

Angular 被称为前端架构三巨头之一的原因,你了解吗?

  • 2022 年 3 月 01 日
  • 本文字数:1574 字

    阅读完需:约 5 分钟

云智慧集团成立于 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 交流!


用户头像

全栈智能业务运维服务商 2021.03.10 加入

我们秉承Make Digital Online的使命,致力于通过先进的产品技术,为企业数字化转型和提升IT运营效率持续赋能。 https://www.cloudwise.com/

评论

发布
暂无评论
Angular被称为前端架构三巨头之一的原因,你了解吗?_前端_云智慧AIOps社区_InfoQ写作平台