データバインディング
Web ページを作成し、動的なデータが必要な場合はいつでも {{data bindings}} を配置し続けます。Angular は $scope ハンドラーを提供します。このハンドラーは (静的に、または Web サーバーへの呼び出しを通じて) 設定できます。
これで、データ バインディングの理解が深まりました。私はあなたがそれを持っていると思います。
DOM操作
データ操作を伴わない単純な DOM 操作 (例: マウスホバー時の色の変更、クリック時の要素の非表示/表示) の場合、jQuery または古い学校の js で十分かつクリーンです。これは、angular の mvc のモデルがページ上のデータを反映するものであると想定しているため、色、表示/非表示などの css プロパティの変更はモデルに影響しません。
ここで、「単純な」DOM操作がよりクリーンであるというあなたのポイントを見ることができますが、めったになく、本当に「単純」でなければなりません。DOM 操作は、データ バインディングと同様に、Angular が真価を発揮する分野の 1 つだと思います。これを理解すると、Angular がそのビューをどのように考慮するかを理解するのにも役立ちます。
まず、DOM 操作に対する Angular の方法とバニラ js のアプローチを比較します。伝統的に、私たちは HTML を何も「しない」ものと考え、そのように書きます。したがって、「onclick」などのインラインjsは、「実行」しないHTMLのコンテキストに「実行」を配置するため、悪い習慣です。Angular はその概念をひっくり返します。ビューを書いているとき、HTML は多くのことを「実行」できると考えます。この機能は angular ディレクティブで抽象化されていますが、それらが既に存在するか、作成した場合は、それが「どのように」行われるかを考慮する必要はありません。この「拡張された」HTML で利用可能になった機能を使用するだけです。 angular を使用できます。これは、すべてのビュー ロジックが本当にビューに含まれていることも意味します。あなたの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)'
});
});
}
};
});
とても軽く、とてもきれいで、操作は簡単です！私の意見では、特に機能がどのように抽象化され、dom 操作が DOM で宣言されるかという点で、角度のあるアプローチがすべての点で勝っています。機能は html 属性を介して要素にフックされるため、セレクターを介して DOM を照会する必要はありません。2 つの優れたクロージャーがあります。1 つはディレクティブ ファクトリ用のクロージャーで、変数はディレクティブのすべての使用法で共有されます。 、およびlink関数 (または関数)でのディレクティブの使用ごとに 1 つのクロージャcompile。
双方向のデータ バインディングと DOM 操作のディレクティブは、Angular の優れた点の始まりにすぎません。Angular は、すべてのコードをモジュール化、再利用可能、簡単にテストできるように促進し、単一ページのアプリ ルーティング システムも含まれています。jQuery は一般的に必要とされる便利な/クロスブラウザー メソッドのライブラリですが、Angular は単一ページ アプリを作成するためのフル機能のフレームワークであることに注意することが重要です。angular スクリプトには、実際には独自の「ライト」バージョンの jQuery が含まれているため、最も重要なメソッドのいくつかを利用できます。したがって、Angular IS を jQuery を使用して (簡単に) 使用すると主張することもできますが、Angular は、アプリの作成プロセスを支援するためのはるかに多くの「魔法」を提供します。
これは、関連情報についての素晴らしい投稿です: jQuery のバックグラウンドがある場合、どのように「AngularJS で考える」ことができますか?
一般的な違い。
上記のポイントは、OPの特定の懸念を対象としています。また、その他の重要な相違点についても概説します。各トピックについて追加で読むこともお勧めします。
Angular と jQuery を合理的に比較することはできません。
Angular はフレームワーク、jQuery はライブラリです。フレームワークにはそれぞれの場所があり、ライブラリにはそれぞれの場所があります。ただし、優れたフレームワークがアプリケーションを作成する際にライブラリよりも強力であることは間違いありません。それがまさにフレームワークのポイントです。プレーンな JS でコードを記述したり、一般的な関数のライブラリを追加したり、ほとんどのことを達成するために必要なコードを大幅に削減するフレームワークを追加したりできます。したがって、より適切な質問は次のとおりです。
フレームワークを使用する理由
優れたフレームワークは、コードをモジュラー (したがって再利用可能)、DRY、可読性、パフォーマンス、安全性を備えたものにするのに役立ちます。jQuery はフレームワークではないため、これらの点では役に立ちません。jQuery スパゲッティ コードの典型的な壁を見てきました。これは jQuery のせいではなく、コードの設計方法を知らない開発者のせいです。ただし、開発者がコードを設計する方法を知っていた場合、先ほど説明した基盤 (アーキテクチャなど) を提供するために、ある種の最小限の「フレームワーク」を作成するか、何かを追加することになります。たとえば、良いコードを書くためのフレームワークの一部として機能する RequireJS を追加するかもしれません。
以下に、最新のフレームワークが提供するものをいくつか示します。
- テンプレート化
- データバインディング
- ルーティング (シングル ページ アプリ)
- クリーンでモジュール式の再利用可能なアーキテクチャ
- 安全
- 利便性のための追加機能/特徴
Angular について詳しく説明する前に、Angular だけがこの種のものではないことを指摘しておきます。たとえば、Durandal は、jQuery、Knockout、および RequireJS の上に構築されたフレームワークです。繰り返しになりますが、jQuery だけでは、Knockout、RequireJS、およびそれらの上に構築されたフレームワーク全体が提供できるものを提供できません。それは比較にならないだけです。
惑星を破壊する必要があり、デス スターがある場合は、デス スターを使用します。
Angular (再訪)。
フレームワークが提供するものについての以前のポイントに基づいて、Angular がそれらを提供する方法を賞賛し、これが jQuery 単独よりも事実上優れている理由を明確にしたいと思います。
DOM 参照。
上記の例では、jQuery が機能を提供するために DOM にフックする必要があることは絶対に避けられません。つまり、ビュー (html) は機能に関心があり (「イメージ スライダー」などの何らかの識別子でラベル付けされているため)、JavaScript はその機能の提供に関心があるということです。Angular は、抽象化によってその概念を排除します。Angular で適切に記述されたコードは、ビューが独自の動作を宣言できることを意味します。時計を表示したい場合：
<clock></clock>
終わり。
はい、これを意味のあるものにするために JavaScript を使用する必要がありますが、jQuery アプローチとは逆の方法でこれを行っています。私たちの Angular ディレクティブ (独自の小さな世界にあります) は html を「拡張」し、html は機能をそれ自体にフックします。
MVW アーキテクチャ / モジュール / 依存性注入
Angular は、コードを構造化する簡単な方法を提供します。ビューのものはビュー (html) に属し、拡張されたビュー機能はディレクティブに属し、他のロジック (ajax 呼び出しなど) と関数はサービスに属し、ビューへのサービスとロジックの接続はコントローラーに属します。サービスの構成や変更などを処理するのに役立つ、他にも角度のあるコンポーネントがいくつかあります。作成した機能は、アプリケーション全体で依存性注入を処理する Injector サブシステムを介して、必要な場所で自動的に利用できます。アプリケーション (モジュール) を作成するとき、私はそれを他の再利用可能なモジュールに分割し、それぞれが独自の再利用可能なコンポーネントを持ち、それらをより大きなプロジェクトに含めます。Angular で問題を解決したら、将来の再利用のために便利で構造化された方法で自動的に解決し、次のプロジェクトに簡単に含めることができます。あこれらすべてに対する大きなボーナスは、コードのテストがはるかに簡単になることです。
Angular で物事を「機能させる」のは簡単ではありません。
よかった。前述の jQuery スパゲッティ コードは、開発者が何かを「機能」させてから先に進んだ結果です。不適切な Angular コードを作成することはできますが、Angular がそれについて争うことになるため、それを行うのははるかに困難です。これは、それが提供するクリーンなアーキテクチャを (少なくともある程度は) 利用する必要があることを意味します。言い換えれば、Angular で悪いコードを書くのは難しくなりますが、きれいなコードを書く方が便利です。
Angular は完璧には程遠いです。Web 開発の世界は常に成長と変化を続けており、問題を解決するための新しいより良い方法が提案されています。たとえば、Facebook の React と Flux には、Angular より優れた利点がいくつかありますが、独自の欠点もあります。完璧なものはありませんが、Angular はこれまでも今も素晴らしいものです。かつて jQuery が Web の世界の前進に貢献したように、Angular も同様であり、今後も多くの人がそうなるでしょう。