AngularJS与jQuery有何不同

388

我只知道一个js库，那就是jQuery。
但是我小组中的其他编码人员正在将AngularJS更改为新项目中的默认库。

我对此一无所知。与jQuery有何不同？
我已经为jQuery中的类似任务完​​成了一组功能。我还能在AngularJS中使用jQuery吗？

javascript  jquery  angularjs 
— 海市age楼
source

Answers:

414
  1. 虽然Angular 1是一个框架，但Angular 2是一个平台。（参考）

对于开发人员来说，Angular2提供了一些功能，除了在屏幕上显示数据外。例如，使用angular2 cli工具可以帮助您“预编译”您的代码并生成必要的javascript代码（摇树）以将下载大小减小到35Kish。

  1. Angular2模拟了Shadow DOM。（参考）

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

  • 官方文件网站

  • ng-conf 2016的第一天主题演讲

  • 资源链接 原始内容： 基本上，jQuery是一个不错的工具，可用于您操纵和控制DOM元素。如果只关注DOM元素而不关注Data CRUD，例如构建网站而不是Web应用程序，则jQuery是顶级工具之一。（您也可以为此使用AngularJS。）

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

  1. 双向数据绑定
  2. MVW模式（MVC-ish）
  3. 模板
  4. 自定义指令（可重用组件，自定义标记）
  5. REST友好
  6. 深度链接（为任何动态页面设置链接）
  7. 表格验证
  8. 服务器通讯
  9. 本土化
  10. 依赖注入
  11. 完整的测试环境（单元，e2e）

查看此演示文稿和出色的介绍

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

或从这些很棒的视频教程中学习

如果您想观看更多教程视频，请查看这篇帖子，精选的60多个AngularJS教程。

您可以将jQuery与AngularJS一起使用，不会出现任何问题。

实际上，AngularJS在其中使用了jQuery lite，这是一个很棒的工具。

从常见问题

Angular是否使用jQuery库？

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

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

更新：

Angular2发布了。这是适合初学者的大量资源清单

— 马克西姆
source
8
我是否必须在Angular js中开发完整的应用程序，或者我可以在几页和几笔应用程序上使用它？我使用简单的jquery
— Mirage，
8
+1好答案。我想说Angular更接近MVVM模式。
— GFoley83
8
我很确定Angular是MVW
— iConnor 2013年
2
几年来，它已经接近MVC。但是现在重构和api改进，它更接近MVVM。在Angular $ scope中，其工作方式类似于VM（视图模型）。
— 无敌
14
对于任何未来的人（我曾经想过） MVW ==模型-视图-不管什么，如“ 米 odel- v iew- W¯¯ hatever-作品适合你”。换句话说，MV *。
— David Frye
40

我想从开发人员的角度添加一些关于AngularJS与jQuery的区别。

在AngularJS中，您必须对要完成的工作有一个非常结构化的视图和方法。它很少遵循线性方式来完成任务，而是在各种对象之间进行交换来处理请求和操作，因此，这是必要的，因为基于MVC的 angular 框架是必需的。这也至少需要最终应用程序的一般蓝图，因为编码在很大程度上取决于您希望如何完成交互。

jQuery就像一本免费的诗歌，您可以编写台词并保持一些关系和动力来完成您的任务。

尽管在Angular JS中，您应该遵循一些规则，并保持适当的动量和关系，但它更像是古典的Spencerian十四行诗（著名的古典诗人），其诗歌结构清晰且与许多规则联系在一起。

与AngularJS相比，jQuery更像是代码和函数的集合（如上所述，它非常适合DOM操作和快速实现效果），而AngularJS是一个真正的框架，使开发人员能够构建企业网站-应用程序在一个非常有组织的路由和管理中具有大量的数据绑定和交换。

此外，AngularJS不依赖jQuery来完成其任务。它具有两个非常出色的功能，这些功能在jQuery中都没有发现：

1- Angular JS教您如何编码和实现目标，而不仅仅是通过任何方式实现目标。值得一提的是，AngularJS充分利用了Javascript的核心和核心，为您将诸如DI（依赖注入）之类的技术集成到您的应用程序中铺平了道路。要使用angularJS，您应该（或必须）学习更多高级的Javascript编码技术。

2- Angular JS完全独立于处理指令和构建应用程序；然后，您可能会简单地声称jQuery可以做到相同（独立），但是，实际上，正如上面几行提到的AngularJS，它以最出色的基于MVC的结构方式具有独立性。

最后要注意的是，没有名称之战，因为它很容易受到偏见或主观的干扰。已经证明了jQuery的强大和强大，但是它们的用法和局限性（任何框架或软件）都是讨论和周围类似辩论的关注点。

更新：

使用AngularJS是决定性的，因为它的实现成本很高，但为将来扩展，转换和维护应用程序奠定了坚实的基础。AngularJS适用于Web的新世界。它的目标是构建具有以下特性的应用程序：资源消耗最少（仅从服务器加载必需的资源），快速的响应时间以及围绕结构化系统的高度可维护性和可扩展性。

— Mostafa Talebi
source
“要使用angularJS，您应该（或必须）学习更多使用Javascript进行编码的高级技术”-请举例说明增强技术是什么？
— antew
@MostafaTalebi，我只是在开玩笑，但并没有真正理解“ JavaScript更是一个概念？”这一部分。这是什么意思？？你能解释更多吗？嗯，无论如何，我们有联系吗？
— azerafati 2014年
我的意思是说这是一个剧本:)））
— Mostafa Talebi
我弄混了一件事！例如我们在服务器端使用php，我们采用基于MVC概念的框架，在我们使用JavaScript的模板中，我们也使用Angular js，所以这里的angular js MVC是没有用的，不是吗？
— Farhad
28

AngularJS： AngularJS用于开发重型Web应用程序。如果启动应用程序时AngularJS可以在Web应用程序中使用jQuery，则可以使用jQuery。如果脚本路径中不存在它，那么AngularJS会退回到它自己的jQuery子集实现。

jQuery的： jQuery是一个小型，快速且功能丰富的JavaScript库。它使诸如HTML文档遍历和操纵，事件处理，动画和Ajax之类的事情变得更加简单。jQuery简化了JavaScript中的许多复杂内容，例如AJAX调用和DOM操作。

在此处阅读更多详细信息：angularjs-vs-jquery

— kmario23
source
20

我认为这是一个很好的图表，简要描述了这些差异。快速浏览一下就可以看到大多数差异。

在此处输入图片说明

我想补充的一件事是，可以使AngularJS遵循MVVM设计模式，而jQuery不遵循任何标准的面向对象模式。

— Pritam Banerjee
source
12

它们在不同级别上工作。

从初学者的角度来看，区别的最简单方法是jQuery本质上是JavaScript的抽象，因此我们为JavaScript设计页面的方式几乎就是我们为jQuery做的方式。从DOM开始，然后在此之上构建行为层。Angular.Js并非如此。该过程实际上是从头开始的，因此最终结果是所需的视图。

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

jQuery的构建是为了抽象化各种浏览器特性，并使用DOM而不需要添加IE6检查等。随着时间的流逝，它开发了一个不错的，健壮的API，使我们可以做很多事情，但从本质上讲，它是用于处理DOM，查找元素，更改UI等等。可以将其视为直接使用螺母和螺栓。

Angular.Js构建为jQuery之上的一层，以将MVC概念添加到前端工程中。Angular.Js并没有为您提供与DOM一起使用的API，而是为您提供了数据绑定，模板化，自定义组件（类似于jQuery UI，但是声明式而不是通过JS触发）以及更多其他功能。可以认为它是在更高级别上工作的，可以将各个组件钩在一起，而不是直接在螺母和螺栓级别上进行工作。

此外，Angular.Js还为您提供适用于各种项目的结构和概念，例如Controllers，Services和Directives。jQuery本身可以以多种（千亿种）方式使用来完成相同的事情。幸运的是，使用Angular.Js的方法要少得多，这使进入和退出项目更加容易。它为多个人提供了一个为同一项目做出贡献的明智方法，而无需从头开始学习系统。

简短的比较可以是-

jQuery的

  • 熟悉CSS选择器的人可以轻松使用
  • 它是用于DOM操作的库
  • 与模型无关
  • 轻松操纵网页内容
  • 应用样式以使UI更具吸引力
  • 轻松进行DOM遍历
  • 效果和动画
  • 轻松进行AJAX调用和
  • 实用程序可用性
  • 没有双向绑定功能
  • 当项目规模增加时，变得复杂且难以维护
  • 有时您必须编写更多代码才能实现与Angular.Js相同的功能

角钢

  • 这是一个MVVM框架
  • 用于创建SPA（单页应用程序）
  • 它具有关键功能，例如路由，指令，双向数据绑定，模型，依赖项注入，单元测试等
  • 是模块化的
  • 当项目规模增加时可维护
  • 快
  • 双向数据绑定基于REST友好的基于MVC的模式
  • 深层连结
  • 模板化
  • 内置表格验证
  • 依赖注入
  • 本土化
  • 完整的测试环境
  • 服务器通讯

以及更多

在此处输入图片说明

认为这有帮助。

可以找到更多 -

— 阿布拉·贾欣（Abrar Jahin）
source
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
— 贾姆沙伊德·卡姆兰（Jamshaid Kamran）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.