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

Posted 2023-04-06 云智慧AIOps社区

云智慧集团成立于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），备注：飞鱼。申请加入开发者交流群！

前端三大巨头之一的Vue框架！

▼

  从这里了解Vue框架

  ▼

如果说前端值得关注的热门技术，

Vue绝对榜上有名。

在国内，是当之无愧的框架黑马。

A：什么是Vue？

B：简单来说，vue可以简单写单个页面，也可以写一个大的前端系统。Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。

Vue在中国的热度相对较高，究其原因也是因为Vue能提供更加丰富的资源文档和中文支持，且Vue是渐进式开发，上手容易，门槛比较低。

数据来源：百度指数。 2019年9月至10月 用户搜索 vue、angular、react三大框架的数据

不仅在使用者中热度高，在招聘市场中也依然热度不减，要求掌握Vue框架成为自然不过的事，在面试中Vue的内容也很容易被提及。

目前，不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，相关技术原理也成为了面试中的必考知识点。可以说，对于任何一个前端工程师来说，掌握 Vue 更像是一门“必修课”。

因为精通Vue的前端工程师

平均薪酬高达24820元/月

A：Vue 越来越受开发人员和市场欢迎了。

B：是啊！截止2019年3月，Vue在Github上的star数达13万，远超React与Angular，不管是在 BAT 等互联网大厂，还是创业公司，Vue 都有广泛的应用。对于前端工程师来说，掌握 Vue 可能已经不是一个可选项，而是一门必修课了。

不得不承认， Vue 越来越受欢迎了。对比 Angular 和 React，虽然三者都是非常优秀的前端框架，但从 GitHub 趋势看，Vue 已经排在第一位，达到了 13 万的 Star。

这并不奇怪，Vue 基于 HTML 的模板语法，响应式的更新机制，可以让你更快、更高效地开发项目，渐进式的开发理念和繁荣的生态圈，给我们提供了大量的最佳实践。

无论你是开发简单的活动页还是复杂逻辑的中后台系统，Vue 都可以轻松应对。

A：可是，想要真正用好Vue，没有想象中容易欸！

B：那当然了！大部分人在学习和使用 Vue 的过程中，都面临下面的困境：

1.概念过多，记不住。属性、事件、插槽、指令、修饰符等等，开发的时候还要一遍又一遍翻文档。

2.没能真正理解数据驱动，总是用各种 hack 方法更改视图，为项目挖了一个又一个的坑。

3.状态管理的不合理，不知道如何组织 Vue 中的 data、provide、vuex、observable。

4.工程化，大型项目无从下手。我们有单页面、多页面、前后端分离、mock 联调、构建、打包、单测、持续集成等等，想系统掌握很费力。

学习Vue，首先要懂 JavaScript 和基本的 Web 开发

Vue 是一个用于构建 Web 用户界面的 JavaScript 框架。在开始使用 Vue 之前，你必须了解 JavaScript 和 Web 开发的基础知识。

然后，理解 Vue 基本概念

如果你是 Vue 开发新手，应该专注于 Vue.js 生态系统的核心。从根本上，Vue 就是提供了一种优雅和高效的机制操作网页上的元素，实现这一目标的关键特性是反应式（reactive）数据，还有指令和插槽等模板特性。这些东西在一开始就要学习。

要想构建你的第一个 Vue 应用程序，你还需要知道如何在网页中安装 Vue，并了解 Vue 实例的生命周期；如何声明和利用组件，如何通过 prop 和 event 在它们之间交互；如何构建单页面应用，并且不会在每次用户触发导航时重新加载和重建页面。随着应用程序的复杂度增加，你还需要管理各种状态，这时候你会用到 Flux ……

然后，你进入了现实世界的 Vue

用这些知识可以构建高性能的 Vue 应用程序，那如何将它们部署到生产环境中？想要产品上线，你还需要学习更多东西，比如项目脚手架 Vue CLI，你需要 Vue 和传统的 REST API 或 GraphQL 交互，还需要保证数据的安全，还要对它们进行测试，这时候你会遇到 Vue Test Utils。

当你将应用程序部署到服务器开始为用户提供服务的时候，你发现它与你在开发环境中测试的速度和效率是不一样的。为了优化 Vue 应用程序，我们可以采用各种技术，包括服务器端渲染，也就是在服务器端执行 Vue 应用程序，然后输出 HTML 页面并传给用户。

归纳一下Vue的学习路径就是如下图。

适合在校大学生

0基础小白、在职、转行

提升的IT爱好者

一边学习一边实战

那么在学习在实战的同学们！

如果你想要学习优质的内容，肯定不能错过下面这份资料！

今天，小证君为你精心整理了一份Vue框架学习资料，这份资料包含：

1.Vue安装包

2.Vue视频教程

3.Vue实战项目

结合Vue 的核心知识点及实现原理，从属性、事件、插槽、指令再到生命周期，让你对 Vue 有一个全面的认识，可以上手开发基本的组件，甚至是负责项目中独立的模块。入门不难，深入不简单！但是绝对可以帮助你构建一个更全面的知识体系。感兴趣的小伙伴快来学习吧！

资料总览

资料截图

篇幅有限，仅展示部分