AngularJSとjQueryの違い


388

私が知っているjsライブラリは1つだけで、それがjQueryです。
しかし、グループの他のコーダーは、AngularJSを新しいプロジェクトのデフォルトライブラリとして変更しています。

私はそれについて何も知りません。jQueryとどう違うのですか?
私はすでに、jQueryで同様のタスクを実行する一連の関数を持っています。AngularJSでjQueryのものを使用できますか?

回答:


414
  1. Angular 1はフレームワークでしたが、Angular 2はプラットフォームです。(参照

Angular2は、画面にデータを表示する以外にもいくつかの機能を開発者に提供しています。たとえば、angular2 cliツールを使用すると、コードを「プリコンパイル」して、ダウンロードサイズを35Kishに縮小するために必要なJavaScriptコード(ツリーシェーキング)を生成できます。

  1. Angular2はShadow DOMをエミュレートしました。(参照

これは、SEOの問題に対処し、ブラウザーで機能しないNativescriptなどで機能するサーバーレンダリングの扉を開きます。

  • 公式ドキュメントサイト

  • ng-conf 2016の初日基調講演

  • リソースリンク オリジナル: 基本的に、jQueryはDOM要素を操作および制御するための優れたツールです。WebアプリケーションではなくWebサイトの構築のように、DOM要素のみに焦点を当て、データCRUDに焦点を当てていない場合、jQueryはトップツールの1つです。(この目的でAngularJSを使用することもできます。)

AngularJSはフレームワークです。以下の特徴があります

  1. 双方向データバインディング
  2. MVWパターン(MVCっぽい)
  3. テンプレート
  4. カスタムディレクティブ(再利用可能なコンポーネント、カスタムマークアップ)
  5. RESTフレンドリー
  6. ディープリンク(動的ページのリンクを設定)
  7. フォームの検証
  8. サーバー通信
  9. ローカリゼーション
  10. 依存性注入
  11. 完全なテスト環境(両方のユニット、e2e)

このプレゼンテーションとこの素晴らしい紹介を確認してください

公式開発者ガイドを読むことを忘れないでください

または、これらの素晴らしいビデオチュートリアルから学ぶ

さらにチュートリアルビデオをご覧になりたい場合は、この投稿「ベスト60以上のAngularJSチュートリアルのコレクション」をご覧ください

AngularJSでjQueryを問題なく使用できます。

実際、AngularJSはjQuery liteを使用しています。これは優れたツールです。

FAQから

AngularはjQueryライブラリを使用していますか?

はい。Angularは、アプリケーションがブートストラップされるときにjQueryがアプリに存在する場合、jQueryを使用できます。jQueryがスクリプトパスに存在しない場合、AngularはjQLiteと呼ばれるjQueryのサブセットの独自の実装にフォールバックします。

ただし、jQueryを使用してAngularJSコントローラーのDOMを変更しないでください。ディレクティブで変更してください。

更新:

Angular2がリリースされました。初心者向けの優れたリソースのリストを次に示します


8
Angular jsで完全なアプリケーションを開発する必要がありますか、それとも少数のページと少数のapgesでそれを使用できますか?単純なjqueryを使用します
Mirage

8
+1すばらしい答え。AngularはMVVMパターンに近づくと思います。
GFoley83 2013

8
AngularがMVWであると
iConnor

2
数年間、それはMVCに近かった。しかし今、リファクタリングとAPIの改善により、MVVMに近づきました。Angular $ scopeでは、VM(ビューモデル)のように機能します。
無敵の

14
(私がそうであったように)疑問に思っている将来の人々については、MVW == Model-View-Whateverのように、" m odel- v iew- w hatever-works-for-you"のように。つまり、MV *です。
David Frye 2015年

40

開発者の観点から、AngularJSjQueryの違いについて何か追加したいと思います。

AngularJSでは、非常に構造化されたビューと、達成したいことに対するアプローチが必要です。タスクを完了するのに直線的な方法はほとんどありませんが、さまざまなオブジェクト間の交換がリクエストとアクションを処理します。これは、angularがMVCベースのフレームワークであるため必要です。また、コーディングは対話をどのように完了させるかに大きく依存するため、最終的なアプリケーションの少なくとも一般的な青写真が必要です。

jQueryは無料の詩のようなものです。あなたは行を書き、達成すべきタスクに適した関係と勢いを維持します。

Angular JSでは、勢いと関係を適切に保つだけでなく、いくつかのルールに従う必要がありますが、詩は構造的で多くのルールに結び付けられている古典的なスペンサーのソネット(有名な古典詩人)に似ているかもしれません。

AngularJSと比較すると、jQueryはコードと関数のコレクションに似ています(これは、既に述べたように、DOM操作と高速効果の達成に最適です)、AngularJSは、開発者がエンタープライズWebを構築するための実際のフレームワークです-見事に構成されたルーティングと管理内で大量のデータバインディングと交換を行うアプリケーション。

さらに、AngularJSはそのタスクを完了するためにjQuery依存していません。jQueryにはない2つの非常に優れた機能があります。

1- Angular JSは、決して目標を達成するだけでなく、コーディングして目標を達成する方法を教えます。AngularJSはJavascriptのコアとハートを完全に活用し、DI(依存性注入)などの手法をアプリに組み込む方法を提供することは言うまでもありません。angularJSを使用するには、JavaScriptを使用したコーディングの高度な手法を学ぶ必要があります(または必要があります)。

2- Angular JSは、ディレクティブを処理し、アプリを構造化するために完全に独立しています。次に、jQueryが同じ(独立性)を実行できると単純に主張するかもしれませんが、実際、AngularJSは、上記の行で何度か言及されているように、可能な限り最も優れた構造的MVCベースの方法で独立しています。

最後の注意点は、偏見や主観性が非常に気になるので、名前の戦争はないということです。jQueryの重要性と素晴らしさは証明されていますが、それらの使用法と制限(フレームワークまたはソフトウェアの)は、議論や同様の議論の懸案事項です。

更新:

AngularJSの使用は、実装の点で費用がかかるため決定的ですが、アプリケーションの将来の拡張、変換、および保守のための強力な基盤を見つけます。AngularJSはWebの新世界向けです。これは、最小のリソース消費(サーバーから必要なリソースのみをロードする)、高速な応答時間、および構造化システムを取り巻く高度な保守性と拡張性を特徴とするアプリケーションの構築を対象としています。


「angularJSを使用するには、Javascriptを使用したより高度なコーディングテクニックを学ぶ必要があります(またはする必要があります)」-高度なテクニックの意味について例を挙げてください。
antew 2014

@MostafaTalebi、私はただ冗談を言っていましたが、「JavaScriptはよりコンセプトの方が好きですか??」これは何を意味するのでしょうか??もっと説明してもらえますか?とにかく私たちが連絡を取るのですか?
azerafati 2014

私はそれがスクリプトであることを意味します:)))
モスタファ・タレビ'16

私は一つを混ぜました!たとえば、サーバー側に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は、AJAX呼び出しやDOM操作など、JavaScriptの複雑な処理の多くを簡素化します。

詳しくは、angularjs-vs-jqueryをご覧ください。


20

これは、簡単に違いを説明する非常に良いチャートだと思います。それを一目見ると、ほとんどの違いがわかります。

ここに画像の説明を入力してください

追加したいことの1つは、AngularJSMVVM設計パターンに従うようにできる一方で、jQueryは標準のオブジェクト指向パターンに従わないことです。


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は、DOMで動作するAPIを提供する代わりに、データバインディング、テンプレート化、カスタムコンポーネント(jQuery UIに似ていますが、JSを介してトリガーする代わりに宣言的)などを提供します。ナットとボルトのレベルで直接ではなく、一緒にフックできるコンポーネントを使用して、より高いレベルで機能していると考えてください。

さらにAngular.Jsは、コントローラー、サービス、ディレクティブなどのさまざまなプロジェクトに適用される構造と概念を提供します。jQuery自体は、同じことを実行するために複数(ガジリオン)の方法で使用できます。ありがたいことに、Angular.Jsの方がはるかに少ないので、プロジェクトに簡単に出入りできます。システムを一から学習し直さなくても、複数の人が同じプロジェクトに貢献できる健全な方法を提供します。


簡単な比較はこれです-

jQuery

  • CSSセレクターに関する適切な知識を持つユーザーが簡単に使用できます
  • DOM操作に使用されるライブラリです
  • モデルとは関係ありません
  • ウェブページのコンテンツを簡単に操作する
  • スタイルを適用してUIをより魅力的にする
  • 簡単なDOMトラバーサル
  • 効果とアニメーション
  • AJAX呼び出しを行うのは簡単で、
  • ユーティリティの有用性
  • 双方向バインディング機能はありません
  • プロジェクトのサイズが大きくなると、複雑になり、保守が困難になります
  • Angular.Jsと同じ機能を実現するために、より多くのコードを記述する必要がある場合があります。

Angular.Js

  • MVVMフレームワークです
  • SPA(単一ページアプリケーション)の作成に使用
  • ルーティング、ディレクティブ、双方向データバインディング、モデル、依存性注入、単体テストなどの主要な機能があります。
  • モジュール式です
  • 維持可能、プロジェクトのサイズが増加した場合
  • 速いです
  • 双方向データバインディングREST対応MVCベースのパターン
  • ディープリンク
  • テンプレート
  • 組み込みフォームの検証
  • 依存性注入
  • ローカリゼーション
  • 完全なテスト環境
  • サーバー通信

そして、はるかに

ここに画像の説明を入力してください

これが役立つと思います。

もっと見つけることができます -


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 its 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 its 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. Its
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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.