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。

1. 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