乐趣区

关于前端:前端架构三大巨头之一-Angular-深度讲解

jiezi

云智慧团体成立于 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/flyF…

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

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

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

退出移动版