Angularを使ったことがある場合(そしてこれを読んでいる場合は、持っていると思います)、 AngularCLIのパワーと利便性を否定することはできません。 ほんの数回のキーストロークで、フル機能のWebアプリを生成できます。 これは多くの開発者にとって素晴らしいことですが、一部の開発者(特に非Unix開発環境からの開発者)は、すべてのコマンドで使用可能なすべてのオプションから当て推量を排除して、CLIを利用するためのよりUI指向の方法を好む場合があります。 これがAngularConsoleの出番です。 始めましょう!

Angularコンソールをダウンロードしてインストールする

Angular Console に移動し、プラットフォーム用のツールをダウンロードしてインストールします。 Angular Consoleはデスクトップアプリケーションであり、インストールウィザードはおなじみのはずです。

注:AngularConsoleはNrwlによって作成されます。 この発行時点で、ソフトウェアはベータ版です。 このWebサイトには、Linuxのバージョンは実験的なものであるとも記載されています。

新しいワークスペースを作成する

アプリケーションを最初に実行するときの最初のステップは、既存のワークスペースを開くか、新しいワークスペースを作成することです。 このデモでは、新しいワークスペースを作成します。 既存のワークスペースを開きたい場合、AngularConsoleはAngular6+プロジェクトとのみ互換性があることに注意してください。

新しいワークスペースを作成すると、ワークスペースの親ディレクトリ名前を選択し、回路を選択するための小さなウィザードが表示されます。 プロジェクト専用のフォルダを手動で作成する必要はありません。 プロジェクトを保持するディレクトリを選択するだけで、名前を付けたものに基づいてプロジェクト用の新しいフォルダが作成されます。 現在、選択できる2つの回路図面は、@schematics/angular(Angular CLIで使用されるデフォルト)と、Nrwlによって作成されたカスタム回路図面パッケージである@nrwl/schematicsです。

右上の「作成」をクリックします。 実際には、CLIがアプリの作成と依存関係のインストールに機能するのがわかります。

ワークスペースの管理

ワークスペースを作成したら、その管理は非常に簡単です。一般的なタスクを実行するために、AngularCLIリファレンスを横に開く必要はありません。 ワークスペース内に複数のアプリケーションがある場合があります。前の手順を実行した場合は、メインプロジェクトとエンドツーエンドテスト用の分度器プロジェクトの2つが表示されます。 各アプリケーションには、新しいコンポーネントの提供、テスト、生成など、一般的なCLIタスクの短いリストがあります。

左側のナビゲーションには、さらに高度なオプションがいくつかあります。

コードを生成する

このセクションでは、拡張機能を介してロードされた回路図に基づいて、アプリケーションの新しいコードを生成できます(以下を参照)。 たとえば、@schematics/angular回路図に基づいてプロジェクトを生成した場合、オプションには次のものが含まれる場合があります。

  • serviceWorker
  • 応用
  • 成分
  • 指令
  • ガード
  • モジュール
  • パイプ
  • サービス

…そして他のいくつか。

拡張機能を追加した場合は、生成するものの他の多くのオプションが表示される場合があります。

回路図をクリックすると、その回路図で使用可能なすべてのオプションのフォームが表示されます。 フォームに記入するだけで(「重要」フィールドと「オプション」フィールドに整理されています)、「生成」をクリックして、ボイラー! ng generateのすべてのオプションについて推測する必要はもうありません! その回路図面に定義されているすべてのものが、各オプションの意味に関する役立つヒントとともに、このフォームで利用できます。

Screenshot of form for generating a directive.

ディレクティブを生成するためのAngularコンソールフォーム。

タスクの実行

このタブには、プロジェクトの他の一般的なCLIタスクのリストと、定義されているpackage.jsonスクリプトが表示されます。 CLIタスクには、buildextract-i18nlintserve、およびtestが含まれます。 これらのそれぞれには、コード生成回路図と同様の形式が含まれており、タスクに含めることができるすべてのオプションを明確に把握できます。

拡張機能

Angular Consoleでは、他の回路図面パッケージを提供することで、利用可能な回路図面の数を「拡張」することもできます。 パッケージを追加すると、それらのコード生成アイテムが[コードの生成]タブで使用できるようになります。 たとえば、@angular/materialパッケージを追加すると、次の回路図が表示され、それぞれが使用可能なすべてのオプションを定義する独自のフォームを備えています。

  • ng-add-setup-project
  • ダッシュボード
  • テーブル
  • ナビゲーション
  • addressForm

結論

Angular Consoleは、開発者のAngular CLIのエクスペリエンスを促進および簡素化するための、すっきりとしたクリーンなUIベースのツールです。 ほとんどのタスクでCLIを直接使用したい場合でも、Angular Consoleを確認する価値があります。私のように、存在すら知らなかったさまざまな回路図やオプションについて学ぶことができます。

ただし、新しいワークスペース/アプリケーションを生成するときに設定される非常にまばらなオプションや、独自のカスタム回路図面パッケージを追加できないなど、いくつかの制限があります。 ただし、これはかなり新しく、積極的に保守されているオープンソースソフトウェアです。 したがって、この記事に記載されているこれらの機能(またはその欠如)は、新しいバージョンがリリースされると変更される可能性があります。

参考文献