AngularJS与jQuery有何不同

本文翻译自：How is AngularJS different from jQuery

I only know one js library and that is jQuery . 我只知道一个js库，那就是jQuery 。
But my other coders in the group are changing AngularJS as their default library in new project. 但是我小组中的其他编码人员正在将AngularJS更改为新项目中的默认库。

I don't know anything about it. 我对此一无所知。 How is it different from jQuery? 与jQuery有何不同？
I already have a set of functions done for similar tasks in jQuery. 我已经为jQuery中的类似任务完​​成了一组功能。 Can I still use jQuery stuff with AngularJS? 我还能在AngularJS中使用jQuery吗？

---

#1楼

参考：https://stackoom.com/question/tBMb/AngularJS与jQuery有何不同

---

#2楼

1. While Angular 1 was a framework, Angular 2 is a platform . Angular 1是一个框架，而Angular 2是一个平台 。 ( ref ) （ 参考 ）

To developers, Angular2 provides some features beyond showing data on screen. 对于开发人员来说，Angular2提供了一些功能，除了在屏幕上显示数据。 For example, using angular2 cli tool can help you "pre-compile" your code and generate necessary javascript code ( tree-shaking ) to shrink the download size down to 35Kish. 例如，使用angular2 cli工具可以帮助您“预编译”您的代码并生成必要的javascript代码（ 摇树 ）以将下载大小减小到35Kish。

2. Angular2 emulated Shadow DOM. Angular2模拟了Shadow DOM。 ( ref ) （ 参考 ）

This opens a door for server rendering that can address SEO issue and work with Nativescript etc that don't work on browsers. 这为服务器渲染打开了一扇门，它可以解决SEO问题并可以与在浏览器上不起作用的Nativescript等一起使用。

• The official document site 官方文件网站

• Day one keynote from ng-conf 2016 ng-conf 2016的第一天主题演讲

• Resource links Original: Basically, jQuery is a great tool for you to manipulate and control DOM elements. 资源链接 原始内容：基本上，jQuery是一个不错的工具，可用于您操纵和控制DOM元素。 If you only focus on DOM elements and no Data CRUD, like building a website not web application, jQuery is the one of the top tools. 如果只关注DOM元素而不关注Data CRUD，例如构建网站而不是Web应用程序，则jQuery是顶级工具之一。 (You can use AngularJS for this purpose as well.) （您也可以为此使用AngularJS。）

AngularJS is a framework . AngularJS是一个框架 。 It has following features 具有以下特点

1. Two way data binding 双向数据绑定
2. MVW pattern (MVC-ish) MVW模式（MVC-ish）
3. Template 模板
4. Custom-directive (reusable components, custom markup) 自定义指令（可重用组件，自定义标记）
5. REST-friendly REST友好
6. Deep Linking (set up a link for any dynamic page) 深度链接（为任何动态页面设置链接）
7. Form Validation 表格验证
8. Server Communication 服务器通讯
9. Localization 本土化
10. Dependency injection 依赖注入
11. Full testing environment (both unit, e2e) 完整的测试环境（单元，e2e）

check this presentation and this great introduction 查看此演示文稿和出色的介绍

Don't forget to read the official developer guide 别忘了阅读官方开发人员指南

Or learn it from these awesome video tutorials 或从这些很棒的视频教程中学习

If you want to watch more tutorial video, check out this post, Collection of best 60+ AngularJS tutorials . 如果您想观看更多教程视频，请查看此帖子， 精选的60多个AngularJS教程 。

You can use jQuery with AngularJS without any issue. 您可以将jQuery与AngularJS一起使用，不会出现任何问题。

In fact, AngularJS uses jQuery lite in it, which is a great tool. 实际上，AngularJS在其中使用了jQuery lite，这是一个很棒的工具。

From FAQ 从常见问题

Does Angular use the jQuery library? Angular是否使用jQuery库？

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. 是的，如果在引导应用程序时Angular出现在您的应用程序中，则可以使用jQuery。 If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite. 如果您的脚本路径中不存在jQuery，则Angular会退回到它自己的jQuery子集（我们称为jQLite）的实现。

However, don't try to use jQuery to modify the DOM in AngularJS controllers, do it in your directives. 但是，请勿尝试使用jQuery来修改AngularJS控制器中的DOM，请在您的指令中进行操作。

Update: 更新：

Angular2 is released. Angular2发布了。 Here is a great list of resource for starters 这是适合初学者的大量资源清单

---

#3楼

I want to add something regarding AngularJS difference with jQuery from a developer's perspective. 我想从开发人员的角度添加一些关于AngularJS与jQuery的区别。

In AngularJS you have to have a very structured view and approach on what you want to accomplish. 在AngularJS中，您必须对要完成的工作有一个非常结构化的视图和方法。 It is scarcely following a linear fashion to complete a task, but rather, the exchanges between various objects take care of the requests and actions, which, then, is necessary as angular is an MVC-Based framework. 它很少遵循线性方式来完成任务，而是在各种对象之间进行交换来处理请求和操作，因此，这是必要的，因为基于MVC的 angular框架是必需的。 It also requires an at least general blueprint of the finalized application, since coding depends much on how you want the interactions to be completed. 这也至少需要最终应用程序的一般蓝图，因为编码在很大程度上取决于您希望如何完成交互。

jQuery is like a free poetry, you write lines and keep some relations and momentum appropriate for your task to be accomplished. jQuery就像一本免费的诗歌一样，您编写台词并保持一些关系和动力来完成您的任务。

Though, in Angular JS, you should follow some rules as well as keeping the momentum and relations proper, maybe it is more like classical Spencerian sonnet (a famous classical poet) whose poem is structural and tied to many rules. 但是，在Angular JS中，您应该遵循一些规则，并保持势头和关系适当，也许它更像是古典的Spencerian十四行诗（著名的古典诗人），其诗歌结构清晰且与许多规则联系在一起。

Compared against AngularJS, jQuery is more like a collection of codes and functions (which is, as already mentioned, great for DOM manipulation and fast-effect achievement), while AngularJS is a real framework which gives the developer the ability to build an enterprise web-application with a lot of data-binding and exchange within a superbly organized-routing and management. 与AngularJS相比，jQuery更像是代码和函数的集合（如上所述，它非常适合DOM操作和快速实现效果），而AngularJS是一个真正的框架，使开发人员能够构建企业网站-应用程序在一个非常有组织的路由和管理中具有大量的数据绑定和交换。

Furthermore, AngularJS has no dependency on jQuery to complete its task. 此外，AngularJS不依赖jQuery来完成其任务。 It has two very superb features which are not found in jQuery in any sense: 它具有两个非常出色的功能，这些功能在jQuery中都没有发现：

1- Angular JS teaches you how to CODE and accomplish a goal, not just accomplish a goal by any means. 1- Angular JS教您如何编码和实现目标，而不仅仅是通过任何方式实现目标。 Worth to mention that AngularJS fully utilizes the core and heart of Javascripts and paves the way for you to incorporate in your app, the techniques such as DI (dependency-injection). 值得一提的是，AngularJS充分利用了Javascript的核心和核心，并为您将诸如DI（依赖注入）之类的技术纳入应用程序铺平了道路。 To work with angularJS you should (or must) learn more elevated techniques of coding with Javascript. 要使用angularJS，您应该（或必须）学习更多高级的Javascript编码技术。

2- Angular JS is fully independent to handle directives and structure your app; 2- Angular JS完全独立于处理指令和构建应用程序； you might then simply claim that jQuery can do the same (independence), but, indeed, AngularJS, as several times mentioned within the above lines, has independence in the most excellent possible structurally MVC-Based way. 然后，您可能会简单地声称jQuery可以做到相同（独立），但实际上，正如以上几行中多次提到的，AngularJS具有最出色的基于MVC的结构化方式。

A last note is that, there is no war of Names, since it is far disturbing to be biased, or subjective. 最后要注意的是，没有名称之战，因为它很容易受到偏见或主观的干扰。 jQuery's magnitude and greatness has been proved, but their usages and limitations( of any framework or software) are the concerns of the discussion and similar debates around. 已经证明了jQuery的强大和强大，但是它们的使用和局限性（任何框架或软件）都是讨论和类似辩论的关注点。

Update: 更新：

Using AngularJS is decisive as it is expensive in terms of implementation, but founds a strong base for future expansion, transformation and maintenance of the application. 使用AngularJS是决定性的，因为它的实现成本很高，但为将来扩展，转换和维护应用程序奠定了坚实的基础。 AngularJS is for the New World of Web. AngularJS适用于Web的新世界。 It is targeted toward building applications which are characterized by their least resource consumption (loading only necessary resources from the server), fast response time and high degree of maintainability and extendability wrapped around a structured system. 它的目标是构建具有以下特点的应用程序：资源消耗最少（仅从服务器加载必需的资源），快速的响应时间以及围绕结构化系统的高度可维护性和可扩展性。

---

#4楼

AngularJS : AngularJS is for developing heavy web applications. AngularJS： AngularJS用于开发重型Web应用程序。 AngularJS can use jQuery if it's present in the web-app when the application is being bootstrapped. 如果启动应用程序时AngularJS可以在Web应用程序中使用jQuery，则可以使用jQuery。 If it's not present in the script path, then AngularJS falls back to its own implementation of the subset of jQuery. 如果脚本路径中不存在它，那么AngularJS会退回到它自己的jQuery子集实现。

JQuery : jQuery is a small, fast, and feature-rich JavaScript library. jQuery： jQuery是一个小型，快速且功能丰富的JavaScript库。 It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. 它使诸如HTML文档遍历和操纵，事件处理，动画和Ajax之类的事情变得更加简单。 jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. jQuery简化了JavaScript中的许多复杂内容，例如AJAX调用和DOM操作。

Read more details here: angularjs-vs-jquery 在此处阅读更多详细信息： angularjs-vs-jquery

---

#5楼

I think this is a very good chart describing the differences in short. 我认为这是一个很好的图表，简要描述了这些差异。 A quick glance at it shows most of the differences. 快速浏览一下就可以看到大多数差异。

One thing I would like to add is that, AngularJS can be made to follow the MVVM design pattern while jQuery does not follow any of the standard Object Oriented patterns. 我想补充的一件事是，可以使AngularJS遵循MVVM设计模式，而jQuery不遵循任何标准的面向对象模式。

---

#6楼

Jquery :- 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：-

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