ここでは、
Angular ジェネレーターのさまざまなソースについて簡単に説明します。
Angular ジェネレーターはフロントエンドジェネレーターです。生成されたオブジェクトはブラウザーで実行され、サーバー上でバックエンドと通信して情報を取得および送信します。
バックエンドは Angular ジェネレーターで生成されるのではなく、
Java、
.NET、
.NET Framework ジェネレーターなど、既存の GeneXus ジェネレーターで生成されます。
GeneXus オブジェクトは個別のディレクトリーに生成され、そこにすべてのソースがまとめられます。場所は <モデルディレクトリー>\mobile\Angular\<メイン>\src\apps フォルダの下です。
次の画像は、Angular アプリケーション用に生成されたコンポーネントの概要です。
Panel オブジェクトごとに 1 つの
コンポーネント (Angular アプリケーションの基本的な構成要素) が生成されます。コンポーネントは次の 3 つのソースで構成されます:
- *.component.html: パネルのレイアウトです。UI のレイアウトを示す Angular テンプレートです。主に HTML であり、Angular が解釈するエレメントと項目属性を追加して、データモデルや指定された UI イベントとのバインディングを行います。
- * .component.ts: パネルに固有のロジックです。これは TypeScript のプログラムです。ここでイベントが生成され、UI にバインドされた状態がここで操作されます。
- * .sercvice.ts: サーバーとやり取りするレイヤーです。これは TypeScript のプログラムであり、サーバーとの通信が生成されます。パネルが使用するデータモデルを使用して構造も生成されます。
プロジェクトの出力はパッケージで、ブラウザーからダウンロードして実行できます。
ビジネスコンポーネントごとに 2 つのオブジェクトが生成されます:
- * .dt.ts : ビジネスコンポーネントのデータ構造です。
- * .service.ts : サーバーとやり取りするレイヤーです。
Theme オブジェクトと
Design System オブジェクトは
SASS として生成されます。可能な場合、クラスは CSS に変換されます。そうでない場合は、必要な機能を実装するためにコントロールが使用できる変数に変換されます。
前のオブジェクトに加えて、Angular ではその他のソースも生成されます。
- app.module : モジュールのデスクリプションです。パッケージを組み立てるために必要な仕様が含まれています。
- app.routing : ナビゲーションに関する状態の変化を管理するルーターです。基本的には、ナビゲーションのルートが与えられた場合に、表示するコンポーネントを決定します。
- app.settings: アプリケーションのアドレスとプロパティの設定 (サービスの URL、セキュリティ対応の有無など) です。
- app.component : アプリケーションのホームページです。
コントロールライブラリは、Angular ジェネレーターとは別のプロジェクトで実装されます。
生成されたアプリケーションのアーキテクチャを理解するには、次の包括的なガイドを参照してください。