AngularJS和jQuery有什么不同？

Question

AngularJS和jQuery有什么不同？

javascriptjqueryangularjs

389

我只知道一种js库，那就是jQuery。
但是我的小组里其他的程序员正在将AngularJS作为他们新项目的默认库。

我不知道它和jQuery有什么不同？
我已经完成了一套类似任务的jQuery函数集。我还能在AngularJS中使用jQuery的东西吗？

- Mirage

6个回答

41

我希望从开发人员的角度补充一些关于 AngularJS 与 jQuery 的区别。

在AngularJS中，必须非常 结构化 地看待和实现你想要完成的任务。它很少按线性方式完成任务，而是通过各种对象之间的交换处理请求和操作，这是因为Angular是一个基于MVC的框架。此外，它还需要至少初步了解应用程序的最终蓝图，因为编码取决于您希望如何完成交互。

jQuery就像一首 自由格式 的诗歌，你写几行并保持适当的关系和推动力，以完成你的任务。

虽然在AngularJS中，您也应该遵循一些规则，并保持适当的推动力和关系，但可能更像经典的Spencerian sonnet（一位著名的古典诗人）他的诗歌是有结构的，并且遵循许多规则。

与AngularJS相比，jQuery更像是一组代码和函数（正如已经提到的，非常适合DOM操作和快速效果的实现），而AngularJS是一个真正的框架，可以使开发人员能够建立一个企业级Web应用程序，并在极其有序的路由和管理中进行大量数据绑定和交换。

此外，AngularJS没有对jQuery的依赖来完成其任务。它具有两个非常出色的功能，在任何情况下都无法在jQuery中找到：

1- AngularJS教你如何编写代码并实现目标，而不仅仅是通过任何手段实现目标。值得一提的是，AngularJS充分利用了JavaScript的核心和精髓，并为您铺平道路，使您可以在应用程序中加入诸如DI（依赖注入）等技术。要使用AngularJS，您应该（或必须）学习更高级的JavaScript编程技术。

2- AngularJS完全独立处理指令并构造您的应用程序。您可能会说jQuery也可以做到这一点（独立性），但实际上，如上所述，AngularJS以最优秀的基于MVC的结构方式获得了独立性。

最后需要说明的是，这不是关于名称之争，因为偏见和主观只会让人感到烦扰。jQuery的重要性和卓越性已得到证明，但任何框架或软件的使用和限制都是讨论和类似辩论的关注点。

更新：

使用AngularJS是明智之选，虽然在实施方面的成本较高，但为未来应用程序的扩展、转换和维护奠定了坚实的基础。AngularJS针对构建以最少资源消耗（仅从服务器加载必要的资源）、快速响应时间和高度可维护性和可扩展性为特征的应用程序，包装在一个结构化系统中。

- Mostafa Talebi

要使用AngularJS，您应该（或必须）学习更高级的JavaScript编码技巧。"高级技巧"是指什么？请给我一些例子。 - antew

@MostafaTalebi，我只是开玩笑，但是真的不太明白“JavaScript更像是一个概念？”这部分是什么意思？你能再解释一下吗？嗯，我们有什么方式可以联系到彼此吗？ - azerafati

我的意思是它是一个脚本 :))) - Mostafa Talebi

我混淆了一件事情！例如，我们使用PHP作为服务器端，并且我们基于MVC概念采用我们的框架，在模板中我们使用JavaScript，我们也使用Angular js，因此这里Angular js MVC是无用的，不是吗？ - Farhad

28

AngularJS : AngularJS是用于开发复杂的Web应用程序。AngularJS可以在应用程序引导时使用jQuery，如果它存在于Web应用程序中。如果脚本路径中没有它，则AngularJS会退回到其自己实现的一部分jQuery的子集。

JQuery : jQuery是一个小型、快速且功能强大的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单。jQuery简化了JavaScript中许多复杂的事情，如AJAX调用和DOM操纵。

请阅读更多详细信息：angularjs-vs-jquery

- kmario23

21

我认为这篇文章对比图表非常好，一目了然地展示了大部分差异。

另外，我想补充一点的是：AngularJS可以遵循MVVM设计模式，而jQuery则不遵循任何标准的面向对象模式。

- Pritam Banerjee

12

它们在不同的层面上工作。

从初学者的角度来看，最简单的区别是jQuery实质上是JavaScript的一个抽象，因此我们为JavaScript设计页面的方式基本上就是我们为jQuery设计页面的方式。首先从DOM开始，然后在其之上构建行为层。而对于Angular.Js则不然。该过程真正从底层开始，因此最终结果是所需的视图。

使用jQuery可以进行dom操作，而使用Angular.Js则可以创建整个Web应用程序。

jQuery被设计成抽象化各种浏览器的特殊性，并且在不需要添加IE6检查等情况下与DOM一起工作。随着时间的推移，它发展出了一个漂亮而强大的API，使我们能够做很多事情，但它的核心是用于处理DOM，查找元素，改变UI等。将其视为直接使用螺母和螺栓。

Angular.Js是建立在jQuery之上的一层，旨在为前端工程添加MVC概念。 Angular.Js不是提供API来处理DOM，而是提供数据绑定、模板、自定义组件（类似于jQuery UI，但是通过声明而不是通过JS触发）等等。将其视为在更高的层次上工作，使用可以连接在一起的组件，而不是直接在螺母和螺栓级别上工作。

此外，Angular.Js 还提供了适用于多个项目的结构和概念，如控制器（Controllers）、服务（Services）和指令（Directives）。而 jQuery 本身可以以多种（大量的）方式完成相同的事情。幸运的是，使用 Angular.Js ，这种情况会少得多，因此更容易进入和退出项目。它为多人贡献相同项目提供了合理的方式，而无需重新学习一个全新的系统。

简短的比较如下-

jQuery

适合那些了解CSS选择器的人使用
用于DOM操作的库
与模型无关
轻松地操纵网页内容
应用样式以使UI更具吸引力
易于进行DOM遍历
提供效果和动画
制作AJAX调用很简单
实用工具集
没有双向绑定功能
当项目规模增大时变得复杂且难以维护
有时需要编写更多代码才能实现与Angular.Js相同的功能

Angular.Js

这是一个MVVM框架
用于创建SPA（单页应用程序）
它具有路由、指令、双向数据绑定、模型、依赖注入、单元测试等关键特性
是可模块化的
当项目规模增大时易于维护
速度快
双向数据绑定 REST友好 MVC基于模式
深度链接
模板化
内置表单验证
依赖注入
本地化
完整的测试环境
服务器通信

还有更多功能

希望这能有所帮助。

更多相关内容请查看-

- Abrar Jahin

3

Jquery :-

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.

So, using jQuery, we can:

easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more…

AngularJS :-

AngularJS is a product by none other the Search Engine Giant Google and it’s an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.

As being a framework, it dictates us to follow some rules and a structured approach. It’s
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).

In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication

- user6788628

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- maxisam · Accepted Answer

虽然Angular 1是一个框架，但Angular 2是一个平台。(ref)

对于开发人员来说，Angular2提供了一些超出屏幕上显示数据的功能。例如，使用angular2 cli工具可以帮助您“预编译”代码并生成必要的JavaScript代码(tree-shaking)，将下载大小缩小到约35K左右。

Angular2模拟了Shadow DOM。(ref)

这为服务器渲染打开了一扇门，可以解决SEO问题，并可与不适用于浏览器的Nativescript等工作。

官方文档网站
ng-conf 2016第一天的主题演讲
资源链接 Original: 基本上，jQuery是您操作和控制DOM元素的好工具。如果您只关注DOM元素而不是Data CRUD（如构建网站而不是Web应用程序），那么jQuery是最顶尖的工具之一。（您也可以使用AngularJS来完成此任务。）

AngularJS是一个框架。它有以下特点：

双向数据绑定
MVW模式（类似于MVC）
模板
自定义指令（可重用组件，自定义标记）
REST友好
深度链接（为任何动态页面设置链接）
表单验证
与服务器通信
本地化
依赖注入
完整的测试环境（包括单元测试和端到端测试）

请查看此演示文稿和这个绝佳介绍

别忘了阅读官方开发人员指南

或者通过这些精彩的视频教程来学习

如果你想观看更多的教程视频，请查看这篇文章：最佳60+ AngularJS教程集合

你可以在AngularJS中使用jQuery而不会遇到任何问题。

实际上，AngularJS内部使用了jQuery lite，这是一个很好的工具。

来自常见问题解答

Angular是否使用了jQuery库？

是的，如果你的应用程序在启动时存在jQuery，Angular可以使用它。如果你的脚本路径中不存在jQuery，则Angular会退回到我们称之为jQLite的jQuery子集的自己的实现中。

但是，不要尝试在AngularJS控制器中使用jQuery来修改DOM，请在指令中进行操作。

更新：

Angular2已发布。这里有一个很不错的资源列表，适合初学者使用。