AngularCLI回路図の使用

私と同じように、Angularでの作業を開始したとき（特に最初に到着したとき）、設定する必要のあるファイルと構成の数にすぐに飽きてしまいました。新しいコンポーネントを作成するには、3つの個別のファイルを手動で作成し、それらがモジュール内に適切に配置されていることを確認する必要がありました。プロジェクトが成長し始めると、このタスクは雑用になり始めました。

AngularSchematicsが付属しています。

Angular Schematicsは2018年にAngularチームによって導入され、Angularプロジェクトでファイルを生成および管理するためのAPIを提供し、必要な依存関係を提供します。それをテンプレートツールのように考えてください。

この記事では、組み込みの回路図面を活用してAngular開発を合理化する方法を紹介します。

設定

最初に行う必要があるのは、 AngularCLIをインストールすることです。

$ npm install -g @angular/cli@latest

それが完了したら、実行して新しいプロジェクトを作成できます

$ ng new my-app

これでプロジェクトができました。コンポーネント、サービス、ディレクティブ、ガードなどのプロジェクトを作成し始めたいと考えています。これらの各エンティティは、回路図を使用して生成できます。この回路図面の名前を次の引数として渡します。

$ ng generate

コンポーネントの回路図

DashboardComponentという名前のコンポーネントを生成するには、component回路図面を使用します。

$ ng generate component dashboard
CREATE src/app/dashboard/dashboard.component.scss (0 bytes)
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (282 bytes)
UPDATE src/app/app.module.ts (487 bytes)

CLIが4つの個別のファイル（スタイルシート、HTMLテンプレート、テスト仕様、およびTypeScriptドキュメント）を作成し、モジュールも更新したことに気付くでしょう。 app.module.tsの内部を確認することで、追加されたことを確認できます。

app.module.ts

import { DashboardComponent } from './dashboard/dashboard.component';

...

@NgModule({
  declarations: [
    DashboardComponent
  ],

...

CLIは、モデルにPascalCase名が付けられ、ディレクトリがkebob-caseになるように、コンポーネントも構築します。

したがって、次の入力：

$ ng generate dashboard-settings

と

$ ng generate DashboardSettings

同じ結果が得られます。

サービスの概略図

service回路図を使用して、SocketServiceというサービスを作成できます。

$ ng generate service socket
CREATE src/app/services/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket.service.ts (135 bytes)

デフォルトでは、これはサービスの新しいディレクトリを生成しませんが、現在のパスにサービスとテストファイルを生成します。これは、--flat falseを設定することで変更できます。

$ ng generate service socket --flat false
CREATE src/app/services/socket/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket/socket.service.ts (135 bytes)

また、これによってサービスがNgModuleに自動的に追加されるわけではないため、自分でサービスを追加する必要があることにも注意してください。

ガード回路図

ガード回路図は、実装するインターフェースのタイプ（CanActivate、CanActivateChild、またはCanLoad）を要求します。 --implements引数を使用してこれを直接渡すか、インタラクティブに入力します。

CanActivateを実装するAuthGuardというガードを生成するには、次のように入力します。

$ ng generate guard auth --implements CanActivate
CREATE src/app/auth.guard.spec.ts (346 bytes)
CREATE src/app/auth.guard.ts (456 bytes)

生成されたファイルを開くと、CanActivateインターフェースが実装されていることがわかります。

パイプの概略図

パイプ回路図は、現在のディレクトリにパイプを生成し、それをメインモジュールに追加します。 --module引数を使用してモジュールを指定することもできます。パイプをエクスポートするように指定するオプションもあります。

エクスポートされるPhonePipeというパイプを生成するには、次のように呼び出します。

$ ng generate pipe phone --export
CREATE src/app/phone.pipe.spec.ts (183 bytes)
CREATE src/app/phone.pipe.ts (203 bytes)
UPDATE src/app/app.module.ts (696 bytes)

app.module.tsを開くと、PhonePipeがモジュールに追加されていることがわかります。

app.module.ts

import { PhonePipe } from './phone.pipe';
...

@NgModule({
  declarations: [
    PhonePipe
  ],
...
  exports: [PhonePipe]
...

ディレクティブ回路図

ディレクティブ回路図はAngularディレクティブを生成します。デフォルトでは、ディレクティブはモジュールに追加されます。

SamplingDirectiveという新しいディレクティブを生成するには、次のように呼び出します。

$ ng generate pipe sampling
CREATE src/app/sampling.directive.spec.ts (236 bytes)
CREATE src/app/sampling.directive.ts (147 bytes)
UPDATE src/app/app.module.ts (781 bytes)

回路図面は、Angularプロジェクトと同じプレフィックスを使用してディレクティブに名前を付けます。たとえば、プロジェクトのデフォルトのプレフィックスが「app」に設定されている場合、このディレクティブの名前は[appSampling]にする必要があります。これは、--prefix引数をCLIに渡すことで手動で設定できます。

前進する

これらは、AngularCLIが提供するいくつかの回路図にすぎません。次のように入力すると、使用可能なすべての回路図面を一覧表示できます。

$ ng generate --help

さらに、ng generate [schematic]の後に--helpを渡すことで、各回路図面の詳細情報を取得することもできます。

Angular回路図は、Angular開発を合理化するのに役立つ素晴らしいツールです。

ハッピーコーディング！

資力

AngularSchematicsのドキュメント