.NET 開発者へのAngularデータ バインディングの簡略化

.NET 開発者へのAngularデータ バインディングの簡略化

データ バインディングAngular処理には時間がかかり、場合によっては複雑すぎる場合もあります。このブログ記事では、プロセスを効果的に簡素化する方法をご紹介します。

6min read

私の仕事では、Angular.多くの場合、彼らが .NET のスキルを持ち寄り、それを の学習にマッピングするために取り組んでいるのを見てきましたAngular.学習する努力と意欲はありますがAngular.NET はそうではありません。

Angularは純粋な JavaScript ライブラリであるため、この投稿シリーズでは、Angularの基本的でありながら重要な概念を .NET 開発者に簡略化します。

この記事では、Angularのデータバインディングについて学習します。さいわい、Angularのデータ バインディングは .NET よりもはるかに簡単です。

まず、.NET のデータ バインディング手法の一部を修正してみましょう。たとえば、ASP.NET MVCでは、モデルを使用してデータ バインディングを行います。ビューがバインドされている

  1. オブジェクトへ
  2. 複素数オブジェクトへ
  3. オブジェクトのコレクションへ

基本的に、ASP.NET MVCでは、モデルクラスへのデータバインディングを行います。一方、WPF では、データ バインディング モードを使用できます。XAML でデータ バインディングのモードは、次のように設定できます。

  1. One-way data binding
  2. Two-way data binding
  3. 1 回限りのデータ バインディング
  4. One-way to source data binding

MVVM パターンに従っている場合は、INotifyPropertyChanged インターフェイスを使用して双方向のデータ バインディングを実現している可能性があります。したがって、.NET の世界では、データ バインディングを実現する方法はたくさんあります。

ただし、Angularのデータ バインディングははるかに簡単です。

あなたがAngularに非常に新しい場合は、コンポーネントを紹介させてください。Angularアプリケーションでは、ブラウザ(または他の場所)に表示されるのはコンポーネントです。コンポーネントは、次のパーツで構成されています。

  1. A TypeScript class called Component class
  2. コンポーネントの Template という HTML ファイル
  3. コンポーネントのスタイルを設定するためのオプションの CSS ファイル
コンポーネントは、次のパーツで構成されています

Angularでは、データバインディングによって、コンポーネントクラスとコンポーネントテンプレート間のデータの流れが決定されます。

Angularには、3 種類のデータ バインディングが用意されています。それらは次のとおりです。

  1. 補完（Interpolation）
  2. プロパティバインディング（Property binding）
  3. イベント バインディング（Event binding）
Angularには、3 種類のデータ バインディングが用意されています。それらは次のとおりです

1つずつ見ていきましょう。

補完（Interpolation）

Angular補間は一方向のデータ バインディングです。これは、コンポーネントクラスからテンプレートにデータを渡すために使用されます。補間の構文は{{propertyname}}です。

以下に示すようなコンポーネントクラスがあるとしましょう。

export class AppComponent {
 
      product = {
          title: 'Cricket Bat',
          price: 500
      };
 
  }

コンポーネントクラスからテンプレートに製品を渡す必要があります。例をシンプルにするために、製品オブジェクトの値をハードコーディングしていますが、実際のシナリオでは、APIを使用してデータベースからデータをフェッチできることに注意してください。 以下のリストに示すように、補間を使用して製品オブジェクトの値を表示できます。

<h1>Product</h1>
<h2>Title : {{product.title}}</h2>
<h2>Price : {{product.price}}</h2>

補間を使用して、データはコンポーネント クラスからテンプレートに渡されます。理想的には、製品オブジェクトの値が変更されるたびに、テンプレートは製品オブジェクトの更新された値で更新されます。

Angularには、コンポーネント クラスとテンプレートのプロパティの値が相互に同期していることを確認するChangeDetector Service と呼ばれるものがあります。

したがって、Angularでデータを表示する場合は、補間データ バインディングを使用する必要があります。

プロパティバインディング（Property binding）

Angularでは、"プロパティ バインディング" と呼ばれる 2 番目の種類のバインディングが提供されます。プロパティ バインディングの構文は、角かっこ [] です。これにより、テンプレート上のHTML要素のプロパティをコンポーネントクラスのプロパティで設定できます。 

したがって、次のようなコンポーネントクラスがあるとしましょう。

export class AppComponent {
   btnHeight = 100;
   btnWidth = 100;
}

これで、プロパティバインディングを使用して、テンプレート上のボタンの高さと幅のプロパティをコンポーネントクラスのプロパティで設定できます。

<button 
  [style.height.px] = 'btnHeight'
  [style.width.px] = 'btnWidth' >
        Add Product
</button >

Angularプロパティバインディングは、HTML 要素のプロパティをコンポーネントクラスのプロパティに設定するために使用されます。画像、リスト、テーブルなどの他のHTML要素のプロパティを設定することもできます。 コンポーネント クラスのプロパティの値が変更されるたびに、プロパティ バインディングの HTML 要素プロパティが更新されます。

イベント バインディング（Event binding）

Angularは、コンポーネント クラスのテンプレートで発生したイベントをキャプチャするための 3 番目の種類のバインディングを提供します。たとえば、コンポーネントテンプレートにボタンがあり、ボタンをクリックすると、コンポーネントクラスの関数を呼び出すことができます。これを行うには、イベント バインドを使用します。イベント バインディングの背後にある構文は(eventname) です。

この例では、次のようなコンポーネント クラスがあるとします。

export class AppComponent {
     addProduct() {
         console.log('add product');
     }
 }

テンプレートのボタンをクリックしたときに addProduct 関数を呼び出す必要があります。これを行うには、イベント バインディングを使用します。

<h1>Product</h1>
<button (click)='addProduct()'>
    Add Product
</button>

Angular ngZoneの一部であるHTML要素のすべてのイベントでイベントバインディングを行うことができます。詳細については、こちらをご覧ください。

Angularは、これら 3 つのバインディングを提供します。イベント バインディングでは、データはテンプレートからクラスに流れ、プロパティ バインディングと補間では、データはクラスからテンプレートに流れます。

プロパティのバインドと補間では、データはクラスからテンプレートに流れます

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

Angularには双方向のデータ バインディングは組み込まれていませんが、プロパティ バインディングとイベント バインディングを組み合わせることで、双方向のデータ バインディングを実現できます。

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

Angular、双方向のデータバインディングを実現するためのディレクティブngModelを提供し、非常に使いやすいです。まず、FormsModule をインポートし、次に双方向のデータ バインディングを作成できます。

export class AppComponent {
     name = 'foo';
 }

name プロパティを入力ボックスに双方向のデータバインドできます。

<input type="text" [(ngModel)]='name' />

<h2>{{name}}</h2>

ご覧のとおり、[(ngModel)]を使用して、入力コントロールと名前プロパティの間に双方向のデータバインディングを作成しています。ユーザーが入力ボックスの値を変更するたびに、name プロパティが更新され、その逆も同様です。

.NET 開発者として、Angularでのデータ バインディングははるかに簡単で、知っておく必要があるのは 4 つの構文だけであることに気付いたかもしれません。この投稿がお役に立てば幸いですし、今後の投稿では、Angularの他のトピックを取り上げます。

 この投稿が気に入ったら、共有してください。また、Infragistics Ignite UI for Angular Componentsをまだチェックしていない方は、ぜひチェックしてみてください。彼らはあなたがより速くWebアプリケーションをコーディングするのを助けるために30 +材料ベースのAngularコンポーネントを持っています。

Angular
デモを予約