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
:
import { DashboardComponent } from './dashboard/dashboard.component';
...
@NgModule({
declarations: [
DashboardComponent
],
...
CLIは、モデルにPascalCase名が付けられ、ディレクトリがkebob-caseになるように、コンポーネントも構築します。
したがって、次の入力:
$ ng generate dashboard-settings
と
$ ng generate DashboardSettings
同じ結果が得られます。
サービスの概略図
を使用してSocketServiceというサービスを作成できます service
回路図:
$ 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
引数を入力するか、インタラクティブに入力します。
を実装するAuthGuardと呼ばれるガードを生成するには CanActivate
、 タイプ:
$ 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がモジュールに追加されたことを示します。
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
さらに、渡すことで各回路図面の詳細情報を取得することもできます --help
後 ng generate [schematic]
Angular回路図は、Angular開発を合理化するのに役立つ素晴らしいツールです。
ハッピーコーディング!