Angular は (
React および
Vue.js とともに)、高速で高性能の最新式 Web アプリケーションを開発するためのソリューションを構成するフロントエンドフレームワークです。
そのため、GeneXus Angular ジェネレーターはフロントエンドジェネレーターです。生成されたオブジェクトはブラウザーで実行され、サーバー上でバックエンドと通信して情報を取得および送信します。
バックエンドは Angular ジェネレーターで生成されるのではなく、
Java ジェネレーターや
.NET ジェネレーターなど、既存の GeneXus ジェネレーターで生成されます。
GeneXus Angular ジェネレーターでは、オープンソースの Web アプリケーションフレームワーク
Angular を使用して、最新式の Web アプリケーションをビルドできます。
このソリューションは一般的な 3 層構造になっています。サーバー側 (バックエンド) では、サービス、ビジネスロジック、データベースへの接続が実行されます。クライアント側 (フロントエンド) には、UI の表示と、セッション状態の保持、サーバー側への接続に必要なコンポーネントがすべてあります。
フロントエンドは Angular (Node.js) を使用して生成し、バックエンドは Java および .NET ジェネレーターで生成できます。
フロントエンドには次の役割があります:
情報の表示
ローカルでの状態の保持
ビジネスロジックの検証
サーバーとの通信とデータ交換
Angular ジェネレーターによって生成されるコードは HTML と
TypeScript です。詳細については、「
GeneXus Angular ジェネレーターの概要」を参照してください。
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 ジェネレーターとは別のプロジェクトで実装されます。
生成されたアプリケーションのアーキテクチャを理解するには、次の包括的なガイドを参照してください。
Professional Frontends with Angular Generator