Angularの使用

ツール

AngularはJavaScriptの代わりにTypeScriptを使用しており、その結果、効率的に動作するためには特定のツールが必要になります。Angular 2+アプリケーションの開発ワークフローは次のとおりです。

アプリケーションを生成すると、ファイルが作成され、生成の最後にnpm installタスクがトリガーされます。
npm installが完了すると、package.jsonのpostInstallスクリプトが呼び出され、このステップによってwebapp:buildタスクがトリガーされます。
これで、選択されたビルドツール（MavenまたはGradle）に基づいて、すべてのファイルが生成され、targetまたはbuildフォルダ内のwwwフォルダにコンパイルされたはずです。
次に、./mvnwまたは./gradlewを実行してアプリケーションサーバーを起動すると、localhost:8080で使用可能となるはずです。これは、上記の手順でコンパイルされたクライアント側のコードも提供します。
新しいターミナルでnpm startを実行して、BrowserSyncを使ってWebpack dev-serverを起動します。これにより、TypeScriptコードのコンパイルとブラウザの自動リロードが行われます。

npm startを実行せずにクライアント側のコードに変更を加え始めた場合、変更はコンパイルされないので何も反映されません。そのため、変更後にnpm run webapp:buildを手動で実行するか、npm startを実行する必要があります。

起動時に./mvnw -Pdev,webappのようなwebappプロファイルを渡すことで、Mavenにwebapp:devタスクを強制的に実行させることもできます。

注フロントエンドが変更された場合、Gradleは自動的にdevプロファイルでwebpackコンパイルを実行します（起動時のみ、ライブリロードにはnpm startを使用してください）。

その他の使用可能なnpmコマンドは、プロジェクトのpackage.jsonファイルのscriptsセクションにあります。

ブラウザでコードを操作するには、Angular DevToolsを使用することをお勧めします。Angular DevToolsは、Angularアプリケーションのデバッグとプロファイリング機能を提供するブラウザ拡張です（注Angular DevToolsはAngular v12以降をサポートしています）。

プロジェクト構造

JHipsterのクライアントコードはsrc/main/webappにあり、Angularスタイルガイドに厳密に従っています。私たちのアプリケーション構造、ファイル名、TypeScriptの規則について質問がある場合は、まずこのガイドを読んでください。

このスタイルガイドはAngularチームによって承認されており、すべてのAngularプロジェクトが従うべきベストプラクティスを提供しています。

Angularルートの場合は、URLが明確で一貫性のあるものになるように、dash caseの命名規則に従います。エンティティを生成すると、この規則に従ってルート名、ルートURL、およびREST APIエンドポイントURLが生成され、必要に応じてエンティティ名が自動的に複数化されます。

プロジェクトの主な構成は次のとおりです。

webapp ├── app - アプリケーション │ ├── account - ユーザー・アカウント管理UI │ ├── admin - 管理UI │ ├── config - 一部のユーティリティファイル │ ├── core - 設定やインターセプターなどの共通のビルディング・ブロック │ ├── entities - 生成されたエンティティ（詳細は以下を参照） │ ├── home - ホームページ │ ├── layouts - ナビゲーションバーやエラーページなどの一般的なページレイアウト │ ├── main - メインページ │ ├── main.component.ts - メインアプリケーションクラス │ ├── login - Login page │ ├── shared - 認証や国際化などの一般的なサービス │ ├── app.module.ts - アプリケーションモジュールの設定 │ ├── app-routing.module.ts - メインアプリケーションルータ ├── content - 静的コンテンツ │ ├── css - CSSスタイルシート │ ├── images - 画像 │ ├── scss - オプションを選択すると、ここにSassスタイルシートファイルが表示されます ├── i18n - 翻訳ファイル ├── swagger-ui - Swagger UIフロントエンド ├── 404.html - 404ページ ├── favicon.ico - お気に入りアイコン ├── index.html - 索引ページ ├── robots.txt - ボットおよびWebクローラの構成

エンティティサブジェネレータを使用してFooという名前の新しいエンティティを作成すると、src/main/webappの下に次のフロントエンドファイルが生成されます。

webapp ├── app │ ├── entities │ ├── foo - FooエンティティのCRUDフロントエンド │ ├── foo.component.html - リストページのHTMLビュー │ ├── foo.component.ts - リストページのコントローラ │ ├── foo.model.ts - Fooエンティティを表すモデル │ ├── foo.module.ts - FooエンティティのAngularモジュール │ ├── foo.route.ts - Angularルータの設定 │ ├── foo.service.ts - Foo RESTリソースにアクセスするサービス │ ├── foo-delete-dialog.component.html - Fooを削除するためのHTMLビュー │ ├── foo-delete-dialog.component.ts - Fooを削除するためのコントローラ │ ├── foo-detail.component.html - Fooを表示するためのHTMLビュー │ ├── foo-detail.component.ts - コントローラまたはFooの表示 │ ├── foo-dialog.component.html - Fooを編集するためのHTMLビュー │ ├── foo-dialog.component.ts - Fooを編集するためのコントローラ │ ├── foo-popup.service.ts - 作成/更新ダイアログのポップアップを処理するサービス │ ├── index.ts - すべてをエクスポートするためのバレル ├── i18n - 翻訳ファイル │ ├── en - 英訳 │ │ ├── foo.json - Foo名、フィールド、...の英語翻訳 │ ├── fr - フランス語翻訳 │ │ ├── foo.json - Foo名、フィールド、...のフランス語翻訳

デフォルトの言語変換は、アプリケーションの生成時に選択した内容に基づいて行われることに注意してください。'en'および'fr'は、ここではデモンストレーションのためにのみ示されています。

認証

JHipsterはAngularルータを使用して、クライアントアプリケーションのさまざまな部分を整理します。

各ステートごとに、必要な権限がステートのデータにリストされています。権限リストが空の場合は、ステートに匿名でアクセスできることを意味します。

権限はサーバー側でもクラスAuthoritiesConstants.javaで定義されており、論理的にはクライアント側とサーバー側の権限は同じでなければなりません。

次の例では、'settings'ステートは、ROLE_ADMIN権限を持つ認証済みユーザーによってのみアクセスされるように設計されています。

export const settingsRoute: Route = {
    path: 'sessions',
    component: SettingsComponent,
    title: 'global.menu.account.settings',
    data: {
        authorities: ['ROLE_ADMIN'],
    },
    canActivate: [UserRouteAccessService]
};

これらの権限がルータで定義されると、jhiHasAnyAuthorityディレクティブを通して、引数のタイプに応じた2種類のバリエーションで使用できます。

単一の文字列の場合、ユーザーが必要な権限を持っている場合にのみ、ディレクティブはHTMLコンポーネントを表示します。
文字列の配列の場合、ユーザーがリストされた権限のいずれかを持っている場合、ディレクティブはHTMLコンポーネントを表示します。

たとえば、次のテキストは、ROLE_ADMIN権限を持つユーザーにのみ表示されます。

<h1 *jhiHasAnyAuthority="'ROLE_ADMIN'">Hello, admin user</h1>

たとえば、次のテキストは、ROLE_ADMINまたはROLE_USER権限のいずれかを持つユーザーにのみ表示されます。

<h1 *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_USER']">Hello, dear user</h1>

注意これらのディレクティブは、クライアント側のHTMLコンポーネントを表示または非表示にするだけであり、サーバー側でもコードを保護する必要があります！

ng-jhipsterライブラリ

ng-jhipsterライブラリはフリーでOSSであり、https://github.com/jhipster/ng-jhipsterから入手できます。

ng-jhipsterライブラリには、Angular 2+アプリケーションで使用されるユーティリティ関数と共通コンポーネントが含まれています。次のようなものがあります。

検証ディレクティブ
国際化コンポーネント
大文字化、順序付け、単語の切り詰めなどの一般的に使用されるパイプ
Base64、日付、およびページ区切り処理サービス
通知システム（下記参照）

通知システム

JHipsterは、サーバー側からクライアント側にイベントを送信するためにカスタム通知システムを使用し、生成されたアプリケーション全体で使用できるi18n対応のJhiAlertComponentおよびJhiAlertErrorComponentコンポーネントを備えています。

デフォルトでは、JHipsterはHTTP応答からエラーがキャッチされたときにエラー通知を表示します。

カスタムの通知またはアラートを表示するには、コントローラ、ディレクティブ、またはサービスにAlertServiceを挿入した後、次のメソッドを使用します。

短縮メソッドであるsuccess、info、warning、errorのデフォルトのタイムアウトは5秒で、設定は可能です。

this.alerts.push(
    this.alertService.addAlert(
        {
            type: 'danger',
            msg: 'このボタンを押すべきではありません。',
            timeout: 5000,
            toast: false,
            scoped: true
        },
        this.alerts
    )
);

Angular CLIの使用

Angular CLIは、JHipsterアプリケーションの構築とテストに使用されます。ただし、BrowserSync、ESLint（Angular CLIは現在もTSLint上にあります）の追加、JSON変換ファイルのマージ、ビルドが完了または失敗したときの通知の追加により、開発者のエクスペリエンスを向上させるために、カスタムWebpack設定ファイルを追加しました。

概要

Angular CLIは、Angularアプリケーションを開発、構築、維持するためのツールです。JHipsterはAngular CLI設定ファイルを生成し、Angular CLIワークフローはJHipsterと連携します。

この統合は、アプリケーションルートフォルダにangular.jsonファイルを生成し、その依存関係をpackage.jsonファイルに追加することによって行われます。

使用方法

ng help

ビルド

フロントエンドの構築にはng buildを使用できますが、npm start、npm run buildなどの提供されているNPMスクリプトを使用することをお勧めします。開発での使用のドキュメントおよびプロダクション環境での使用のドキュメントを確認してください。

コンポーネント、ディレクティブ、パイプ、およびサービスの生成

ng generate（またはng g）コマンドを使用して、Angularコンポーネントを生成できます。

ng generate component my-new-component
ng g component my-new-component # 別名の使用

# コンポーネントは相対パスの生成をサポート
# src/app/feature/に移動して実行
ng g component new-cmp
# コンポーネントはsrc/app/feature/new-cmpに生成されます
# ただし以下を実行すると
ng g component ../newer-cmp
# コンポーネントはsrc/app/newer-cmpに生成されます

以下に、使用可能なすべてのブループリントの表を示します。

Scaffold	Usage
Component	`ng g component my-new-component`
Directive	`ng g directive my-new-directive`
Pipe	`ng g pipe my-new-pipe`
Service	`ng g service my-new-service`
Class	`ng g class my-new-class`
Guard	`ng g guard my-new-guard`
Interface	`ng g interface my-new-interface`
Enum	`ng g enum my-new-enum`
Module	`ng g module my-module`

テスト

JHipsterアプリケーションでの一貫性のためのテストはnpmコマンドを通じて利用できます。

npm test

i18n

JHipsterは、翻訳のためにngx-translate依存関係を使用しています。Angular CLI i18nは、JHipsterと互換性のないデフォルトのAngular i18nサポートに基づいています。

サーバの実行

Angular CLIを使用してアプリケーションを開発する場合は、専用のコマンドを使用してサーバを直接実行できます。

ng serve

まとめ

Angular CLIの詳細については、公式Webサイトhttps://cli.angular.io/を参照してください。

ツール​

プロジェクト構造​

認証​

ng-jhipsterライブラリ​

通知システム​

Angular CLIの使用​

概要​

使用方法​

ビルド​

コンポーネント、ディレクティブ、パイプ、およびサービスの生成​

テスト​

i18n​

サーバの実行​

まとめ​

ツール