コアポイント

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

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

<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拡張機(jī)能の1つです。これにより、コレクションを反復(fù)し、各プロジェクトのテンプレートをインスタンス化できます。この例では、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ディレクティブを使用して、行のセルを反復(fù)します。ここでの二重ブレースは、AngularJS データバインディングを使用した式 - <td>の含有量が対応するセルのmarker屬性に置き換えることを示しています。

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

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

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

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

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

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

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

AngularjsのMVC機(jī)能がここで登場(chǎng)します。 JSコードを追加して、新しく作成されたアプリケーションモジュールのコントローラー関數(shù)を呼び出し、コントローラーの名前とそれを?qū)g裝する関數(shù)を渡します。

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

この場(chǎng)合、コントローラー関數(shù)はパラメーター

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

HTMLテンプレートに

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

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

<div ng-app='ngOughts'>

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

プロパティは、$scopeの範(fàn)囲內(nèi)でng-repeat変數(shù)を探します。したがって、それを定義しましょう。 BoardCtrl board私たちは今、いくらかの進(jìn)歩を遂げています。コントローラーに

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

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

の範(fàn)囲內(nèi)で利用できるようにします。

Board先に進(jìn)んで、シンプルなクラスを?qū)g裝しましょう。 BoardCtrl

Boardadd Factory

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

次に、

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

は工場(chǎng)関數(shù)內(nèi)で直接定義することができ、ウィンドウオブジェクトにBoardを配置することもできますが、ここで獨(dú)立しておくことで、Angularjsとは獨(dú)立してテストし、再利用性を促進(jìn)することができます。

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

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

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

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

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

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

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

誰(shuí)かが勝つことを知っていれば素晴らしいでしょう。実裝しましょう。ここでは、勝利基準(zhǔn)をチェックするコードを省略しますが、最終コードには存在します。勝者を見(jiàn)つけたら、勝者を構(gòu)成する各セルに勝利屬性を設(shè)定するとします。

その後、

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

<td>

が本當(dāng)なら、

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

は「勝利」CSSクラスを

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

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

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

<div ng-app='ngOughts'>

勝利を本當(dāng)に披露しましょう：

reset

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

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

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

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

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

ただし、Angularjsには制限がないわけではありません。多くの人は、公式の文書(shū)と比較的急な學(xué)習(xí)曲線、SEOについて心配する人もいれば、標(biāo)準(zhǔn)以外のHTML屬性と要素を使用することを嫌う人もいます。

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

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

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

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

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

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

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

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

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

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

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

AngularJS指令で転寫(xiě)を使用する方法は？

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

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

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

AngularJS指令のリンク関數(shù)は何ですか？

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

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

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

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

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

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

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

以上がAngularjsの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。