AngularJSの双方向データ結合の理解

AngularJSの詳細な説明と適用双方向データバインディング：動的な名刺ジェネレーター

コアポイント

• AngularJSの双方向データ結合により、変更はビューを更新し、その逆を可能にします。これは、AngularJSビルトインディレクティブをng-modelやng-bindなどによって達成されます。
AngularJSの
• オブジェクトは、コントローラーとビューの間の橋渡しとして機能し、モデルデータと機能を保存する双方向データ結合において重要な役割を果たします。 $scope
AngularJSは、イベントと属性の結合および消化期間メカニズムを組み合わせて、双方向データバインディングを実装して、データが変更されたときにビューを監視および更新します。
双方向のデータ結合は、ビューとモデルを自動的に同期することにより開発を簡素化できますが、不適切に使用すると、各バインディングのモニターの追加により、パフォーマンスにマイナスの影響を与える可能性があります。
このチュートリアルでは、動的な名刺ジェネレーターを構築することにより、AngularJSで双方向データ結合がどのように機能するかを示します。このジェネレーターを使用すると、名前、キャリア、電子メール、会社のロゴ、ホームページやソーシャルメディアのWebサイトへのリンクでパーソナライズできる独自の仮想名刺を作成できます。 HTML5の色入力を使用してカードの背景とテキストの色を調整し、リアルタイムで行われた変更を表示できます。最終的な効果は次のとおりです

start

Bowerを使用してプロジェクトの依存関係を管理します。 Bowerは、NPMを使用してインストールできるWebパッケージマネージャーです（つまり、node.jsをインストールする必要があります）。 node.js（またはnpm）のインストールが必要な場合は、このトピックに関する最近のSitePointの記事をご覧ください。 Bowerのインストールが必要な場合は、そのホームページに指示を表示できます。このプロジェクトの依存関係は、ブートストラップフレームワーク（スタイルとアコーディオンコンポーネント用）、Font Awesome（アイコン用）、およびjQuery（Bootstrapがそれに依存します）およびAngularjsです。 Bowerがインストールされて構成されていると仮定して、新しいディレクトリを作成し、そのディレクトリに移動し、Bowerでプロジェクトを初期化します。

Bowerは、プロジェクトのルートディレクトリに

ファイルを作成します。また、プロジェクト名、著者名、説明など、いくつかの質問をします。名前（Angularカードジェネレーターの場合）という名前の下に「ACG」を入力し、必要に応じて残りを入力します（またはデフォルト値を受け入れます）。生成されたjsonファイルは次のようになります：

mkdir ACG && cd ACG
bower init

次に、端末で次のコマンドを実行します：bower.json

これにより、プロジェクトに必要なすべての依存関係が

{
  "name": "ACG",
  "version": "0.0.0",
  "authors": [
    "Tanay Pant <tanay1337>"
  ],
  "description": "Card Generator",
  "keywords": [
    "AngularJS"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

>>

ファイルに依存関係を保存します。このフォルダーをgithubリポジトリにアップロードしたくないため、

を追加する方が良いです。プロジェクトの依存関係のルートで

bower install bootstrap --save
bower install font-awesome --save
bower install angular --save

を実行することで同じものをインストールできるためです。

AngularJSアプリケーションの構造bower_componentsbower.json<

ACGフォルダーで、index.htmlという名前のファイルとstyle.cssという名前の別のファイルを作成します。次のコードをindex.html：

に追加します

mkdir ACG && cd ACG
bower init

とng-app="myApp"をng-controller="BusinessCardController"タグに追加して、Webページを起動します。 Angularにページ全体をAngularJSアプリケーションにするように指示するには、ng-app指令が必要であり、ng-controllerディレクティブを使用し、関連するCSSファイル（ng-bind）およびjsファイル（の終了タグの前）を含めます。これらのファイル（を除く）はすべてstyle.cssフォルダーにあります。最後に、bower_components（アプリケーションブートにロードされたメインモジュール）と、myAppオブジェクトの初期状態（コントローラーと共有データの表示方法）を設定するBusinessCardControllerを定義します。 $scope

（スペースの制限により、アコーディオンコンポーネントと後続のコントローラーコード、スタイルコードなどの詳細なコードがここで省略されています。完全なコードはCodepenまたはGithubで見つけることができます。）完全なコードについては、元のリンクを参照してください。

概要

この名刺ジェネレーターが、AngularJSのデータバインディングの基本概念を学ぶのに役立つことを願っています。 Codepenで完全なコードデモを見つけるか、GitHubからこの記事のコードをクローンすることができます。リポジトリをフォークし、コードを試して、どんなクールなものを思いつくかを確認することをお勧めします。

（元のテキストで提供されているFAQパーツも省略されていますが、コアコンテンツはキーポイントに要約されています。）

以上がAngularJSの双方向データ結合の理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。