質問

これまで主にjQueryライブラリを使ってきましたが、この度AngularJSを使い始めました。のチュートリアルをいくつか読みました。 どのように しかし、なぜ、いつ、Angularを使うのか、また、jQueryを使うのと比べてどんな利点があるのか、よく分かっていません。

AngularはMVCを意識させるようですが、それはおそらく、ウェブページをテンプレートとデータの組み合わせとして見るということでしょう。あなたは {{data bindings}} 動的なデータが必要なときはいつでも。Angularは$scopeハンドラを提供し、静的またはウェブサーバーへの呼び出しによってデータを入力することができます。これは、JSPのウェブページの設計方法と特徴的に似ています。このためにAngularは必要でしょうか？

単純なDOM操作であれば ではありません。 データ操作を伴う場合（例：マウスオーバーで色を変える、クリックで要素を隠す・見せる）には、jQueryやvanilla JSで十分であり、よりクリーンです。これは モデル は、angularの mvc は ページ上のデータを反映させるもの したがって、色や表示/非表示などのCSSプロパティが変更されても モデル . Angularは、DOM操作においてjQueryやvanilla JSよりも優れている点はありますか？

jQueryがプラグインとともにできることと比較して、Angularができることで開発に役立つことは何ですか？

解決方法は？

データバインディング

<ブロッククオート

あなたは自分のウェブページを作りながら、{{data バインディング}}は、動的なデータが必要だと感じたときに使用します。Angularは このハンドラに（静的に）入力することができます。 またはウェブサーバーへの呼び出しによって）。

これはデータバインディングをよく理解していることになります。よく理解できたと思います。

DOM操作

<ブロッククオート

データ操作を伴わない単純なDOM操作の場合 (例：マウスオーバーによる色の変更、クリックによる要素の非表示/表示)。 jQueryや昔ながらのjsで十分だし、すっきりしている。これは、以下を想定しています。 angularのmvcにおけるモデルとは、ページ上のデータを反映させるものです。 したがって、色、表示/非表示などのCSSプロパティは変更されません。 はモデルに影響を与えます。

シンプルなDOM操作の方がすっきりするという指摘は理解できますが、それはごくまれで、本当にシンプルなものでなければなりません。DOM操作は、データバインディングと同様に、Angularが本当に輝いている分野の1つだと思います。これを理解することで、Angularがどのようにビューを考えているのかも見えてくるでしょう。

まず、Angularのやり方と、バニラジャパンのDOM操作のやり方を比較します。伝統的に、私たちはHTMLを何もしないものと考え、そのように書きます。つまり、"onclick"などのインラインjsは、"do"をしないHTMLのコンテキストに置くので、悪い習慣なのです。Angularはその概念を覆します。ビューを書くとき、HTMLは多くのことを"do"できると考えるでしょう。この能力はangularディレクティブで抽象化されますが、もしディレクティブが既に存在するか、書いてあれば、それがどのように行われるかを考える必要はなく、angularで使用できるようになったこのquot; augmented" HTMLの力を使うだけでいいのです。これはまた、ビューのロジックのすべてが、javascriptファイルではなく、ビューに含まれていることを意味します。繰り返しになりますが、javascriptファイルに書かれたディレクティブはHTMLの能力を高めていると考えられるので、DOMに自分自身を操作することを心配させるのです（いわば）。簡単な例で説明しましょう。

これは私たちが使いたいマークアップです。直感的な名前をつけました。

<div rotate-on-click="45"></div>

まず、コメントしたいのは、もし Angularのカスタムディレクティブを使ってHTMLにこの機能を持たせたら、もうそれで終わりです。 . それは新鮮ですね。詳しくは後ほど。

jQueryを使った実装

ライブデモはこちら（クリック）。

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Angularによる実装

ライブデモはこちら（クリック）。

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

かなり軽く、VERY CLEAN、それも簡単な操作で！？ 私の意見では、angularのアプローチはすべての点で勝っています。特に、機能が抽象化され、DOM操作がDOMで宣言されている点が素晴らしいです。この機能はhtml属性で要素にフックされているので、セレクタでDOMに問い合わせる必要はありません。また、2つのすばらしいクロージャがあります。 link 関数（または compile 関数) を使用します。

双方向のデータバインディングとDOM操作のためのディレクティブは、Angularの素晴らしさのほんの始まりに過ぎません。Angularは、すべてのコードがモジュール化され、再利用可能で、簡単にテストできることを推進し、シングルページアプリのルーティングシステムも含んでいます。ここで重要なのは、jQueryが ライブラリ 一般的に必要とされる便利な/クロスブラウザのメソッドですが、Angularはフル機能の フレームワーク シングルページアプリケーションを作成するためのものです。アンギュラースクリプトには、実際に独自のquot;lite"バージョンのjQueryが含まれており、最も重要なメソッドのいくつかを利用することができるようになっています。したがって、Angularを使うことはjQueryを（軽く）使うことだと言えるかもしれませんが、Angularはアプリを作る過程であなたを助けるためにもっと多くのquot;magic"を提供します。

より関連性の高い情報を得るには、こちらの記事がおすすめです。 jQueryのバックグラウンドがある場合、「AngularJSで考える」ためにはどうすればよいのでしょうか？

一般的な違い

上記のポイントは、OPの具体的な悩みに向けたものです。また、その他の重要な違いについて概要を説明します。それぞれのトピックについて、追加の読み物をすることもお勧めします。

AngularとjQueryは合理的に比較することができない。

Angularはフレームワークであり、jQueryはライブラリです。フレームワークにはフレームワークの、ライブラリにはライブラリの立場があります。しかし、優れたフレームワークがアプリケーションを書く上で、ライブラリよりも力を発揮することは間違いない。それこそが、フレームワークの意義なのです。プレーンなJSでコードを書くことも、一般的な関数のライブラリを追加することも、フレームワークを追加してほとんどのことを達成するために必要なコードを劇的に減らすことも歓迎されるのです。したがって、より適切な質問は、です。

なぜフレームワークを使うのか？

優れたフレームワークは、コードをモジュール化（したがって再利用可能）、DRY、可読性、パフォーマンス、安全性を確保するためのアーキテクチャーを支援します。私たちは皆、jQueryのスパゲッティコードの典型的な壁を見たことがあります。これはjQueryのせいではありません。コードのアーキテクチャを知らない開発者のせいです。しかし、もし開発者がコードのアーキテクトの仕方を知っていれば、先程説明した基礎（アーキテクチャーなど）を提供するための最小限の "フレームワーク" を書くか、何かを追加して終わるはずです。例えば、良いコードを書くためのフレームワークの一部として機能するように RequireJS を追加するかもしれません。

ここでは、最近のフレームワークが提供しているものを紹介します。

• テンプレート化
• データバインディング
• ルーティング (単一ページアプリ)
• クリーンでモジュール化された再利用可能なアーキテクチャ
• セキュリティ
• 利便性を高める付加機能

Angularについてさらに説明する前に、この種のものはAngularだけではないことを指摘しておきたいと思います。例えばDurandalは、jQuery、Knockout、RequireJSの上に構築されたフレームワークです。繰り返しになりますが、jQueryは、Knockout、RequireJS、そしてそれらの上に構築されたフレームワーク全体が提供できるものを、それ単体で提供することはできません。比較にならないのです。

惑星を破壊する必要があり、デス・スターがある場合は、デス・スターを使用します。

Angular（再訪問）。

フレームワークが提供するものについての前回の指摘を踏まえ、Angularが提供する方法を称賛し、これがなぜjQuery単独よりも事実上優れているのかを明らかにしたいと思います。

DOMの参照。

上記の例では、機能を提供するためにjQueryがDOMにフックすることは絶対に避けられない。つまり、ビュー（html）は機能性に関心があり（"画像スライダー"のように何らかの識別子でラベル付けされているため）、JavaScriptはその機能性を提供することに関心がある、ということです。Angularはこの概念を抽象化することで、排除しています。Angularで適切に書かれたコードは、ビューがそれ自身の振る舞いを宣言できることを意味します。もし私が時計を表示したいのであれば

<clock></clock>

完了です。

しかし、これはjQueryのアプローチとは逆の方法で行っています。Angularディレクティブ（これは独自の小さな世界にあります）は、htmlをquot;augumented"して、htmlは機能を自分自身にフックしています。

MVWアーキテクチャー／モジュール／依存性注入

Angularは、コードを構造化するためのわかりやすい方法を提供します。ビューに関することはビュー（html）に、拡張されたビュー機能はディレクティブに、その他のロジック（ajaxコールなど）や関数はサービスに、そしてサービスやロジックとビューの接続はコントローラに属します。その他、サービスの設定や変更などに対応するためのAngularコンポーネントもあります。作成した機能は、アプリケーション全体の依存性注入を行うInjectorサブシステムによって、必要な場所で自動的に利用することができます。アプリケーション（モジュール）を書くときは、それを他の再利用可能なモジュールに分割し、それぞれを再利用可能なコンポーネントにしてから、大きなプロジェクトに含めます。Angularで一度問題を解決すると、将来再利用するために便利で構造化された方法で自動的に解決され、次のプロジェクトに簡単に組み込むことができます。A ハゲ これらのボーナスは、あなたのコードをより簡単にテストすることができるようになることです。

Angularで物事をquot;work"させるのは簡単ではありません。

ありがたいことです。前述のjQueryのスパゲッティコードは、何かを"work"してから移動した開発者がもたらしたものです。悪いAngularのコードを書くことはできますが、Angularがそれについて戦ってくるので、そうするのはもっと難しいです。これは、Angularが提供するクリーンなアーキテクチャを（少なくとも多少は）利用しなければならないことを意味します。言い換えれば、Angularで悪いコードを書くのは難しいですが、きれいなコードを書くのはより便利です。

Angularは完璧にはほど遠い。ウェブ開発の世界は常に成長し、変化しており、問題を解決するために新しくより良い方法が打ち出されています。例えばFacebookのReactやFluxは、Angularよりも素晴らしい利点を持っていますが、それぞれ欠点もあります。完璧なものはありませんが、Angularはこれまでも、そして今も素晴らしいものです。かつてjQueryがウェブの世界を前進させたように、Angularもそうでしたし、これから先もそうでしょう。