コアポイント

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自體がかなり優(yōu)れているということですが、いくつかの要素と屬性を追加して、すでによく知っている強力で動的なテンプレート言語を構築できます。私たちのボードは単なるテーブルです。私たちが良い欲求を持ってプログラムする場合、私たちは本當にボードを反復し、各セルに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がどのように変化するかを正確に知ることができます。

ボードの狀態(tài)を視覚化できるようになりました。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は、モデルをアプリケーションの単一の事実源として扱うことができるように、データバインディングを実裝します。ビューは常にモデルの投影です。モデルが変更されると、ビューは変更を反映し、その逆も同様です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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