前端架构三大巨头之一 Angular | 深度讲解

云智慧集团成立于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和我们现在的开发方式也是一样的。

前端架构三大巨头之一 Angular | 深度讲解_第1张图片

AngularJs 优缺点

优点:

  1. 模板功能强大丰富
  2. 比较完善的前端MVC框架
  3. 引入了Java的一些概念

缺点:

  1. 性能(由于数据的双向绑定)
  2. 路由
  3. 表单验证
  4. JavaScript语言
  5. 作用域
  6. 学习成本高

Angular 新特性

  1. 全新的命令行工具angular/cli
  2. 服务端渲染
  3. 移动和桌面兼容—ionic和electron

Angular 架构图

前端架构三大巨头之一 Angular | 深度讲解_第2张图片

前端架构三大巨头之一 Angular | 深度讲解_第3张图片

TypeScript

前端架构三大巨头之一 Angular | 深度讲解_第4张图片

特性

  1. 类Clases

前端架构三大巨头之一 Angular | 深度讲解_第5张图片

  1. 泛型

前端架构三大巨头之一 Angular | 深度讲解_第6张图片

  1. 接口Interfaces

前端架构三大巨头之一 Angular | 深度讲解_第7张图片

  1. 模块Modules

前端架构三大巨头之一 Angular | 深度讲解_第8张图片

前端架构三大巨头之一 Angular | 深度讲解_第9张图片

  1. 类型注解Type annotations

前端架构三大巨头之一 Angular | 深度讲解_第10张图片

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

前端架构三大巨头之一 Angular | 深度讲解_第11张图片

如何使用Angular

  1. npm install@angular/cli -g 全局安装angular脚手架工具
  2. ng new project 新建angular项目
  3. cd project 进入到项目里面
  4. ng serve 启动angular

前端架构三大巨头之一 Angular | 深度讲解_第12张图片

前端架构三大巨头之一 Angular | 深度讲解_第13张图片

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)//所使用的查询编辑器来获取指标的建议

添加数据源:

前端架构三大巨头之一 Angular | 深度讲解_第14张图片

datesource.query的时间序列响应

前端架构三大巨头之一 Angular | 深度讲解_第15张图片

datesource.query的表响应

前端架构三大巨头之一 Angular | 深度讲解_第16张图片

具体实践

前端架构三大巨头之一 Angular | 深度讲解_第17张图片

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

前端架构三大巨头之一 Angular | 深度讲解_第18张图片

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/flyF...

Github地址: https://github.com/CloudWise-...

Gitee地址: https://gitee.com/CloudWise/f...

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

前端架构三大巨头之一 Angular | 深度讲解_第19张图片

你可能感兴趣的:(前端架构三大巨头之一 Angular | 深度讲解)