Angular コンポーネントでモダンな Web エクスペリエンスをより速く構築

Material は、Web、Android、iOS、または Flutter をターゲットとするアプリ向けに設計された、Google によって作成されたオープンソース デザイン システムです。開発者は、設計システムをバックアップするコンポーネントに基づいて、アプリのユーザー インターフェイスを構築する出発点を得ることができます。Infragistics Ignite UI for Angular は、マテリアル デザイン システム上に構築されています。Angular Material には、以下のガイド、仕様、例が含まれています。

• レイアウト
• ナビゲーション
• 色
• タイポグラフィ
• 音
• 図像学
• 形
• モーション
• 交流

優れたデザイン システムと同様に、Angularマテリアルは適応性を備えています。これは、ユーザー インターフェイス設計のベスト プラクティスをサポートするガイドライン、コンポーネント、ツールのシステムです。

AngularディレクティブのサブセットであるAngularコンポーネントは、Angularアプリを構成するユーザー インターフェイス (UI) の基本的な構成要素です。Angularアプリでは、Angularコンポーネントの階層ツリーがユーザー インターフェイスを記述し、ユーザーがブラウザーで表示および操作するアプリケーションのあらゆる側面をカプセル化します。Angularコンポーネントには、テンプレート、スタイル、アニメーション、変更検出、プロバイダー、挿入可能なビューなどが含まれます。

Angularコンポーネントを作成すると、次の 3 つのファイルが存在します。

1. コンポーネント クラスと呼ばれる TypeScript クラス
2. コンポーネントのテンプレートと呼ばれる HTML ファイル
3. コンポーネントのスタイルを設定するためのオプションの CSS ファイル

Angularアプリがブラウザーに読み込まれると、Angularの「ビュー」が表示されます。その「ビュー」は 1 つ以上のAngularコンポーネント (通常は複数) で構成されます。Angularアプリケーションでは、ユーザーがページを移動したり、ビュー内のさまざまなコンポーネントを操作したりすると、Angularフレームワークがコンポーネントの作成、更新、または破棄を処理します。コンポーネント自体はアプリケーションのライフサイクルで発生するイベントに応答できるため、開発者はコンポーネントのライフサイクルのイベントに応答するコードを作成できます。

Angularコンポーネントの詳細については、https://angular.io/api/core/Component をご覧ください。

Angular CLI コマンドを使用して、次のコマンドを使用してコンポーネントを生成できます。

ng generate component Product

このコマンドは、以下に示すように ProductComponent を生成します。

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { constructor() { } ngOnInit() { }

コンポーネントは、@Component デコレーターで装飾されたクラスです。

コンポーネントを作成するには 4 つの手順があります。

1. クラスを作成してエクスポートします。このクラスにはデータとロジックが含まれます。
2. クラスを @component メタデータで装飾します。メタデータはコンポーネントを説明し、さまざまなプロパティの値を設定します。
3. コンポーネントを作成するために必要なライブラリとモジュールをインポートします。
4. コンポーネントのテンプレートを作成し、必要に応じてコンポーネントのスタイルを作成します。

ご覧のとおり、生成された ProductComponent は次のもので構成されます。

• データとロジックを保持するクラス。
• アプリ内でデータを表示するための HTML テンプレートとスタイル。これはビューとも呼ばれ、ユーザーが画面上に表示して対話します。
• コンポーネントの動作を定義するメタデータ。

コンポーネントのメタデータは、@Component デコレーターを使用してクラスに適用されます。コンポーネントのさまざまな動作は、 @Component デコレーターの入力パラメーターであるオブジェクトのプロパティとして渡すことができます。

Angularのコマンド ライン インターフェイスは、コマンド ウィンドウ (Mac のターミナル、Windows のコマンド プロンプト/PowerShell、または Visual Studio Code のターミナル ウィンドウ) から起動されるツールです。

Angular CLI をインストールするには、https://nodejs.org/en/download/ から NodeJS がインストールされていることを確認してください。インストールしたら、コマンド ウィンドウを開いて次のように入力します。

npm install -g @angular/cli

​Angular CLI (コマンド ライン インターフェイス)を使用すると、アプリケーションのすべてまたは一部を生成するさまざまなコマンドからAngular Schematics を使用したテンプレートを使用できます。 Google チームのAngular CLI は、Angularアプリケーションの構造と依存関係を生成する最速の方法です。スケマティックは、コード生成プロセスからコードを追加または変更するための命令とロジックを含む、テンプレート ベースのコード ジェネレーターです。

​Infragistics のIgnite UI CLI は、Angular CLI よりも一歩進んでいます。Ignite UI CLI は引き続きAngular Schematics を使用したテンプレートに基づいていますが、チャート、データ グリッド、さらにはアプリケーション シナリオ全体などのユーザー インターフェイス コンポーネントを新規または既存のAngularアプリケーションに追加できます。チームやビジネスのニーズに基づいて独自のカスタム テンプレートを作成し、アプリ開発を加速し、数秒でコードを生成することもできます。

Angular CLI とIgnite UI CLI を使用して段階的な手順を開始するには、ここをクリックしてください: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Angular ディレクティブは DOM 要素を作成し、Angular アプリケーションでのその構造や動作を変更します。Angular には 3 種類のディレクティブがあります。

1. コンポーネント:テンプレートを含むディレクティブ。
2. 属性ディレクティブ:要素、コンポーネント、またはその他のディレクティブの外観と動作を変更します。
3. 構造ディレクティブ:要素を追加または削除して DOM レイアウトを変更します。

AngularコンポーネントとAngularディレクティブの基本的な違いは、コンポーネントにはテンプレートがあるのに対し、属性または構造ディレクティブにはテンプレートがないことです。Angularは、多くの組み込みの構造ディレクティブと属性ディレクティブを提供します。

• 組み込みの構造ディレクティブは *ngFor と *ngIf です。
• 属性ディレクティブは NgStyle と NgModel です。

Angularアプリケーションのアーキテクチャには、Angularアプリをブラウザに配信するために連携する多くの部分があります。ここでは、関係するアーキテクチャとAngularアプリケーションの構成要素の概要を簡単に説明します。

• NgModules:アプリケーション ドメイン、ワークフロー、または関連する機能セット専用のコンポーネント セットのコンパイル コンテキストを宣言します。
• コンポーネント:アプリケーション データとロジックを含むクラスを定義し、ビューを定義する HTML テンプレートと連携します。
• テンプレート: HTML を、表示前に HTML 要素を変更できるAngularマークアップと組み合わせます。
• ディレクティブ: DOM 内の要素にカスタム動作を付加します。
• 双方向データ バインディング:テンプレートの部分とコンポーネントの部分を調整します。
• サービス:通常、限定的かつ明確に定義された目的でモジュール性と再利用性を高めるために使用されるクラス。
• 依存関係の注入:コンポーネントに必要なサービスを提供し、サービス クラスへのアクセスを許可します。
• ルーティング:さまざまなアプリケーション状態間のナビゲーション パスを定義すると、アプリケーション階層を表示できるようになります。

Ignite UI for Angular is a complete set of Material-based UI widgets, Angular components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWA’s) targeting Google's Angular framework.

Ignite UI for Angular 100 以上のデータ チャート、グリッド、コンポーネントを含む、データ豊富で応答性の高い Web アプリをAngularで構築するためのユーザー インターフェイス (UI) コンポーネントの完全なライブラリです。

Infragistics は、Angular UI コンポーネント ライブラリの継続的なテストと改善を実施し、マイナー アップデートを毎月リリースし、年に 2 回の大きなリリースで新しいAngularコンポーネント、製品機能、機能強化を導入します。世界中の何千もの企業で使用されている機能豊富なAngularコンポーネント ライブラリにより、開発者はエンタープライズ レベルの品質のAngularアプリをこれまでより迅速に構築できます。

Angular コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、価格ページを参照してください。

最も早く簡単に始める方法は、Ignite UI for Angularドキュメント ページにアクセスし、包括的な入門資料に従うことです。ヘルプ ドキュメントでは、開発者がAngular Schematics とIgnite UI CLI を使用していくつかの手順でAngularアプリケーションを迅速にブートストラップできるように、段階的な説明が提供されています。デモ、コード スニペット、その他の便利なアプリ開発リソースが追加されました。

はい、Ignite UI for AngularコンポーネントまたはAngularコントロールを使用するアプリケーションを無制限のクライアントにデプロイできます。柔軟なプランにより、開発者ごとにのみライセンスを付与し、ランタイム料金、ロイヤルティ料金、導入料金は一切請求しません。

Infragistics のチームは、Angularコード サンプルの包括的なライブラリを管理しています。ここからアクセスして、Angular Grid のようなシンプルな新しいAngularプロジェクトがどのように見えるかを確認できます。また、チーム コラボレーション アプリ、電子商取引、旅行などを含むサンプル アプリケーションのライブラリもあります。ここでAngularサンプル アプリを探索できます。