云智慧集团成立于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的优缺点
优点：
- 模板功能强大丰富
- 比较完善的前端MVC框架
- 引入了Java的一些概念
缺点：
- 性能（由于数据的双向绑定）
- 路由
- 表单验证
- JavaScript语言
- 作用域
- 学习成本高
Angular 新特性
- 全新的命令行工具angular/cli
- 服务端渲染
- 移动和桌面兼容—ionic和electron
Angular 架构图
TypeScript
特性
- 类Clases
- 泛型
- 接口Interfaces
- 模块Modules
- 类型注解Type annotations
- 编译时类型检查 Compile time type checking
如何使用Angular
- npm install@angular/cli -g 全局安装angular脚手架工具
- ng new project 新建angular项目
- cd project 进入到项目里面
- ng serve 启动angular
AngularJS与Garfana
- 开发数据源插件（对接数据平台）
- 添加数据源
- 创建仪表盘→编辑→metrics
- 添加模板变量
数据源开发
要与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总结
- Angular相比其他框架如React、Vue，学习曲线比较陡峭。
- Angular有良好的生态环境，开发者使用NG开发越来越多。
- Angula+Typescript，具有较强的模块化思想，代码结构较为清晰。
- Angular是大而全的框架，更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节提出了自己的一套解决方案，使用它们的难点是要付过前期曲线陡峭的学习期，优点是由于使用了标准化的开发方式，后期能极大的提高开发生产力，提高开发效率。
-
- 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交流！
Original: https://www.cnblogs.com/cloudwise/p/15951228.html
Author: 云智慧AIOps社区
Title: 前端架构三大巨头之一Angular|深度讲解
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/711146/
转载文章受原作者版权保护。转载请注明原作者出处！