使い始めたいと思います。必要なパラダイムシフトについて教えてください。ここにあなたが答えを組み立てるのを助けるかもしれないいくつかの質問があります:クライアントサイドのWebアプリケーションをどのように設計および設計するのですか。最大の違いは何ですか?私は何をやるのをやめるべきではありません。代わりに何をしたり使用したりする必要がありますか?サーバー側の考慮事項/制限はありますか?jQueryとAngularJSの詳細な比較は探していません。要素を見つけ、それらにイベントハンドラをバインド/登録します。イベントがトリガーされると、その(必須)コードが実行されてDOMを更新または変更します。ついて考えたいと思います。含む(宣言型)HTMLです。ディレクティブは舞台裏でイベントハンドラを設定し、動的データバインディングを提供します。セレクタはめったに使用されないので、ID(およびいくつかの種類のクラス)の必要性は大幅に減少します。関連付けられています。ビューはモデルの投影です。イベントはモデル(つまり、データ、スコープのプロパティ)を変更し、それらのモデルを投影するビューは「自動的に」更新されます。AngularJSでは、データを保持するjQueryで選択されたDOM要素ではなくモデルについて考えてください。ユーザーの見るものを操作するためにコールバックを登録するのではなく、ビューをそれらのモデルの射影として考えてください。動作(JavaScript)を構造(HTML)から分離しています。ディレクティブ(それぞれが独自のコントローラーを持つことができ、そして/またはコンパイルとリンク関数を持つことができます)を使用してビュー/構造(HTML)から振る舞いを取り除きます。あり、アプリケーションの分離/整理に役立ちます。アプリケーション設計AngularJSアプリケーションを設計するための1つのアプローチ:あなたのモデルについて考えてください。それらのモデル用のサービスまたは独自のJavaScriptオブジェクトを作成します。あなたの見解について考えてみてください。動的データバインディングを取得するために必要なディレクティブを使用して、各ビュー用のHTMLテンプレートを作成します。routing、またはng-controllerを使用)。ビューにその仕事をさせるのに必要なモデルデータだけをコントローラに検索させます。コントローラはできるだけ薄くしてください。プロトタイプの継承JavaScriptのプロトタイプ継承がどのように機能するのかを知らなくても、jQueryを使って多くのことができます。AngularJSアプリケーションを開発するときに、JavaScriptの継承について十分に理解していれば、一般的な落とし穴を避けることができます。JSとjQueryは、まったく異なるイデオロギーを採用しています。あなたがjQueryから来ているなら、あなたは違いのいくつかが驚くべきことに気付くかもしれません。Angularはあなたを怒らせるかもしれません。これは正常です、あなたはプッシュスルーする必要があります。Angularはその価値があります。大きな違い(TLDR)jQueryはあなたにDOMの任意の部分を選択し、それらに特別な変更を加えるためのツールキットを提供します。あなたは少しずつ好きなことを何でもすることができます。AngularJSは代わりにcompilerを提供します。これが意味するのは、AngularJSがDOM全体を上から下に読み、それをコードとして、文字通りコンパイラへの命令として扱うということです。DOMを横断する際に、AngularJSコンパイラに動作方法と実行方法を指示する特定のdirectives(コンパイラ指令)を探します。ディレクティブはJavaScriptでいっぱいの小さなオブジェクトで、属性、タグ、クラス、さらにはコメントに対しても一致します。scope(ローカル変数ストア)を渡します。これらの属性はDirectiveによって解釈されることができて、そしてそれがどのようにレンダリングするか、そしていつそれがそれ自身を再描画するべきであるかをそれに伝える表現を含むかもしれません。その後、ディレクティブは、コントローラ、サービスなどのAngularコンポーネントを追加することができます。コンパイラの一番下に出てくるのは、完全に形成されたWebアプリケーションです。Drivenであることを意味します。あなたのテンプレートはJavaScriptを動かしますが、その逆ではありません。これは役割の根本的な逆転であり、ここ10年ほどで私たちが書いてきた控えめなJavaScriptの正反対です。これには慣れるまでに時間がかかることがあります。これが過度に規範的で制限的であるように思われる場合、真実からそれ以上遠くなることはできません。AngularJSはあなたのHTMLをコードとして扱うので、あなたはあなたのWebアプリケーションでHTMLレベルの細かさを得ます。すべてが可能であり、そして概念的な飛躍を少し行えば、ほとんどのことは驚くほど簡単です。最初に、AngularはjQueryを置き換えませんAngularとjQueryは異なることをします。AngularJSは、Webアプリケーションを作成するための一連のツールを提供します。jQueryは主にDOMを修正するためのツールを提供します。あなたのページにjQueryがある場合、AngularJSはそれを自動的に使います。Liteが同梱されています。これは切り詰められたものですが、まだ完全に使用可能なバージョンのjQueryです。MiskoはjQueryが好きで、それを使っていることに反対しません。スコープ、テンプレート、ディレクティブを組み合わせて使用​​することで、ほとんどすべての作業を完了できることがわかります。コードはより離散的で構成可能なものになるため、可能な限りこのワークフローをお勧めします角度があります。あなたがjQueryを使用するのであれば、あなたはそれをあちこちに振りかけてはいけません。AngularJSのDOM操作の正しい場所はディレクティブです。これらについては後で詳しく説明します。セレクターを使用した控えめなJavaScriptと宣言型テンプレートjQueryは通常、控えめに適用されます。JavaScriptコードはヘッダー(またはフッター)にリンクされています。ここが唯一の言及箇所です。セレクタを使ってページの一部を選び出し、それらの部分を修正するためのプラグインを書きます。JavaScriptが制御されています。HTMLは完全に独立した存在です。JavaScriptがなくてもあなたのHTMLは意味的なままです。Onclick属性はとても悪い習慣です。AngularJSについて最初に気付くことの1つは、カスタム属性が至るところにあることです。あなたのHTMLはng属性で散らばってくるでしょう。それは本質的にステロイドのonClick属性です。これらは指令(コンパイラ指令)であり、テンプレートがモデルにフックされる主な方法の1つです。あなたが初めてこれを見たとき、あなたは(私が最初にやったように)古い学校の邪魔なJavaScriptとしてAngularJSをオフに書きたくなるかもしれません。実際、AngularJSはこれらの規則に従って機能しません。AngularJSでは、あなたのHTML5はテンプレートです。それはあなたのWebページを作成するためにAngularJSによってコンパイルされます。これが最初の大きな違いです。jQueryにとって、あなたのWebページは操作されるDOMです。AngularJSにとって、あなたのHTMLはコンパイルされるべきコードです。AngularJSはあなたのウェブページ全体を読み込み、内蔵のコンパイラを使って文字通りそれを新しいウェブページにコンパイルします。あなたのテンプレートは宣言的であるべきです。その意味は単にそれを読むことによって明らかになるはずです。意味のある名前の付いたカスタム属性を使用します。意味のある名前で、新しいHTML要素を作ります。最小限のHTMLの知識とコーディングスキルのない設計者はあなたのAngularJSテンプレートを読んでそれが何をしているのか理解することができます。彼または彼女は修正を加えることができます。これがAngularの方法ですテンプレートは運転席にあります。AngularJSを起動してチュートリアルを実行するときに最初に質問した質問の1つは、"コードはどこにありますか?"です。私はJavaScriptを書いていませんが、それでも私はこのような振る舞いをすべて持っています。AngularJSはDOMをコンパイルするため、AngularJSはHTMLをコードとして扱います。多くの単純なケースでは、単にテンプレートを書いてAngularJSにそれをアプリケーションにコンパイルさせるだけで十分です。あなたのテンプレートがあなたのアプリケーションを動かします。AngularJSコンポーネントを書くと、AngularJSがそれらを引き込み、テンプレートの構造に基づいて適切なタイミングでそれらを使用できるようにします。パターンとは非常に異なります。テンプレートは単に出力用です。Railsのほうが似ています。これはコントロールの根本的な反転であり、慣れるまでに時間がかかります。あなたのJavaScriptからあなたのアプリケーションを駆動しようとするのをやめなさい。テンプレートを使ってアプリケーションを動かし、AngularJSにコンポーネントの相互接続を任せます。これもAngularのやり方です。セマンティックHTMLとセマンティックモデルJQueryを使用すると、HTMLページに意味のある意味のあるコンテンツが含まれるはずです。JavaScriptが(ユーザーまたは検索エンジンによって)オフにされている場合でも、コンテンツはアクセス可能なままです。AngularJSはあなたのHTMLページをテンプレートとして扱うからです。コンテンツは通常、最終的にはAPIから取得されるモデルに格納されるため、テンプレートは意味的なものではありません。AngularJSはDOMをモデルとコンパイルしてセマンティックWebページを作成します。あなたのHTMLソースはもはやセマンティックではなく、代わりにあなたのAPIとコンパイルされたDOMはセマンティックです。AngularJSでは、モデル内に存在するという意味で、HTMLは単なる表示用のテンプレートです。アクセシビリティに関してあらゆる種類の質問を持っているでしょう。ここに未解決の問題があります。ほとんどのスクリーンリーダーはJavaScriptを解析します。contentにインデックスを付けることもできます。それでも、プッシュステートURLを使用していて、適切なサイトマップを持っていることを確認する必要があります。(SOC)は、SEO、アクセシビリティ、ブラウザの非互換性など、さまざまな理由で長年のWeb開発で成長したパターンです。セマンティックな意味HTMLは独立しているべきです。スタイリング、CSSがなくてもページはまだ読み込み可能です。振る舞い、スクリプトなしでコンテンツは残ります。繰り返しになりますが、AngularJSは彼らのルールに従って行動しません。ストロークにおいて、AngularJSは受け取った知恵の10年を廃止し、その代わりにテンプレートがもはや意味論的でなく、少しでもないMVCパターンを実装します。あなたのモデルはあなたのセマンティックデータを含みます。scopeと呼ばれるオブジェクトの属性として存在します。scopeに格納することもできます。あなたのビューはHTMLで書かれています。データはモデル内に存在するため、通常ビューは意味を持ちません。あなたのコントローラはモデルにビューをフックする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を書く必要があります。/>エレメントを使用してから、テンプレートを取り込むディレクティブを定義して、その吸盤を機能させます。たくさんの小さなディレクティブとコンフィギュレーションスイッチを持つ大きなプラグインJQueryの傾向はライトボックスのような大きな大きなプラグインを書くことです。それを次に私たちはたくさんの値とオプションを渡して設定します。これはAngularJSの間違いです。ドロップダウンの例を見てください。ドロップダウンプラグインを書くときには、クリックハンドラ、上下にあるシェブロンを追加する機能、展開された要素のクラスを変更する機能、メニューを隠す機能など、すべての便利な機能をコード化したいと思うかもしれません。した変更を加えたいと思うまで。あなたがホバーに展開したいメニューがあるとしましょう。私たちは問題を抱えています。私たちのプラグインは私たちのために私たちのクリックハンドラに配線されています、私たちはこの特定のケースでそれが異なって振る舞うようにするために設定オプションを追加する必要があるでしょう。AngularJSでは、もっと小さなディレクティブを書きます。私たちのドロップダウン指示はばかげて小さいでしょう。それは折り畳まれた状態を維持し、fold()、unfold()またはtoggle()へのメソッドを提供するかもしれません。scope.menu.visibleを更新します。これで私たちのテンプレートにこれを結び付けることができます。...</ul>テンプレートはアプリケーションを動かすので、HTMLレベルの細分性が得​​られます。私たちがケースバイケースの例外を作りたいのであれば、テンプレートはこれを容易にします。クロージャー対$スコープJQueryプラグインはクロージャで作成されています。プライバシーはその閉鎖の範囲内で維持されます。その範囲内でスコープチェーンを維持するのはあなた次第です。あなたは本当にjQueryによってプラグインに渡されたDOMノードのセットに加えて、クロージャーで定義された任意のローカル変数とあなたが定義したすべてのグローバルにアクセスすることができます。これはプラグインがかなり自己完結していることを意味します。これは良いことですが、アプリケーション全体を作成するときに制限が生じる可能性があります。動的ページのセクション間でデータをやり取りするのは面倒です。scopeオブジェクトがあります。これらはAngularJSによって作成および管理される特別なオブジェクトであり、そこにモデルを保存します。特定のディレクティブは新しい$スコープを生成します。これはデフォルトではJavaScriptのプロトタイプ継承を使用して、ラップしている$スコープから継承します。scopeオブジェクトはコントローラとビューからアクセスできます。scopeの継承の構造はDOMの構造にほぼ従っているため、要素は自分自身のスコープ、およびそれを含むすべてのスコープにシームレスにアクセスできます(グローバルスコープと同じではありません)。これにより、データの受け渡しや適切なレベルでのデータの格納がはるかに簡単になります。ドロップダウンが展開されている場合は、ドロップダウン$スコープだけがそれを知る必要があります。ユーザーが自分の設定を更新した場合は、グローバル$スコープを更新することをお勧めします。ユーザー設定をリスニングしているネストされたスコープは自動的に警告されます。これは複雑に聞こえるかもしれませんが、実際には一度リラックスすると飛ぶようなものです。scopeオブジェクトを作成する必要はありません。AngularJSがテンプレート階層に基づいて正しく適切にインスタンス化して設定します。AngularJSは依存性注入の魔法を使ってそれをあなたのコンポーネントで利用できるようにします(これについては後で詳しく説明します)。手動DOM変更とデータバインディングJQueryでは、DOMの変更をすべて手作業で行います。プログラム的に新しいDOM要素を構築します。JSON配列があり、それをDOMに置きたい場合は、HTMLを生成してそれを挿入する関数を作成する必要があります。AngularJSでもこれを行うことができますが、データバインディングを利用することをお勧めします。モデルを変更すると、DOMは自動的に更新されるテンプレートを介してDOMにバインドされるため、介入は不要です。データバインディングは、属性または中括弧の構文を使用してテンプレートから行われるため、非常に簡単に行えます。それに関連した認知的なオーバーヘッドはほとんどないので、あなたはあなた自身がいつもそれをやっているのを見つけるでしょう。/>入力要素を$scope.user.nameにバインドします。入力を更新すると、現在のスコープ内の値が更新されます。{{user.name}}</p>段落にユーザー名を出力します。これはライブバインディングなので、$scope.user.nameの値が更新されると、テンプレートも更新されます。いつものAjaxJQueryでは、Ajax呼び出しを行うのはかなり簡単ですが、それでもやはり2度考えることがあります。考えるべき複雑さが増し、維持するべきかなりの量のスクリプトがあります。AngularJSでは、AjaxがデフォルトのGo-Toソリューションであり、ほとんど気付かれることなく常に発生します。ng-includeを使ってテンプレートを含めることができます。簡単なカスタムディレクティブを使ってテンプレートを適用できます。serviceを自分で作成すると、驚くほど簡単にアクセスできます。サービスオブジェクトとヘルパー関数JQueryで、APIからフィードを取得するなど、domに関連しない小さなタスクを実行したい場合は、クロージャー内でそれを実行するための小さな関数を書くことができます。これは有効な解決策ですが、そのフィードに頻繁にアクセスしたい場合はどうなりますか。そのコードを別のアプリケーションで再利用したい場合はどうなりますか?AngularJSはサービスオブジェクトを提供します。サービスは、機能とデータを含む単純なオブジェクトです。それらは常にシングルトンです。それらが1つ以上存在することはあり得ません。APIにアクセスしたいとしましょう。するためのメソッドを定義するStackOverflowServiceを書くかもしれません。ショッピングカートがあるとしましょう。カートを管理し、商品を追加および削除するためのメソッドを含むShoppingCartServiceを定義します。このサービスはシングルトンであり、他のすべてのコンポーネントと共有されているため、必要なオブジェクトはすべてショッピングカートに書き込んでそこからデータを取得できます。いつも同じカートです。サービスオブジェクトは自己完結型のAngularJSコンポーネントであり、必要に応じて使用および再利用できます。それらは関数とデータを含む単純なJSONオブジェクトです。これらは常にシングルトンなので、データをある場所のサービスに格納している場合は、同じサービスを要求するだけでそのデータを他の場所に取り出すことができます。別名スパゲーション解除AngularJSはあなたのためのあなたの依存関係を管理します。あなたがオブジェクトが欲しいならば、単にそれを参照してください、そして、AngularJSはあなたのためにそれを得ます。これを使い始めるまでは、これがどれほど大きな時間の恩恵であるかを説明するのは難しいです。DIのようなものはjQueryの中には存在しません。DIは、アプリケーションを作成してそれを配線する代わりに、それぞれ文字列で識別されるコンポーネントのライブラリを定義することを意味します。FlickrからJSONフィードを取得するためのメソッドを定義する「FlickrService」というコンポーネントがあるとします。'FlickrService'を参照するだけです。AngularJSは、コンポーネントをインスタンス化し、それを私のコントローラで利用できるようにします。ここでサービスを定義します。}});そのサービスを使いたいときは、このように名前で参照します。FlickrService.getFeed()}]);AngularJSは、FlickrServiceオブジェクトがコントローラをインスタンス化するために必要であることを認識し、それを提供します。これは物事を一緒に配線することを非常に容易にし、そしてスパゲッティ化の傾向をほとんど排除します。私たちはコンポーネントのフラットリストを持っています、そしてAngularJSはそれらを必要に応じて一つずつ私たちに渡します。モジュラーサービスアーキテクチャjQueryは、コードをどのように編成する必要があるかについてはほとんど触れていません。AngularJSには意見があります。AngularJSは、コードを配置できるモジュールを提供します。Flickrと対話するスクリプトを作成している場合は、Flickr関連のすべての機能をラップするFlickrモジュールを作成することをお勧めします。モジュールには他のモジュール(DI)を含めることができます。あなたのメインアプリケーションは通常モジュールです、そしてこれはあなたのアプリケーションが依存する他のすべてのモジュールを含むべきです。Flickrをベースにした別のアプリケーションを作成したい場合は、単純なコードの再利用が可能です。Filickモジュールを追加するだけで、新しいアプリケーションのすべてのFlickr関連機能にアクセスできます。モジュールはAngularJSコンポーネントを含みます。モジュールをインクルードすると、そのモジュール内のすべてのコンポーネントが、一意の文字列で識別される単純なリストとして利用可能になります。その後、AngularJSの依存性注入メカニズムを使用して、これらのコンポーネントを互いに注入できます。総括するAngularJSとjQueryは敵ではありません。AngularJS内でjQueryを非常にうまく使用することは可能です。scope、ディレクティブなど)、必要な場合よりもlot少ないjQueryが必要です。実現するための主なことはあなたのテンプレートがあなたのアプリケーションを動かすということです。すべてを実行する大きなプラグインを書くのをやめなさい。その代わりに、1つのことを行う小さなディレクティブを書いてから、それらを結び付けるための簡単なテンプレートを書いてください。控えめなJavaScriptについては考えずに、代わりにHTML拡張子に関して考えてください。http://nicholasjohnson.com/angular-book/。お役に立てば幸いです。superluminary必要なパラダイムシフトについて教えてください。使うと、DOMに何が必要かを段階的に指示できます。AngularJSで、どんな結果が欲しいかを説明しますが、それを行う方法は説明しません。Rajcokの答えを調べてください。それは関心事の分離に大きく焦点を当てています。最大の違いは何ですか?私は何をやるのをやめるべきではありません。データバインディングなど、たくさんのクールなものを組み合わせた、非常にテストしやすい美しいクライアントサイドフレームワークです。エンドツーエンドのテスト)に焦点を当てています。あなたは数時間でステップを通過することができます。あなたが舞台裏の概念を習得したい場合は、それらはさらに読むための無数の参照を含みます。サーバー側の考慮事項/制限はありますか?純粋なjQueryを既に使用している既存のアプリケーションでそれを使用することができます。アプローチを使用してサーバー側をコーディングすることを検討してください。抽象化を作り出し、サーバサイドコール(get、save、deleteなど)を作ります信じられないほど簡単です。Ulises「パラダイムシフト」を説明するには、簡単な答えで十分です。使用して要素を検索し、それらを関連付けます。使用して要素に直接マークを付け、それらを関連付けます。jqLit​​eはセレクタをサポートしていない。人々が「jQueryをまったく含まない」と言うとき、それは主に彼らがあなたにセレクタを使わせたくないからです。彼らはあなたが代わりにディレクティブを使うことを学ぶことを望みます。RippeyjQueryjQueryはgetElementByHerpDerpのような途方もなく長いJavaScriptコマンドとクロスブラウザを作ります。AngularJSAngularJSを使用すると、動的Webアプリケーションでうまく機能することを行う独自のHTMLタグ/属性を作成できます(HTMLは静的ページ用に設計されているため)。編集する「私はjQueryのバックグラウンドを持っています。「HTMLの背景があります。JavaScriptでどう思いますか」と言ったようなものです。質問をしているという事実は、これら2つのリソースの基本的な目的を理解していない可能性が最も高いことを示しています。「AngularJSはディレクティブを利用するのに対し、jQueryはCSSセレクタを使用してこれを実現するjQueryオブジェクトを作成する」などのリストではなく、基本的な違いを指摘するだけで質問に答えることにしました。この質問は長い答えを必要としません。jQueryはブラウザでJavaScriptをプログラミングするのをより簡単にする方法です。短い、クロスブラウザコマンドなど.AngularJSはHTMLを拡張するので、アプリケーションを作成するためだけに<div>を配置する必要はありません。HTMLを設計したもの(静的で教育的なWebページ)ではなく、実際にHTMLをアプリケーションに使用できるようにします。JavaScriptを使用してこれをラウンドアバウト方式で実現しますが、基本的にはJavaScriptではなくHTMLの拡張です。クエリ'と何かをすることについて多くのことを考えています。AngularJS:モデルは真実であり、あなたはいつもそのANGLEから考える。