Angularjs

コアポイント

Googleが開発したJavaScriptフレームワークであるAngularJSは、Documentオブジェクトモデル（DOM）を直接操作することなく、開発者がフロントエンドコードを作成できるようにします。これは、指示とデータバインディングを使用して動的ビューとコントローラーを定義することで実現できます。
AngularJSはMVC（Model-View-Controller）構造を使用します。このモデルは、手順を介してHTMLに接続されているAngularモジュールとコントローラーによって定義されます。これにより、モデルの変更が自動的にビューを更新し、その逆も同様です。
• Angularjsでは、ディレクティブがHTMLの語彙を拡張し、より動的で強力なテンプレートを提供します。例には、セットを反復するためのng-repeat、イベント処理のためのngクリック、条件付きレンダリングのng-showが含まれます。
• Angularjsは、学習曲線と非標準のHTML属性の使用に対する批判を受けていますが、より構成可能でテスト可能なアプリケーションの作成を促進するWeb開発へのユニークなアプローチを提供します。設計上の懸念をMVCで分離すると、コンポーネントを接続するのに必要なコードの量が減ります。
Angularjsは、高度な哲学を備えた最も人気のあるJavaScriptフレームワークの1つになりました。 Googleのサポートと開発により、Angularjsのフロントエンドへのアプローチは最初は少し奇妙に見えるかもしれませんが、なぜ以前に他のアプローチを使用した理由をすぐに疑問に思います。 AngularJSにより、開発者はDOMを直接操作することなくフロントエンドコードを作成できます。このチュートリアルでは、ディレクティブとデータバインディングを使用して動的ビューとコントローラーを定義するアプリケーションを構築することにより、プロセスをガイドします。 Coffeescript（Angularjsでは必須ではない）に精通している場合、この記事にもっと興味がありますが、JavaScriptの基本をマスターするだけで十分です。あなたは以前にたくさんのTo Doアプリを見たことがあるかもしれませんので、何か面白いものを作りましょう - Tic Toe！マーキングボードから始めます。 Angularjsは、JavaScriptの後ろにDOMを隠すのではなく、HTMLの語彙を拡張すると主張しています。アイデアは、HTML自体がかなり優れているということですが、いくつかの要素と属性を追加して、すでによく知っている強力で動的なテンプレート言語を構築できます。私たちのボードは単なるテーブルです。私たちが良い欲求を持ってプログラムする場合、私たちは本当にボードを反復し、各セルに1つのセルを出力する必要があります。実際のコードは私たちのアイデアに非常に近いです：

待って、それらの奇妙なng要素とひげ括弧は何ですか？一歩下がって、一歩一歩進んでみましょう。

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

<tr ng-repeat="row in board.grid">

angularjsコマンド

は、Angularjsの

>指令ng-repeatであり、提供されるHTML拡張機能の1つです。これにより、コレクションを反復し、各プロジェクトのテンプレートをインスタンス化できます。この例では、Angularjsにオブジェクトのプロパティで各行を繰り返すように指示します。 boardが2次元配列であり、gridがウィンドウ上のオブジェクトであると仮定します。 <tr>

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

次に、別のng-repeatディレクティブを使用して、行のセルを反復します。ここでの二重ブレースは、AngularJS データバインディングを使用した式 - <td>の含有量が対応するセルのmarker属性に置き換えることを示しています。

これまでのところ、とても簡単ですよね？生成されたタグがどのように見えるかをすぐに理解できます。 jQueryなどのヘビー級ツールを使用して新しい要素を作成して記入する必要はありません。テンプレートを明確にする必要があります。これはメンテナンスが容易です。HTMLを見て、実際に書くことを覚えていない曖昧なJavaScriptコードを追跡せずにDOMがどのように変化するかを正確に知ることができます。

ボードの状態を視覚化できるようになりました。boardの実際のコンテンツを定義することにより、データソースを提供します。

<tr ng-repeat="row in board.grid">

最初にJavaScriptコードを追加して、アプリケーションのAngularJSモジュールを定義します。最初のパラメーターはアプリケーションの名前であり、['ng']コアAngularJSサービスを提供するAngularJSの「NG」モジュールが必要です。

htmlを調整して、ng-appディレクティブを使用すると、アプリケーションモジュールを使用するように指示します。

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

MVC-コントローラーとビューを定義します

AngularjsのMVC機能がここで登場します。 JSコードを追加して、新しく作成されたアプリケーションモジュールのコントローラー関数を呼び出し、コントローラーの名前とそれを実装する関数を渡します。

app = angular.module('ngOughts', ['ng'])

この場合、コントローラー関数はパラメーター

を受け入れます。これは、コントローラーの$scope依存関係です。 AngularJSは、依存関係噴射を使用して、このサービスオブジェクトを提供し、関数パラメーターの名前から正しいオブジェクトを推測します（削除を可能にする代替構文もあります）。

HTMLテンプレートに

ディレクティブを追加して、コントローラーに接続します。 ng-controller

同じ、コントローラー名を持つプロパティと同じように単純です。ここで興味深いことが起こります - 私たちのボディタグの内側にネストされた要素は、

<div ng-app='ngOughts'>

サービスオブジェクトにアクセスできるようになりました。その後、私たちの

プロパティは、$scopeの範囲内でng-repeat変数を探します。したがって、それを定義しましょう。 BoardCtrl board私たちは今、いくらかの進歩を遂げています。コントローラーに

を注入し、インスタンス化して、

app.controller "BoardCtrl", ($scope) ->

の範囲内で利用できるようにします。

Board先に進んで、シンプルなクラスを実装しましょう。 BoardCtrl

Boardadd Factory

  
    <tr ng-repeat="row in board.grid">
      ...
    

次に、

Factory を定義できます。これは、クラスのみを返し、コントローラーに注入することができます。

は工場関数内で直接定義することができ、ウィンドウオブジェクトにBoardを配置することもできますが、ここで独立しておくことで、Angularjsとは独立してテストし、再利用性を促進することができます。

だから今、私たちは空のチェスボードを持っています。エキサイティングなものですよね？セルをクリックするとマークが付けられるように設定しましょう。

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

各<td>要素にng-clickディレクティブを追加しました。テーブルセルをクリックすると、クリックされたセルオブジェクトを使用してboard関数を呼び出します。 FillplayCell実装：Board

<tr ng-repeat="row in board.grid">

双方向のデータバインディング

さて、ボードモデルを更新したので、ビューを更新する必要がありますよね？

いいえ！ AngularJSデータバインディングはです。モデルの変化を観察し、ビューに伝播します。同様に、ビューを更新すると、対応するモデルが更新されます。タグは内部グリッドで更新され、これを反映するためにのコンテンツがすぐに変更されます。 Board <td>これにより、以前に記述しなければならなかった脆弱なセレクター依存のボイラープレートコードがたくさん排除されます。パイプラインではなく、アプリケーションロジックと動作に焦点を当てることができます。

誰かが勝つことを知っていれば素晴らしいでしょう。実装しましょう。ここでは、勝利基準をチェックするコードを省略しますが、最終コードには存在します。勝者を見つけたら、勝者を構成する各セルに勝利属性を設定するとします。

その後、

を次のようなものに変更できます。

<td>

が本当なら、

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

は「勝利」CSSクラスを

app = angular.module('ngOughts', ['ng'])

に適用します、私たちの勝利を祝うために楽しい緑の背景を設定しましょう。あなたは別のゲームを持っていると言いましたか？リセットボードボタンが必要です：

winning ng-classコントローラーに追加すると、ボタンがクリックされたら<td>に電話します。ボードマーカーがクリアされ、すべてのCSSクラスがクリアされ、再び開始する準備ができています - DOM要素を更新する必要はありません。

<div ng-app='ngOughts'>

勝利を本当に披露しましょう：

reset

コマンドを使用すると、ゲームが勝ったときに

要素を条件付きで表示できます。データバインディングにより、勝者のタグを挿入できます。シンプルで表現力豊かです。

app.controller "BoardCtrl", ($scope) ->

ng-show組み合わせやすく、テストしやすくするために追加してください<h1></h1>

私たちのコードのほとんどがプレーン古いJavaScriptコードを扱っていることは注目に値します。これは意図的なものです - フレームワークオブジェクトを拡張するのではなく、JSコードを書き込んで呼び出すだけです。このアプローチは、組み合わせやすく、テストしやすいアプリケーションを作成するのに役立ちます。私たちの設計上の懸念はMVCによって分離されていますが、それらを接続するために多くのコードを書く必要はありません。

ただし、Angularjsには制限がないわけではありません。多くの人は、公式の文書と比較的急な学習曲線、SEOについて心配する人もいれば、標準以外のHTML属性と要素を使用することを嫌う人もいます。

しかし、これらの問題には解決策があり、AngularjsのWeb開発に対するユニークなアプローチは、間違いなく探求する価値があります。

plunkrに対する最終コードの実際の効果を表示するか、Githubからダウンロードできます。

この記事のコメントは閉じられています。 Angularjsについて質問がありますか？フォーラムで質問してみませんか？

AngularJSの指示とデータバインディングに関するFAQ

AngularJS指令とコンポーネントの違いは何ですか？

AngularJSディレクティブとコンポーネントは、AngularJSフレームワークの強力な機能です。ディレクティブを使用すると、再利用可能なカスタムHTML要素とプロパティを作成できますが、コンポーネントはよりシンプルな構成を使用する特別なディレクティブです。コンポーネントは、コンポーネントベースのアプリケーション構造の構築に適しています。コンポーネントベースのアプリケーション構造は、今日のフロントエンド開発でより近代的で広く使用されています。ただし、命令はより柔軟であり、DOMを直接動作させることができますが、コンポーネントはできません。

AngularJSのデータバインディングは、モデルコンポーネントとビューコンポーネント間のデータの自動同期です。 AngularJSは、モデルをアプリケーションの単一の事実源として扱うことができるように、データバインディングを実装します。ビューは常にモデルの投影です。モデルが変更されると、ビューは変更を反映し、その逆も同様です。

一元配置データバインディングと双方向データバインディングの違いを説明できますか？

一元配置データバインディングは、モデルからビュー、またはモデルへのビューからのデータの単純なフローです。これは、モデルの状態が変更された場合、ビューが更新されないことを意味します。一方、双方向のデータバインディングとは、モデル状態が変更された場合、ビューが更新される場合（ユーザーの相互作用など）、モデル状態が更新されることを意味します。これにより、リアルタイム効果が可能になります。つまり、変更（ユーザー入力など）がモデル状態に直ちに反映されます。

関数を使用する必要があります。指令に名前を付けてから、すべてのディレクティブオプションを保存する工場関数を作成できます。工場関数は、依存関係（ある場合）を使用して注入され、指示オプションを定義するオブジェクトを返します。

AngularJSディレクティブの分離範囲により、指令の新しい範囲を作成できます。これは、指令範囲の変更が親の範囲に影響しないことを意味し、その逆も同様です。これは、再利用可能なモジュラーコンポーネントを作成する場合に非常に便利です。

AngularJS指令で転写を使用する方法は？

.directive転写は、AngularJSの機能であり、カスタムコンテンツを命令に挿入できるようにします。ディレクティブ定義オブジェクトで

オプションをに設定することにより、

ディレクティブを使用して、ディレクティブテンプレートにカスタムコンテンツを挿入できます。

AngularJS指令のリンク関数は何ですか？

リンク関数は、AngularJSディレクティブに使用され、DOMを操作したり、イベントリスナーを追加したりします。テンプレートをクローニングした後に実行されます。この関数は通常、DOMイベントハンドラーの設定、モデルプロパティの変更の監視、DOMの更新などのタスクを実行するために使用されます。

angularjsディレクティブでコントローラー関数を使用する方法は？

コントローラー関数は、AngularJSスコープを強化するために使用されるJavaScriptコンストラクターです。コントローラーがng-controllerディレクティブを介してDOMに接続されている場合、AngularJSは指定されたコントローラーのコンストラクターを使用して新しいコントローラーオブジェクトをインスタンス化します。新しいサブスコープが作成され、コンストラクターとして注入可能なパラメーターとしてコントローラーに提供されます$scope。

ディレクティブスコープオプションの「 "@"、 "="、および "＆"の違いは何ですか？

これらのシンボルは、データを命令範囲にバインドするために使用されます。 「@」は文字列結合に使用され、 "="は双方向モデルの結合に使用され、「＆」はメソッドバインディングに使用されます。それらはあなたがスコープを分離することを可能にし、あなたの指示をよりモジュール化し、再利用可能にします。

AngularJS指令をテストする方法は？

angularjsは、ngMockと呼ばれるモジュールを提供し、ユニットテストでAngularJSサービスを注入して模倣することができます。それを使用して指示をテストできます。また、ジャスミンやモカなどの他のテストフレームワークを使用して、テストを書き込んで実行することもできます。 ngMock

以上がAngularjsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。