jQueryのバックグラウンドがある場合、「AngularJSで考える」ですか?[閉まっている]

4513
Mark Rajcok 2013-02-21 18:09.

jQueryでのクライアント側アプリケーションの開発に精通していると仮定しますが、ここでAngularJSの使用を開始したいと思います。必要なパラダイムシフトについて説明していただけますか?答えを組み立てるのに役立つかもしれないいくつかの質問があります:

  • クライアント側のWebアプリケーションを異なる方法で設計および設計するにはどうすればよいですか?最大の違いは何ですか?
  • 何をする/使用するのをやめるべきですか。代わりに何を始めるべきですか?
  • サーバー側の考慮事項/制限はありますか?

私はとの詳細な比較を探していないよjQueryAngularJS

15 answers

7177
Josh David Miller 2013-02-22 11:26.

1.ページをデザインしてから、DOM操作で変更しないでください

jQueryでは、ページをデザインしてから動的にします。これは、jQueryが拡張用に設計されており、その単純な前提から信じられないほど成長したためです。

ただし、AngularJSでは、アーキテクチャを念頭に置いてゼロから始める必要があります。「私はDOMのこの部分を持っているので、Xを実行させたい」と考えるのではなく、達成したいことから始めて、アプリケーションの設計に取り掛かり、最後にビューの設計に取り掛かる必要があります。

2.AngularJSでjQueryを拡張しないでください

同様に、jQueryがX、Y、Zを実行するという考えから始めないでください。そのため、モデルとコントローラーの場合は、その上にAngularJSを追加します。これは、始めたばかりのときは本当に魅力的です。そのため、新しいAngularJS開発者は、少なくとも「Angular Way」の実行に慣れるまでは、jQueryをまったく使用しないことを常にお勧めします。

ここやメーリングリストにいる多くの開発者が、150行または200行のコードのjQueryプラグインを使用してこれらの精巧なソリューションを作成し、それらをAngularJSに接着して、$apply混乱し複雑なコールバックのコレクションを作成しているのを見てきました。しかし、彼らは最終的にそれを機能させます!問題は、ほとんどの場合、jQueryプラグインがコードの一部でAngularJSで書き直される可能性があることです。この場合、突然すべてが理解可能でわかりやすくなります。

肝心なのはこれです:解決するとき、最初に「AngularJSで考えてください」。解決策が思いつかない場合は、コミュニティに聞いてください。そのすべての後に簡単な解決策がない場合、その後、 jQueryのために達すること自由に感じ。ただし、jQueryを松葉杖にしないでください。そうしないと、AngularJSをマスターできなくなります。

3.常にアーキテクチャの観点から考えます

まず、シングルページアプリケーションアプリケーションであることを知ってください。それらはウェブページではありません。したがって、クライアント側の開発者のように考えるだけでなく、サーバー側の開発者のように考える必要があります。アプリケーションを個々の拡張可能でテスト可能なコンポーネントに分割する方法を考える必要があります。

では、どうやってそれをするのですか?どのように「AngularJSで考える」のですか?jQueryとは対照的に、いくつかの一般的な原則を次に示します。

ビューは「公式記録」です

jQueryでは、プログラムでビューを変更します。ドロップダウンメニューを次のulように定義することができます。

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

jQueryでは、アプリケーションロジックで、次のようにアクティブ化します。

$('.main-menu').dropdownMenu();

ビューを見るだけでは、ここに機能があることはすぐにはわかりません。小さなアプリケーションの場合、それは問題ありません。しかし、重要なアプリケーションの場合、物事はすぐに混乱し、維持するのが難しくなります。

ただし、AngularJSでは、ビューはビューベースの機能の公式記録です。私たちのul宣言は、代わりに次のようになります。

<ul class="main-menu" dropdown-menu>
    ...
</ul>

これら2つは同じことを行いますが、AngularJSバージョンでは、テンプレートを見ている人は誰でも何が起こるかを知っています。開発チームの新しいメンバーが加わったときはいつでも、彼女はこれを見て、それを操作するという指令があること知ることができますdropdownMenu。彼女は正しい答えを直観したり、コードをふるいにかけたりする必要はありません。その見解は、何が起こるはずだったかを教えてくれました。はるかにきれい。

AngularJSを初めて使用する開発者は、次のような質問をよくします。特定の種類のすべてのリンクを見つけて、それらにディレクティブを追加するにはどうすればよいですか。私たちが返信するとき、開発者はいつもびっくりします:あなたはそうしません。しかし、それを行わない理由は、これがhalf-jQuery、half-AngularJSのようなものであり、役に立たないためです。ここでの問題は、開発者がAngularJSのコンテキストで「jQueryを実行」しようとしていることです。それは決してうまくいきません。ビュー公式記録です。ディレクティブの外では(これについては以下で詳しく説明します)、DOMを変更することは決してありません。また、ディレクティブはビューに適用されるため、意図は明確です。

覚えておいてください:デザインしてからマークアップしないでください。設計してから設計する必要があります。

データバインディング

これはAngularJSの最も優れた機能の1つであり、前のセクションで説明した種類のDOM操作を行う必要性を大幅に削減します。AngularJSはビューを自動的に更新するため、更新する必要はありません。jQueryでは、イベントに応答してからコンテンツを更新します。何かのようなもの:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

次のようなビューの場合:

<ul class="messages" id="log">
</ul>

懸念が混ざり合うことは別として、私たちは前に述べた意図を意味するという同じ問題も抱えています。しかし、もっと重要なことは、DOMノードを手動で参照して更新する必要があったことです。また、ログエントリを削除する場合は、そのためにもDOMに対してコーディングする必要があります。DOMとは別にロジックをテストするにはどうすればよいですか?そして、プレゼンテーションを変更したい場合はどうなりますか?

これは少し厄介でささいな弱さです。しかし、AngularJSではこれを行うことができます:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

そして、私たちの見解は次のようになります。

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

しかし、そのことについては、私たちの見解は次のようになります。

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

そして今では、順序付けられていないリストを使用する代わりに、Bootstrapアラートボックスを使用しています。また、コントローラーコードを変更する必要はありませんでした。しかし、もっと重要なのは、どんなにどこどのようにログが更新され、ビューがあまりにも変化します。自動的に。きちんと!

ここでは示しませんでしたが、データバインディングは双方向です。したがって、これらのログメッセージは、次の操作を行うだけでビューで編集することもできます<input ng-model="entry.msg" />。そして、多くの喜びがありました。

個別のモデルレイヤー

jQueryでは、DOMはモデルのようなものです。ただし、AngularJSには、ビューから完全に独立して、任意の方法で管理できる個別のモデルレイヤーがあります。これは、上記のデータバインディングに役立ち、関心の分離を維持し、はるかに優れたテスト容易性をもたらします。他の回答もこの点について言及しているので、そのままにしておきます。

関心事の分離

そして、上記のすべてがこの包括的なテーマに結びついています。懸念を分離してください。あなたの見解は、(ほとんどの場合)起こることになっていることの公式記録として機能します。モデルはデータを表します。再利用可能なタスクを実行するためのサービスレイヤーがあります。DOM操作を行い、ディレクティブを使用してビューを拡張します。そしてあなたはそれをすべてコントローラーで接着します。これは他の回答でも言及されており、私が追加する唯一のことはテスト容易性に関係します。これについては、以下の別のセクションで説明します。

依存性注入

関心の分離を支援するのは、依存性注入(DI)です。サーバーサイド言語(JavaからPHP)を使用している場合は、おそらくこの概念に既に精通していると思いますが、jQueryを使用しているクライアント側の人であれば、この概念はばかげたものから余分なもの、流行に敏感なものまで何でもあります。 。しかし、そうではありません。:-)

広い観点から見ると、DIは、コンポーネントを非常に自由に宣言でき、他のコンポーネントから、そのインスタンスを要求するだけで許可されることを意味します。ロードの順序やファイルの場所などについて知る必要はありません。パワーはすぐには見えないかもしれませんが、私はただ1つの(一般的な)例を提供します:テスト。

私たちのアプリケーションでは、REST APIを介してサーバー側のストレージを実装し、アプリケーションの状態に応じてローカルストレージも実装するサービスが必要だとします。コントローラでテストを実行するときは、サーバーと通信する必要はありません。結局のところ、コントローラをテストしているのです。元のコンポーネントと同じ名前のモックサービスを追加するだけで、インジェクターによってコントローラーが偽のサービスを自動的に取得するようになります。コントローラーは違いを認識しなくてもかまいません。

テストといえば...

4.テスト駆動開発-常に

これは実際にはアーキテクチャのセクション3の一部ですが、非常に重要なので、独自のトップレベルセクションとして配置します。

あなたが見たり、使用したり、書いたりした多くのjQueryプラグインのすべてのうち、テストスイートが付属しているものはいくつありますか?jQueryはそれにあまり従順ではないため、それほど多くはありません。しかし、AngularJSはそうです。

jQueryでは、テストする唯一の方法は、多くの場合、テストでDOM操作を実行できるサンプル/デモページを使用してコンポーネントを個別に作成することです。それでは、私たちは個別のコンポーネントを開発し、する必要があり、その後私たちのアプリケーションに統合します。なんて不便!多くの場合、jQueryを使用して開発する場合、テスト駆動開発ではなく反復開発を選択します。そして、誰が私たちを責めることができますか?

ただし、関心の分離があるため、AngularJSでテスト駆動開発を繰り返し実行できます。たとえば、現在のルートが何であるかをメニューに示す非常に単純なディレクティブが必要だとします。アプリケーションの観点から、必要なものを宣言できます。

<a href="/hello" when-active>Hello</a>

さて、これで存在しないwhen-activeディレクティブのテストを書くことができます:

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

そして、テストを実行すると、失敗したことを確認できます。今だけ、ディレクティブを作成する必要があります。

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

これでテストに合格、メニューは要求どおりに実行されます。当社の開発は、両方の反復テスト駆動します。邪悪なクール。

5.概念的には、ディレクティブはパッケージ化されていませんjQuery

「ディレクティブでのみDOM操作を行う」という言葉をよく耳にします。これは必需品です。十分な敬意を持って扱ってください!

しかし、もう少し深く掘り下げましょう...

一部のディレクティブは、ビューに既に存在するものを装飾するだけngClassであるため(think )、DOM操作をすぐに実行してから基本的に実行される場合があります。ただし、ディレクティブが「ウィジェット」のようなものであり、テンプレートがある場合は、関心の分離尊重する必要があります。つまり、テンプレート、リンクおよびコントローラー関数での実装からほとんど独立している必要があります。

AngularJSには、これを非常に簡単にするためのツールセットがすべて付属しています。ngClass我々は動的にクラスを更新することができます。ngModel双方向のデータバインディングを可能にします。ngShowそしてngHide、プログラムの要素を表示または非表示。そしてもっとたくさん-私たちが自分で書いたものを含みます。言い換えれば、DOMを操作しなくても、あらゆる種類の素晴らしい機能実行できます。DOM操作が少ないほど、ディレクティブのテストが容易になり、スタイル設定が容易になり、将来の変更が容易になり、再利用可能で配布可能になります。

たくさんのjQueryをスローする場所としてディレクティブを使用するAngularJSを初めて使用する開発者がたくさんいます。言い換えれば、彼らは「コントローラーでDOM操作を行うことができないので、そのコードをディレクティブに入れる」と考えています。それは確かにはるかに優れていますが、それでも間違っていることがよくあります

我々はディレクティブでそれを置く場合でも、セクション3にプログラムされたロガーを考えて、我々はまだそれを「アンギュラウェイ」をやりたいです。それはまだ任意のDOM操作を取りません!DOMの操作が必要になることはよくありますが、思ったよりもはるかにまれです。アプリケーションのどこかでDOM操作を行う前に、本当に必要かどうかを自問してください。より良い方法があるかもしれません。

これは私が最も頻繁に見るパターンを示す簡単な例です。切り替え可能なボタンが必要です。(注:この例は少し工夫されており、まったく同じ方法で解決されるより複雑なケースを表すためにskoshの冗長性があります。)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

これにはいくつか問題があります。

  1. まず、jQueryは必要ありませんでした。ここでは、jQueryを必要とするものは何もありません。
  2. 次に、ページにすでにjQueryがある場合でも、ここで使用する理由はありません。簡単に使用できangular.element、jQueryを持たないプロジェクトにドロップしてもコンポーネントは機能します。
  3. 第3に、このディレクティブが機能するためにjQuery必要であると仮定しても、jqLit​​e(angular.element)は、ロードされている場合は常にjQuery使用します。したがって、使用する必要はありません。$使用するだけangular.elementです。
  4. 第四には、密接に第三に関連し、jqLit​​e要素が中にラップされる必要がないことである$-elementに渡され、そのlink関数が考えすでに可能jQueryの要素!
  5. そして第5に、前のセクションで述べたように、なぜテンプレートのものをロジックに混合するのですか?

このディレクティブは、次のようにはるかに簡単に書き直すことができます(非常に複雑な場合でも!)。

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

繰り返しになりますが、テンプレートのものはテンプレートに含まれているので、あなた(またはあなたのユーザー)はそれを必要なスタイルを満たすものと簡単に交換することができ、ロジックに触れる必要はありませんでした。再利用性-ブーム!

そして、テストのような他のすべての利点がまだあります-それは簡単です!テンプレートの内容に関係なく、ディレクティブの内部APIは変更されないため、リファクタリングは簡単です。ディレクティブに触れることなく、テンプレートを好きなだけ変更できます。そして、何を変更しても、テストは合格です。

w00t!

では、ディレクティブがjQueryのような関数のコレクションだけではない場合、それらは何ですか?ディレクティブは実際にはHTMLの拡張です。HTMLが必要なことを実行しない場合は、それを実行するためのディレクティブを作成し、それをHTMLの一部であるかのように使用します。

AngularJSは箱の外に何かをしていない場合は、別の言い方をすれば、チームは右とに収まるように、それを達成する方法を考えてngClickngClassら。

概要

jQueryも使用しないでください。それも含めないでください。それはあなたを引き止めます。そして、jQueryで解決する方法をすでに知っていると思う問題に遭遇した場合は$、に到達する前に、AngularJSの範囲内でそれを行う方法を考えてみてください。わからない場合は、聞いてください!20回のうち19回、それを行うための最良の方法はjQueryを必要とせず、jQueryでそれを解決しようとすると、より多くの作業が必要になります。

407
Mark Rajcok 2013-02-21 18:09.

命令型→宣言型

jQueryでは、セレクターを使用してDOM要素を検索し、イベントハンドラーをそれらにバインド/登録します。イベントがトリガーされると、その(命令型)コードが実行されてDOMが更新/変更されます。

AngularJSでは、DOM要素ではなくビューについて考えたいと考えています。ビューは、AngularJSディレクティブを含む(宣言型の)HTMLです。ディレクティブは、舞台裏でイベントハンドラーを設定し、動的なデータバインディングを提供します。セレクターはめったに使用されないため、ID(および一部のタイプのクラス)の必要性は大幅に減少します。ビューは(スコープを介して)モデルに関連付けられています。ビューはモデルの投影です。イベントはモデル(つまり、データ、スコーププロパティ)を変更し、それらのモデルを投影するビューは「自動的に」更新されます。

AngularJSでは、データを保持するjQueryで選択されたDOM要素ではなく、モデルについて考えてください。ビューは、ユーザーに表示されるものを操作するためのコールバックを登録するのではなく、それらのモデルの投影として考えてください。

関心事の分離

jQueryは控えめなJavaScriptを採用しています-動作(JavaScript)は構造(HTML)から分離されています。

AngularJSは、コントローラーとディレクティブ(それぞれが独自のコントローラーを持つことも、コンパイルおよびリンク関数を持つこともできます)を使用して、ビュー/構造(HTML)から動作を削除します。Angularには、アプリケーションの分離/整理に役立つサービスフィルターもあります

https://stackoverflow.com/a/14346528/215945も参照してください

アプリケーション設計

AngularJSアプリケーションを設計するための1つのアプローチ:

  1. モデルについて考えてください。これらのモデル用のサービスまたは独自のJavaScriptオブジェクトを作成します。
  2. モデルをどのように提示したいか、つまりビューについて考えてください。動的データバインディングを取得するために必要なディレクティブを使用して、ビューごとにHTMLテンプレートを作成します。
  3. 各ビューにコントローラーを接続します(ng-viewとルーティング、またはng-controllerを使用)。ビューがその仕事をするために必要なモデルデータのみをコントローラーに検索/取得させます。コントローラをできるだけ薄くします。

プロトタイプの継承

JavaScriptのプロトタイプの継承がどのように機能するかを知らなくても、jQueryで多くのことができます。AngularJSアプリケーションを開発するとき、JavaScriptの継承を十分に理解していれば、いくつかの一般的な落とし穴を回避できます。推奨読書:AngularJSのスコーププロトタイプ/プロトタイプ継承のニュアンスは何ですか?

184
superluminary 2014-05-13 00:22.

AngularJSとjQuery

AngularJSとjQueryは非常に異なるイデオロギーを採用しています。jQueryを使用している場合は、驚くべき違いがいくつかあるかもしれません。Angularはあなたを怒らせるかもしれません。

これは正常です。プッシュスルーする必要があります。Angularはそれだけの価値があります。

大きな違い(TLDR)

jQueryは、DOMの任意のビットを選択し、それらにアドホックな変更を加えるためのツールキットを提供します。あなたは少しずつ好きなことをほとんど何でもすることができます。

代わりに、AngularJSはコンパイラーを提供します。

これが意味するのは、AngularJSがDOM全体を上から下に読み取り、それをコードとして、文字通りコンパイラーへの命令として扱うということです。DOMをトラバースするときに、AngularJSコンパイラーに動作方法と実行方法を指示する特定のディレクティブ(コンパイラーディレクティブ)を探します。ディレクティブは、属性、タグ、クラス、さらにはコメントと照合できるJavaScriptでいっぱいの小さなオブジェクトです。

Angularコンパイラーは、DOMの一部が特定のディレクティブに一致すると判断すると、ディレクティブ関数を呼び出し、DOM要素、任意の属性、現在の$ scope(ローカル変数ストア)、およびその他の有用なビットを渡します。これらの属性には、ディレクティブで解釈できる式が含まれている場合があります。この式は、ディレクティブのレンダリング方法と、それ自体を再描画するタイミングを指示します。

次に、ディレクティブはコントローラーやサービスなどの追加のAngularコンポーネントを取り込むことができます。コンパイラーの下部にあるのは、完全に形成されたWebアプリケーションであり、配線されてすぐに使用できます。

これは、Angularがテンプレート駆動型であることを意味します。テンプレートはJavaScriptを駆動しますが、その逆ではありません。これは役割の根本的な逆転であり、過去10年ほどにわたって作成してきた控えめなJavaScriptとは正反対です。これには多少の慣れが必要です。

これが過度に規範的で制限的であるように聞こえる場合、真実から遠く離れることはできません。AngularJSはHTMLをコードとして扱うため、WebアプリケーションでHTMLレベルの粒度が得られます。すべてが可能であり、いくつかの概念的な飛躍をすれば、ほとんどのことは驚くほど簡単です。

核心に迫りましょう。

まず、AngularはjQueryに取って代わりません

AngularとjQueryは異なることをします。AngularJSは、Webアプリケーションを作成するための一連のツールを提供します。jQueryは、主にDOMを変更するためのツールを提供します。jQueryがページに存在する場合、AngularJSはそれを自動的に使用します。そうでない場合、AngularJSにはjQuery Liteが付属しています。これは削減されていますが、jQueryの完全に使用可能なバージョンです。

MiskoはjQueryが好きで、それを使用することに反対しません。ただし、進むにつれて、スコープ、テンプレート、およびディレクティブの組み合わせを使用してほとんどすべての作業を実行できることがわかります。コードがより離散的で、より構成可能であるため、可能な場合はこのワークフローを選択する必要がありますAngular。

jQueryを使用する場合は、あちこちに散らばってはいけません。AngularJSでのDOM操作の正しい場所は、ディレクティブ内です。これらについては後で詳しく説明します。

セレクターと宣言型テンプレートを使用した控えめなJavaScript

jQueryは通常、目立たないように適用されます。JavaScriptコードはヘッダー(またはフッター)にリンクされており、これが言及されている唯一の場所です。セレクターを使用してページの一部を選択し、プラグインを作成してそれらの部分を変更します。

JavaScriptが制御されています。HTMLは完全に独立した存在です。JavaScriptがなくてもHTMLはセマンティックのままです。Onclick属性は非常に悪い習慣です。

AngularJSについて最初に気付くのは、カスタム属性がどこにでもあるということです。HTMLには、基本的にステロイドのonClick属性であるng属性が散らばっています。これらはディレクティブ(コンパイラディレクティブ)であり、テンプレートをモデルにフックする主な方法の1つです。

これを最初に見たとき、AngularJSを古い学校の侵入型JavaScriptとして書き留めたくなるかもしれません(私が最初にしたように)。実際、AngularJSはこれらのルールに従って機能しません。AngularJSでは、HTML5はテンプレートです。AngularJSによってコンパイルされ、Webページが作成されます。

これが最初の大きな違いです。jQueryにとって、Webページは操作されるDOMです。AngularJSにとって、HTMLはコンパイルされるコードです。AngularJSは、Webページ全体を読み取り、組み込みのコンパイラーを使用して、文字通り新しいWebページにコンパイルします。

テンプレートは宣言型である必要があります。その意味は、読むだけで明確になるはずです。意味のある名前のカスタム属性を使用します。新しいHTML要素を、意味のある名前で作成します。HTMLの知識が最小限で、コーディングスキルがないデザイナーは、AngularJSテンプレートを読んで、それが何をしているのかを理解できます。彼または彼女は変更を加えることができます。これがAngularの方法です。

テンプレートは運転席にあります。

AngularJSを起動してチュートリアルを実行するときに最初に自問した質問の1つは、「コードはどこにありますか?」です。。私はJavaScriptを作成していませんが、それでも私はこのすべての動作をしています。答えは明らかです。AngularJSはDOMをコンパイルするため、AngularJSはHTMLをコードとして扱います。多くの単純なケースでは、テンプレートを作成し、AngularJSにそれをアプリケーションにコンパイルさせるだけで十分なことがよくあります。

テンプレートがアプリケーションを駆動します。DSLとして扱われます。AngularJSコンポーネントを作成すると、AngularJSがそれらをプルし、テンプレートの構造に基づいて適切なタイミングで利用できるようにします。これは、テンプレートが出力専用である標準のMVCパターンとは大きく異なります。

たとえば、Ruby onRailsよりもXSLTに似ています

これは制御の根本的な反転であり、ある程度の慣れが必要です。

JavaScriptからアプリケーションを駆動しようとするのをやめてください。テンプレートにアプリケーションを駆動させ、AngularJSにコンポーネントの配線を任せます。これもAngularの方法です。

セマンティックHTMLとセマンティックモデル

jQueryを使用すると、HTMLページに意味的に意味のあるコンテンツが含まれる必要があります。JavaScriptが(ユーザーまたは検索エンジンによって)オフにされている場合、コンテンツは引き続きアクセス可能です。

AngularJSはHTMLページをテンプレートとして扱うためです。コンテンツは通常、最終的にAPIから取得されるモデルに保存されるため、テンプレートはセマンティックであるとは想定されていません。AngularJSは、モデルを使用してDOMをコンパイルし、セマンティックWebページを生成します。

HTMLソースはセマンティックではなくなり、代わりにAPIとコンパイルされたDOMがセマンティックになります。

モデル内に存在することを意味するAngularJSでは、HTMLは表示専用の単なるテンプレートです。

この時点で、SEOとアクセシビリティに関するあらゆる種類の質問がある可能性があります。当然のことながらそうです。ここには未解決の問題があります。ほとんどのスクリーンリーダーはJavaScriptを解析するようになりました。検索エンジンは、AJAXされたコンテンツにインデックスを付けることもできます。それでも、プッシュステートURLを使用していて、適切なサイトマップがあることを確認する必要があります。問題の議論についてはここを参照してください:https//stackoverflow.com/a/23245379/687677

関心の分離(SOC)とMVC

関心の分離(SOC)は、SEO、アクセシビリティ、ブラウザの非互換性など、さまざまな理由で長年のWeb開発で成長したパターンです。次のようになります。

  1. HTML-セマンティックな意味。HTMLはスタンドアロンである必要があります。
  2. CSS-スタイリング。CSSがなくてもページは読み取り可能です。
  3. JavaScript-動作。スクリプトがないとコンテンツは残ります。

繰り返しますが、AngularJSは彼らのルールに従ってプレイしません。一気に、AngularJSは、受け取った10年間の知恵排除し、代わりに、テンプレートがセマンティックではなくなったMVCパターンを実装します。

次のようになります。

  1. モデル-モデルにはセマンティックデータが含まれています。モデルは通常、JSONオブジェクトです。モデルは、$ scopeと呼ばれるオブジェクトの属性として存在します。テンプレートがアクセスできる$ scopeに便利なユーティリティ関数を保存することもできます。
  2. ビュー-ビューはHTMLで記述されています。データはモデル内に存在するため、ビューは通常セマンティックではありません。
  3. コントローラー-コントローラーは、ビューをモデルにフックするJavaScript関数です。その機能は$ scopeを初期化することです。アプリケーションに応じて、コントローラーを作成する必要がある場合とない場合があります。1ページに多数のコントローラーを含めることができます。

MVCとSOCは同じスケールの両端ではなく、完全に異なる軸上にあります。SOCは、AngularJSのコンテキストでは意味がありません。あなたはそれを忘れて先に進まなければなりません。

私のように、あなたがブラウザ戦争を生き抜いたのなら、この考えはかなり不快だと思うかもしれません。それを乗り越えてください、それはそれだけの価値があるでしょう、私は約束します。

プラグインとディレクティブ

プラグインはjQueryを拡張します。AngularJSディレクティブは、ブラウザーの機能を拡張します。

jQueryでは、jQuery.prototypeに関数を追加してプラグインを定義します。次に、要素を選択し、結果でプラグインを呼び出すことにより、これらをDOMにフックします。アイデアは、jQueryの機能を拡張することです。

たとえば、ページにカルーセルが必要な場合は、nav要素でラップされた、順序付けられていない図のリストを定義できます。次に、jQueryを記述してページ上のリストを選択し、タイムアウトを使用してギャラリーとしてスタイルを変更し、スライドアニメーションを実行します。

AngularJSでは、ディレクティブを定義します。ディレクティブは、JSONオブジェクトを返す関数です。このオブジェクトは、AngularJSに、検索するDOM要素と、それらに加える変更を指示します。ディレクティブは、ユーザーが作成した属性または要素のいずれかを使用してテンプレートにフックされます。アイデアは、新しい属性と要素でHTMLの機能を拡張することです。

AngularJSの方法は、ネイティブに見えるHTMLの機能を拡張することです。カスタム属性と要素で拡張された、HTMLのように見えるHTMLを作成する必要があります。

カルーセルが必要な場合は、<carousel />要素を使用してから、テンプレートをプルするディレクティブを定義し、その吸盤を機能させます。

多くの小さなディレクティブと構成スイッチを備えた大きなプラグイン

jQueryの傾向は、ライトボックスのような大きなプラグインを作成し、それを多数の値とオプションを渡して構成することです。

これはAngularJSの間違いです。

ドロップダウンの例を見てください。ドロップダウンプラグインを作成するとき、クリックハンドラー、おそらく上または下のシェブロンを追加する関数、展開された要素のクラスの変更、メニューの非表示、すべての役立つものをコーディングしたくなるかもしれません。

小さな変更を加えたいまで。

ホバー時に展開したいメニューがあるとします。さて今、私たちは問題を抱えています。プラグインはクリックハンドラーに組み込まれているため、この特定のケースで異なる動作をするように構成オプションを追加する必要があります。

AngularJSでは、より小さなディレクティブを記述します。ドロップダウンディレクティブは途方もなく小さいでしょう。折りたたまれた状態を維持し、fold()、unfold()、またはtoggle()のメソッドを提供する場合があります。これらのメソッドは、状態を保持するブール値である$ scope.menu.visibleを更新するだけです。

これで、テンプレートでこれを配線できます

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

マウスオーバーで更新する必要がありますか?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

テンプレートがアプリケーションを駆動するため、HTMLレベルの粒度が得られます。ケースバイケースの例外を作成したい場合は、テンプレートを使用するとこれが簡単になります。

クロージャと$ scope

JQueryプラグインはクロージャで作成されます。プライバシーはその閉鎖内で維持されます。そのクロージャ内でスコープチェーンを維持するのはあなた次第です。実際にアクセスできるのは、jQueryによってプラグインに渡されたDOMノードのセットに加えて、クロージャーで定義されたローカル変数と定義したグローバルのみです。これは、プラグインが完全に自己完結していることを意味します。これは良いことですが、アプリケーション全体を作成するときに制限が生じる可能性があります。動的ページのセクション間でデータを渡そうとすると、面倒になります。

AngularJSには$ scopeオブジェクトがあります。これらは、モデルを保存するAngularJSによって作成および維持される特別なオブジェクトです。特定のディレクティブは、新しい$ scopeを生成します。これは、デフォルトで、JavaScriptのプロトタイプ継承を使用してラップする$ scopeから継承します。$ scopeオブジェクトには、コントローラーとビューからアクセスできます。

これは賢い部分です。$ scope継承の構造はおおまかにDOMの構造に従うため、要素は独自のスコープと、それに含まれるスコープにシームレスにアクセスでき、グローバル$ scope(グローバルスコープとは異なります)までシームレスにアクセスできます。

これにより、データの受け渡しや適切なレベルでのデータの保存がはるかに簡単になります。ドロップダウンが展開されている場合、ドロップダウン$ scopeのみがそれについて知る必要があります。ユーザーがプリファレンスを更新した場合、グローバル$ scopeを更新すると、ユーザープリファレンスをリッスンしているネストされたスコープに自動的にアラートが送信されます。

これは複雑に聞こえるかもしれませんが、実際、リラックスすると、まるで飛んでいるかのようになります。$ scopeオブジェクトを作成する必要はありません。AngularJSは、テンプレート階層に基づいて、正しく適切にインスタンス化して構成します。AngularJSは、依存性注入の魔法を使用して、コンポーネントで利用できるようにします(これについては後で詳しく説明します)。

手動によるDOMの変更とデータバインディング

jQueryでは、すべてのDOM変更を手動で行います。プログラムで新しいDOM要素を作成します。JSON配列があり、それをDOMに配置する場合は、HTMLを生成して挿入する関数を作成する必要があります。

AngularJSでもこれを行うことができますが、データバインディングを利用することをお勧めします。モデルを変更すると、DOMはテンプレートを介してモデルにバインドされるため、DOMは自動的に更新され、介入は必要ありません。

データバインディングは、属性または中括弧構文のいずれかを使用してテンプレートから実行されるため、非常に簡単に実行できます。それに関連する認知的オーバーヘッドはほとんどないので、あなたはいつもそれをしていることに気付くでしょう。

<input ng-model="user.name" />

入力要素をにバインドします$scope.user.name。入力を更新すると、現在のスコープの値が更新されます。その逆も同様です。

同様に:

<p>
  {{user.name}}
</p>

段落にユーザー名を出力します。これはライブバインディングであるため、$scope.user.name値が更新されると、テンプレートも更新されます。

いつもAjax

jQueryでは、Ajax呼び出しを行うのはかなり簡単ですが、それでも2度考えてみるかもしれません。考える必要のある複雑さが増し、維持する必要のあるスクリプトのかなりの部分があります。

AngularJSでは、Ajaxがデフォルトの頼りになるソリューションであり、ほとんど気付かれることなく常に発生します。ng-includeを使用してテンプレートを含めることができます。最も単純なカスタムディレクティブを使用してテンプレートを適用できます。Ajax呼び出しをサービスにラップして、GitHubサービスまたはFlickrサービスを作成できます。これらのサービスには、驚くほど簡単にアクセスできます。

サービスオブジェクトとヘルパー関数

jQueryでは、APIからフィードをプルするなど、domに関係のない小さなタスクを実行する場合、クロージャーでそれを実行するための小さな関数を作成できます。これは有効な解決策ですが、そのフィードに頻繁にアクセスしたい場合はどうでしょうか。そのコードを別のアプリケーションで再利用したい場合はどうなりますか?

AngularJSはサービスオブジェクトを提供します。

サービスは、関数とデータを含む単純なオブジェクトです。それらは常にシングルトンです。つまり、複数存在することはできません。Stack Overflow APIにアクセスしたい場合、StackOverflowServiceそのためのメソッドを定義するを作成できます。

ショッピングカートがあるとしましょう。カートを維持し、アイテムを追加および削除するためのメソッドを含むShoppingCartServiceを定義する場合があります。このサービスはシングルトンであり、他のすべてのコンポーネントで共有されているため、必要なオブジェクトはすべてショッピングカートに書き込んで、そこからデータを取得できます。それは常に同じカートです。

サービスオブジェクトは自己完結型のAngularJSコンポーネントであり、必要に応じて使用および再利用できます。これらは、関数とデータを含む単純なJSONオブジェクトです。これらは常にシングルトンであるため、サービスのデータを1つの場所に保存すると、同じサービスを要求するだけでそのデータを別の場所に取得できます。

依存性注入(DI)とInstatiation-別名de-spaghettification

AngularJSが依存関係を管理します。オブジェクトが必要な場合は、それを参照するだけで、AngularJSがオブジェクトを取得します。

これを使い始めるまで、これがどれほど大きな時間の恩恵であるかを説明するのは難しいです。AngularJSDIのようなものはjQuery内に存在しません。

DIは、アプリケーションを作成して相互に接続する代わりに、それぞれが文字列で識別されるコンポーネントのライブラリを定義することを意味します。

FlickrからJSONフィードをプルするためのメソッドを定義する「FlickrService」というコンポーネントがあるとします。ここで、Flickrにアクセスできるコントローラーを作成する場合は、コントローラーを宣言するときに「FlickrService」を名前で参照する必要があります。AngularJSがコンポーネントのインスタンス化を処理し、コントローラーで使用できるようにします。

たとえば、ここでサービスを定義します。

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

そのサービスを使用したいときは、次のような名前で参照します。

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJSは、コントローラーをインスタンス化するためにFlickrServiceオブジェクトが必要であることを認識し、それを提供します。

これにより、物事を非常に簡単に配線でき、スパゲッティ化の傾向がほとんどなくなります。コンポーネントのフラットリストがあり、AngularJSは必要に応じてそれらを1つずつ私たちに渡します。

モジュラーサービスアーキテクチャ

jQueryは、コードをどのように編成する必要があるかについてほとんど述べていません。AngularJSには意見があります。

AngularJSは、コードを配置できるモジュールを提供します。たとえば、Flickrと通信するスクリプトを作成している場合は、Flickrに関連するすべての関数をラップするFlickrモジュールを作成することをお勧めします。モジュールには他のモジュール(DI)を含めることができます。通常、メインアプリケーションはモジュールであり、これには、アプリケーションが依存する他のすべてのモジュールが含まれている必要があります。

簡単なコードの再利用が可能です。Flickrに基づいて別のアプリケーションを作成する場合は、Flickrモジュールと出来上がりを含めるだけで、新しいアプリケーションのすべてのFlickr関連関数にアクセスできます。

モジュールにはAngularJSコンポーネントが含まれています。モジュールを含めると、そのモジュール内のすべてのコンポーネントが、一意の文字列で識別される単純なリストとして使用できるようになります。次に、AngularJSの依存性注入メカニズムを使用して、これらのコンポーネントを相互に注入できます。

総括する

AngularJSとjQueryは敵ではありません。AngularJS内でjQueryを非常にうまく使用することが可能です。AngularJSを適切に使用している場合(テンプレート、データバインディング、$ scope、ディレクティブなど)、必要なjQueryは他の方法よりもはるかに少ないことがわかります。

認識すべき主なことは、テンプレートがアプリケーションを駆動するということです。すべてを実行する大きなプラグインを作成しようとするのはやめましょう。代わりに、1つのことを行う小さなディレクティブを記述してから、それらを相互に接続するための単純なテンプレートを記述します。

控えめなJavaScriptについてはあまり考えず、代わりにHTML拡張機能の観点から考えてください。

私の小さな本

AngularJSにとても興奮したので、短い本を書きました。オンラインで読むことを歓迎しますhttp://nicholasjohnson.com/angular-book/。お役に立てば幸いです。

152
Ulises 2013-02-21 18:29.

必要なパラダイムシフトについて説明していただけますか?

命令型と宣言型

jQueryを使用するには、ステップバイステップを発生する必要があるかDOMを教えてください。AngularJSあなたが何をしたいの結果を説明、それをしませんか。詳細はこちら。また、MarkRajcokの回答も確認してください。

クライアント側のWebアプリを異なる方法で設計および設計するにはどうすればよいですか?

AngularJSは、MVCパターンを使用するクライアント側フレームワーク全体です(グラフィック表現を確認してください)。関心の分離に重点を置いています。

最大の違いは何ですか?何をする/使用するのをやめるべきですか。代わりに何を始めるべきですか?

jQueryはライブラリです

AngularJSは、MVC、依存性注入、データバインディングなど、数多くの優れた機能を組み合わせた、高度にテスト可能な美しいクライアント側フレームワークです。

関心の分離とテスト(単体テストとエンドツーエンドテスト)に焦点を当てており、テスト駆動開発を容易にします。

始めるための最良の方法は、彼らの素晴らしいチュートリアルを通過することです。数時間で手順を実行できます。ただし、舞台裏の概念を習得したい場合は、さらに読むための無数のリファレンスが含まれています。

サーバー側の考慮事項/制限はありますか?

すでに純粋なjQueryを使用している既存のアプリケーションで使用できます。ただし、AngularJSの機能を十分に活用したい場合は、RESTfulアプローチを使用してサーバー側をコーディングすることを検討してください。

そうすることで、リソースファクトリを活用できるようになります。これにより、サーバー側のRESTful APIが抽象化され、サーバー側の呼び出し(取得、保存、削除など)が非常に簡単になります。

84
Scott Rippey 2014-02-21 21:57.

「パラダイムシフト」を説明するには、短い答えで十分だと思います。

AngularJS要素の検索方法を変更します

jQueryを、あなたは一般的に使用セレクタ要素を見つけること、そしてそれらをワイヤー:
$('#id .class').click(doStuff);

AngularJS、使用するディレクティブを直接要素をマークするために、それらを配線します。
<a ng-click="doStuff()">

AngularJSは、セレクターを使用して要素を見つける必要はありません(または必要ありません)。AngularJSjqLit​​eと本格的なjQueryの主な違いは、jqLit​​eがセレクターをサポートしていないことです。

したがって、「jQueryをまったく含めない」と言われるのは、主にセレクターを使用したくないからです。代わりにディレクティブの使い方を学んでほしいのです。直接、選択しないでください!

69
Nick Manning 2014-02-04 19:07.

jQuery

jQueryは、getElementByHerpDerp短くてクロスブラウザのような途方もなく長いJavaScriptコマンドを作成します。

AngularJS

AngularJSを使用すると、動的Webアプリケーションで適切に機能する独自のHTMLタグ/属性を作成できます(HTMLは静的ページ用に設計されているため)。

編集:

「私はjQueryのバックグラウンドを持っていますが、AngularJSでどのように考えていますか?」「私はHTMLのバックグラウンドを持っているので、JavaScriptでどう思いますか?」と言っているようなものです。質問しているという事実は、これら2つのリソースの基本的な目的を理解していない可能性が高いことを示しています。これが、「AngularJSはディレクティブを使用するのに対し、jQueryはCSSセレクターを使用してこれを行うjQueryオブジェクトなどを作成する」というリストではなく、基本的な違いを指摘するだけで質問に答えることを選択した理由です。 。この質問は長い答えを必要としません。

jQueryは、ブラウザーでのJavaScriptのプログラミングを容易にする方法です。短い、クロスブラウザコマンドなど。

AngularJSはHTMLを拡張<div>するため、アプリケーションを作成するためだけにあらゆる場所に配置する必要はありません。HTMLは、静的な教育用Webページであるように設計されたものではなく、実際にアプリケーションで機能します。これはJavaScriptを使用して回りくどい方法で実現しますが、基本的にはJavaScriptではなくHTMLの拡張です。

61
Samuel 2013-11-03 06:53.

jQuery:DOM要素の「DOMのクエリ」と何かを行うことについてよく考えます。

AngularJS:モデルは真実であり、あなたは常にその角度から考えます。

たとえば、DOMで何らかの形式で表示する予定のサーバーからjQueryでデータを取得する場合は、「1」を実行する必要があります。このデータを配置するDOMのどこに「FIND」、「2。新しいノードを作成するか、そのinnerHTMLを設定するだけで、そこで更新/追加します。次に、このビューを更新する場合は、 '3。場所と4を見つけます。更新'。サーバーからデータを取得してフォーマットするという同じコンテキスト内で行われるこの検索と更新のサイクルはすべて、AngularJSではなくなりました。

AngularJSを使用すると、モデル(既に慣れているJavaScriptオブジェクト)があり、モデルの値によってモデル(明らかに)とビューがわかります。モデルに対する操作は自動的にビューに伝播されるため、あなたはそれについて考える必要があります。AngularJSで、DOMで物事を見つけることができなくなります。

別の言い方をすれば、jQueryでは、CSSセレクター、つまり、クラスや属性などを持つdivorはどこにあるかを考える必要がありますtd。そうすれば、HTML、色、または値を取得できますが、AngularJSではこのように考えていることに気付くでしょう。私が扱っているモデルは、モデルの値をtrueに設定します。この値を反映するビューがチェックボックスであるか、td要素内にあるかを気にする必要はありません(jQueryでよく考える必要のある詳細)。

また、AngularJSでのDOM操作を使用すると、ディレクティブとフィルターを追加することになります。これらは、有効なHTML拡張機能と考えることができます。

AngularJSで経験するもう1つのこと:jQueryではjQuery関数を頻繁に呼び出し、AngularJSではAngularJSが関数を呼び出すため、AngularJSは「物事のやり方を教えてくれます」が、メリットは価値があるので、AngularJSを学ぶ通常、AngularJSが何を望んでいるか、またはAngularJSが関数を提示するために必要な方法を学習することを意味し、それに応じて関数を呼び出します。これは、AngularJSをライブラリではなくフレームワークにするものの1つです。

46
Dan 2014-05-17 11:50.

それらはいくつかの非常に素晴らしいですが、長い答えです。

私の経験を要約すると:

  1. コントローラとプロバイダー(サービス、ファクトリなど)は、HTMLではなく、データモデルを変更するためのものです。
  2. HTMLとディレクティブは、モデルへのレイアウトとバインディングを定義します。
  3. コントローラ間でデータを共有する必要がある場合は、サービスまたはファクトリを作成します。これらは、アプリケーション全体で共有されるシングルトンです。
  4. HTMLウィジェットが必要な場合は、ディレクティブを作成します。
  5. データがあり、HTMLを更新しようとしている場合...やめてください!モデルを更新し、HTMLがモデルにバインドされていることを確認します。
45
Anand 2013-10-10 22:58.

jQueryはDOM操作ライブラリです。

AngularJSはMV *フレームワークです。

実際、AngularJSは数少ないJavaScript MV *フレームワークの1つです(多くのJavaScript MVCツールは依然としてカテゴリライブラリに分類されます)。

フレームワークであるため、コードをホストし、何をいつ呼び出すかについての決定権を取得します。

AngularJS自体には、jQuery-liteエディションが含まれています。したがって、いくつかの基本的なDOMの選択/操作では、jQueryライブラリを含める必要はありません(ネットワーク上で実行するために多くのバイトを節約します)。

AngularJSには、DOM操作と再利用可能なUIコンポーネントの設計のための「ディレクティブ」の概念があるため、DOM操作関連のものを実行する必要があると感じるときはいつでもそれを使用する必要があります(ディレクティブは、AngularJSの使用中にjQueryコードを記述する必要がある場所のみです)。

AngularJSにはいくつかの学習曲線が含まれます(jQueryよりも:-)。

-> jQueryのバックグラウンドを持っている開発者にとって、私の最初のアドバイスは、「AngularJSのようなリッチフレームワークにジャンプする前に、JavaScriptをファーストクラスの言語として学ぶ」ことです。私は上記の事実を難しい方法で学びました。

幸運を。

34
Jin 2013-08-15 04:19.

リンゴとオレンジです。あなたはそれらを比較したくありません。それらは2つの異なるものです。AngularJsにはすでにjQueryliteが組み込まれているため、本格的なjQueryバージョンを含めなくても基本的なDOM操作を実行できます。

jQueryはすべてDOM操作に関するものです。クロスブラウザの問題をすべて解決します。そうしないと対処する必要がありますが、アプリをAngularJSなどのコンポーネントに分割できるフレームワークではありません。

AngularJsの良いところは、ディレクティブ内のDOM操作を分離/分離できることです。ng-clickなど、すぐに使用できる組み込みディレクティブがあります。すべてのビューロジックまたはDOM操作を含む独自のカスタムディレクティブを作成できるため、ビジネスロジックを処理する必要のあるコントローラーまたはサービスでDOM操作コードが混同されることはありません。

Angularは、アプリを-コントローラー-サービス-ビュー-などに分類します。

もう1つ、それがディレクティブです。これは、任意のDOM要素にアタッチできる属性であり、jQueryがAngularJsコンポーネントと競合したり、そのアーキテクチャーを台無しにしたりすることを心配することなく、その中のjQueryを理解することができます。

私が参加したミートアップから聞いたところによると、Angularの創設者の1人は、DOM操作を分離するために本当に一生懸命働いたので、それらを元に戻そうとしないでください。

31
codevinsky 2013-11-09 06:08.

AngularJSの元の作成者であるMiskoHeveryとIgorMinarを特集したポッドキャストJavaScriptJabber:Episode#32を聴いてください。彼らは、他のJavaScriptバックグラウンド、特にjQueryからAngularJSに来ることがどのようなものかについて多くのことを話します。

ポッドキャストで指摘された点の1つは、あなたの質問に関して多くのことを私にクリックさせました。

MISKO:[...] Angularで私たちがほとんど考えなかったことの1つは、脱出して基本的にこれから抜け出す方法を理解できるように、どのように多くのエスケープハッチを提供するかです。だから私たちにとって、答えは「ディレクティブ」と呼ばれるものです。そして、ディレクティブを使用すると、基本的に通常の小さなjQuery JavaScriptになり、好きなことを行うことができます。

IGOR:ディレクティブは、テンプレートでこの特定の要素またはこのCSSに遭遇するたびにそれを通知するコンパイラへの命令と考えてください。この種のコードを保持し、そのコードが要素とその要素の下のすべてを担当します。 DOMツリーで。

エピソード全体のトランスクリプトは、上記のリンクから入手できます。

したがって、あなたの質問に直接答えるには、AngularJSは非常に意見が高く、真のMV *フレームワークです。ただし、ディレクティブ内のjQueryを使用して、知っていて気に入っている本当にすばらしいことをすべて実行できます。「jQueryで以前に行ったことをどのように行うか」の問題ではありません。「jQueryで行っていたすべてのことでAngularJSを補完するにはどうすればよいですか?」という問題と同じくらいです。

それは本当に2つの非常に異なる心の状態です。

30
Evan Zamir 2013-09-13 13:21.

JavaScriptプログラミングに最初に真剣に触れたのはNode.jsとAngularJSだったので、この質問は興味深いと思います。私はjQueryを学んだことがありません。何も学ばなくてもよいので、それは良いことだと思います。実際、私は自分の問題に対するjQueryソリューションを積極的に避け、代わりに、問題を解決するための「AngularJSの方法」を探すだけです。したがって、この質問に対する私の答えは、本質的に「jQueryを学んだことがない人のように考えて」、jQueryを直接組み込みたいという誘惑を避けることになると思います(明らかに、AngularJSは舞台裏である程度使用しています)。

23
Sanjeev Singh 2014-09-22 06:44.

AngularJSとjQuery:

AngularJsとJQueryは、JQLite機能を除くすべてのレベルで完全に異なり、AngularJsのコア機能の学習を開始すると表示されます(以下で説明します)。

AngularJsは、独立したクライアント側アプリケーションの構築を提供するクライアント側フレームワークです。JQueryは、DOMを操作するクライアント側のライブラリです。

AngularJsのクールな原則-UIに変更が必要な場合は、モデルデータの変更の観点から考えてください。データを変更すると、UIが再レンダリングされます。DOMがほとんど必要とされない限り、毎回DOMをいじくり回す必要はなく、Angularディレクティブでも処理する必要があります。

この質問に答えるために、最初のエンタープライズアプリケーションでの私の経験をAngularJSと共有したいと思います。これらは、Angularが提供する最も素晴らしい機能であり、jQueryの考え方を変更し始め、ライブラリではなくフレームワークのようにAngularを取得します。

双方向のデータバインディングは素晴らしいです: 私はすべての機能UPDATE、DELTE、INSERTを備えたグリッドを持っていました。ng-repeatを使用してグリッドのモデルをバインドするデータオブジェクトがあります。削除と挿入のために1行の単純なJavaScriptコードを記述するだけで、それだけです。グリッドモデルが即座に変更されると、グリッドは自動的に更新されます。更新機能はリアルタイムであり、そのためのコードはありません。あなたは素晴らしい気分です!!!

再利用可能なディレクティブは非常に優れ ています。ディレクティブを1か所に記述し、アプリケーション全体で使用します。ああ、神様!!!これらのディレクティブをページング、正規表現、検証などに使用しました。本当にかっこいいです。

ルーティングは強力です: どのように使用するかは実装次第ですが、HTMLとコントローラー(JavaScript)を指定するためにリクエストをルーティングするために必要なコードはごくわずかです。

コントローラーは優れています。 コントローラーは独自のHTMLを処理しますが、この分離は一般的な機能にも適しています。マスターHTMLのボタンをクリックして同じ関数を呼び出したい場合は、各コントローラーに同じ関数名を記述し、個別のコードを記述します。

プラグイン: アプリにオーバーレイを表示するなど、他にも多くの同様の機能があります。コードを記述する必要はありません。wc-overlayとして利用可能なオーバーレイプラグインを使用するだけで、すべてのXMLHttpRequest(XHR)リクエストが自動的に処理されます。

RESTfulアーキテクチャに最適: 完全なフレームワークであるため、AngularJSはRESTfulアーキテクチャでの作業に最適です。REST CRUD APIを呼び出すのは非常に簡単で、

サービス:サービスを使用して一般的なコードを記述し、コントローラーでより少ないコードを記述します。サービスを使用して、コントローラー間で共通の機能を共有できます。

拡張性:Angularは、Angularディレクティブを使用してHTMLディレクティブを拡張しました。html内に式を記述し、実行時にそれらを評価します。独自のディレクティブとサービスを作成し、余分な労力をかけずに別のプロジェクトで使用します。

20
Tyblitz 2014-06-22 01:59.

JavaScript MV *の初心者であり、純粋にアプリケーションアーキテクチャ(サーバー/クライアント側の問題ではない)に焦点を当てているので、次のリソースをお勧めします(まだ言及されていないことに驚いています):JavaScript Design Patterns、Addy Osmani 、さまざまなJavaScriptデザインパターンの概要として。この回答で使用されている用語は、上記のリンクされたドキュメントから取得されています。受け入れられた答えで本当にうまく表現されたことを繰り返すつもりはありません。代わりに、この回答は、AngularJS(および他のライブラリ)を強化する理論的背景にリンクしています。

私と同じように、AngularJS(またはEmber.js、Durandal、その他のMV *フレームワーク)は、さまざまなJavaScriptデザインパターンの多くを組み合わせた1つの複雑なフレームワークであることがすぐにわかります。

また、1つのグローバルフレームワークに飛び込む前に、(1)ネイティブJavaScriptコードと(2)これらのパターンのそれぞれについて個別に小さいライブラリをテストする方が簡単であることがわかりました。これにより、フレームワークが対処する重要な問題をよりよく理解することができました(あなたが個人的に問題に直面しているため)。

例えば:

  • JavaScriptオブジェクト指向プログラミング(これはGoogle検索リンクです)。これはライブラリではありませんが、アプリケーションプログラミングの前提条件です。プロトタイプ、コンストラクター、シングルトン、デコレーターパターンのネイティブ実装を教えてくれました
  • jQueryの/アンダーのためのファサードパターン(WYSIWYGのDOMを操作するためのような)
  • prototype.jsのためのプロトタイプ/コンストラクタ/ミックスインパターン
  • RequireJS / Curl.jsためのモジュールパターン/ AMD
  • KnockoutJSため、観察、パブリッシュ/サブスクライブパターン

注意:このリストは完全ではなく、「最高のライブラリ」でもありません。それらはたまたま私が使用したライブラリです。これらのライブラリにはさらに多くのパターンが含まれており、言及されているのは主な焦点または本来の意図にすぎません。このリストに何か足りないと感じた場合は、コメントにその旨を記載してください。喜んで追加します。

12
Huy Tran 2014-08-27 20:04.

実際、AngularJSを使用している場合は、jQueryはもう必要ありません。AngularJS自体にバインディングとディレクティブがあります。これは、jQueryで実行できるほとんどのことの非常に優れた「置換」です。

私は通常、AngularJSとCordovaを使用してモバイルアプリケーションを開発します。私が必要としたjQueryからの唯一のものはセレクターです。

グーグルで見ると、スタンドアロンのjQueryセレクターモジュールがあることがわかります。シズルです。

そして、jQuery Selector(Sizzleを使用)の機能を備えたAngularJSを使用してWebサイトをすばやく開始するのに役立つ小さなコードスニペットを作成することにしました。

ここでコードを共有しました:https//github.com/huytd/Sizzular

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

オーケーグッド770HPランボルギーニセンテナリオは十分に正気ではない

オーケーグッド770HPランボルギーニセンテナリオは十分に正気ではない

ランボルギーニの創設者であるフェルッチオランボルギーニが100歳になるのは毎日ではありません(そうです、彼は死んでいて、まだ死んでいると思います。

彼らが買った1台の車からAppleの車の計画について私たちが推測できること

彼らが買った1台の車からAppleの車の計画について私たちが推測できること

Appleが自動車分野に参入するという噂はかなり前から渦巻いており、AppleウォッチャーがSixtyEight Researchという会社がAppleの自動車研究開発のシェル会社である可能性が高いと判断したとき、その渦巻きは本当に渦巻いた。また、会社が購入した車は1台だけであることが知られており、その車はAppleが何を考えているかについての手がかりでいっぱいになる可能性があることも伝えています。

天文学者は太陽系の9番目の惑星の新しい証拠を見つけます

天文学者は太陽系の9番目の惑星の新しい証拠を見つけます

太陽系の外側にある架空の大きな物体である惑星Xの探索は、何十年にもわたって人間を魅了してきました。その検索の最新の章は、地球の10倍の大きさで、公転周期が15であるほど遠くにある惑星を指しています。

キャムニュートン、ゴッドダム

キャムニュートン、ゴッドダム

カムニュートンは昨日、簡単な265ヤードと3回のタッチダウンでファルコンズを引き裂き、別の素晴らしいゲームをしました。その日のハイライトは、上のタッチダウンスローでした。これは、視聴するたびにばかげているだけです。

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

メリック・ガーランドはアメリカに失敗しましたか?

バイデン大統領の任期の半分以上です。メリック・ガーランドは何を待っていますか?

メリック・ガーランドはアメリカに失敗しましたか?

人々にチャンスを与えることは、人生で少し遅すぎると私は信じています。寛大に。

Language