初心者向けのAngular CLI の簡素化

初心者向けのAngular CLI の簡素化

そのため、初めてのAngularアプリケーションを作成したいと考えていますが、「Hello World」Angularアプリケーションを設定するのも簡単ではありません。

10min read

そのため、初めてのAngularアプリケーションを作成したいと考えていますが、「Hello World」Angularアプリケーションを設定するのも簡単ではありません。これには、次のような多くの手順が必要です。

  • TypeScript コンパイラの設定 (TypeScript を使用する場合)
  • Configuration of Webpack or other module loader
  • Setting up local web development server
  • 依存関係のインストールと構成
  • Configuring Unit Test environment
  • エンドツーエンドのテスト環境の構成
  • 継続的デリバリーでの作業
  • 継続的インテグレーションなど、さまざまな取り組みを行っています。

これらのタスクはすべて手動で実行できますが、これにはこれらすべての概念を深く理解する必要があり、新しいプロジェクトの開始に非常に時間がかかります。この問題を解決するために、AngularにはAngularコマンド ライン インターフェイス (CLI) が付属しています。

詳しくはこちらをご覧くださいhttps://cli.angular.io/

これらのタスクはすべて、Angularアプリを作成、テスト、デプロイするためのコマンドラインツールであるAngular CLIによって処理されます。Angularアプリの作成にはAngular CLIを使用することをお勧めします。これは、必要なすべての依存関係のインストールと設定、およびすべての接続に時間を費やす必要がないためです。それはあなたに多くの定型を提供し、あなたの時間を節約します。

Webpackを使用して、すべてのパッケージ、読み込みモジュール、インポート機能、BrowserLinkなどを含めます。Webpackの設定はすべてCLIによって完全に行われるため、心配する必要はありません。また、ユニットテスト用にJasmineとKarmaを設定し、TypeScriptファイルをJavaScriptなどにトランスパイルするためのTypeScriptコンパイラを設定します。 Angular CLIをどのように使用できるかを見てみましょう。

Installation of Angular CLI 

npm を使用してAngular CLI をローカル開発マシンにグローバルにインストールできます。

npmを使用するには、ここからNodeJSをインストールしてください:https://nodejs.org/en/。NodeJSをインストールしたら、npmを使用してAngular CLIをインストールできます。NodeJS がインストールされているかどうかを確認するには、次のコマンドを実行します

node –v
node –v

NodeJSのバージョン番号が返されるはずです。 NodeJSをインストールしたら、npmがインストールされているかどうかを確認する必要があります。WindowsではnodeJSインストーラーを使用して、npmもインストールされます。ただし、コマンドを使用してインストールすることもできます。

npm install -g npm
npm install -g npm

–v エイリアスを使用して、インストールされている npm のバージョンを確認できます。

–v エイリアスを使用して、インストールされている npm のバージョンを確認できます

その後、次の手順を実行してAngular CLI をインストールします。

 npm install @angular/cli -g
 npm install @angular/cli -g

これで、Angular CLI がグローバルにインストールされました。 CLI がインストールされているかどうかを確認するにはAngular次のコマンドを実行します。

ng –version
ng –version

 Angular CLI とその他のパッケージのバージョンが表示されます。 上の画像のようにバージョン番号が表示されたら、Angular CLIがシステムに正常にインストールされていることを確認できます。CLI がシステムにグローバルにインストールされているかどうかを確認する別の方法はAngular npm list コマンドを実行することです。

 npm list -g @angular/cli --depth=0
 npm list -g @angular/cli --depth=0

上記のコマンドは、インストールされているAngular CLIのバージョンを返し、Angular CLIがマシンに正常にインストールされていることを確認します。

Upgrade Angular CLI 

場合によっては、CLI Angular最新バージョンにアップグレードする必要があります。これは、次の 3 つのコマンドを組み合わせて使用することで実行できます。

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli

場合によっては、キャッシュをクリーンアップするために–forceを使用する必要がある場合があります。

Getting help in Angular CLI

Angular CLI でヘルプを表示するには、help コマンドを使用します。

ng help
ng help

Angular上の画像に示すように、利用可能なすべてのヘルプオプションが一覧表示されます。 特定のコマンドに関するヘルプを表示するには、次のコマンドを実行します。

ng [command name] –help

最初のアプリケーションの作成

Angular CLI をインストールしたら、そのコマンドを使用して新しいAngularプロジェクトを生成できます。ng new コマンドを使用して、新しいアプリケーションを作成できます。

ng new helloworld --skip-install
ng new helloworld --skip-install

上記では、HelloWorldという新しいプロジェクトを作成しました。依存関係をインストールしないオプションを選択しました–skip-install。依存関係をインストールするために、npm installを個別に実行します。 以下のコマンドを実行すると、プロジェクトが作成され、依存関係もインストールされます。

ng new helloworld
ng new helloworld

Angular CLI を使用して新しいプロジェクトを作成すると、次の 2 つのオプションを求められます

  1. プロジェクトにルーティングを追加するかどうか
  2. CSS、SCSS、LESSなど、どのスタイルを選択したいですか。

ルーティングを追加するかどうかを選択でき、アプリケーションのスタイル設定のさまざまな方法を選択することもできます。 アプリケーションを作成したら、任意のコード エディターで開いて操作できます。最近、Visual Studio Codeは非常に人気があります。 スキャフォールディング・アプリケーションを実行するには、以下のコマンドを使用します。

 ng serve
 ng serve

ご覧のとおり、アプリケーションは正常にコンパイルされ、デフォルトではpoet 4200で実行されます。ng serveコマンドで使用できる多くのオプションがあります。さらに詳しく調べたい場合は、ng newコマンドでさまざまなオプションを利用できます。ヘルプを使用して実行します。

ng new –help
ng new –help

ご覧のとおり、プロジェクトの名前である引数が1つあり、それ以外にも多くのオプションが利用可能です。 例えば

ng new HelloWorld –dry-run

上記のコマンドは、何も書き込まずにファイルを作成します。

ng new HelloWorld –inline-template

上記のコマンドでは、コンポーネント TS ファイルにインラインでテンプレートが含まれています。 新しいIvyレンダリングAngularするためのコマンドオプションもあります。

ng new HelloWorld  --experimental-ivy

ng newコマンドで使用できるオプションは多数ありますが、注意が必要です。

ng new コマンドで新しいプロジェクトを作成したら、package.jsonファイルを開いてさまざまなオプションと依存関係を調べることができます。

package.jsonファイルを開いて、さまざまなオプションと依存関係を調べる

たとえば、この特定のプロジェクトの package.json ファイルの開始、ビルド、およびテスト コマンドを変更できます。 さらに、ファイル内にはさまざまなプロジェクトの依存関係があります。 CLI の設定を含む別の重要なファイルはAngular angular.jsonファイルです。

Angular CLI の設定を含む別の重要なファイルは、angular.jsonファイルです

 

このファイルにはAngularこの特定のプロジェクトの CLI に関連するすべての設定情報が含まれています。 たとえば、プレフィックスプロパティについて考えてみましょう。 デフォルトでは、appに設定されています。そのため、コンポーネントやサービスなどを作成するたびに、その名前の先頭に app が付きます。 AppComponentで気付くように。

このファイルにはAngularこの特定のプロジェクトの CLI に関連するすべての設定情報が含まれています。

ビジネスニーズに合わせてプレフィックスを変更する必要がある場合があります。 たとえば、プレフィックスを会社名fooに設定したいとします。Angular CLI で app の代わりに foo をプレフィックスとして使用するように 3 つの方法で設定できます

  1. By manually changing angular.json file
  2. ng new コマンドで -prefix オプションを使用する
  3. グローバル設定にngconfigを使用する

angular.jsonでプレフィックスの値を変更し、コマンドを実行してログインコンポーネントを生成しました。 ご覧のとおり、生成されたコンポーネントにはプレフィックスfooが使用されています。

ご覧のとおり、生成されたコンポーネントにはプレフィックス foo が使用されています

angular.jsonを変更したくない場合は、ng newの実行時にプレフィックスオプションを使用できます

ng new helloword1 --prefix foo --skip-tests
ng new helloword1 --prefix foo --skip-tests

上記のコマンドでは、2つのオプションを組み合わせています。Angular CLIを使用すると、オプションを組み合わせて、必要に応じてプロジェクトを作成できます。上記のコマンドでは、プレフィックスをfooに設定して新しいプロジェクトを作成し、テストファイル(*.spec)ファイルも作成しないように言っています。出力として、Angular CLI はプロジェクトを作成し、次の図に示すように、foo の先頭が付いていることがわかります。

CLI Angularプロジェクトを作成し、以下に示すように foo がプレフィックスとして付けられます

任意の数のオプションをng newコマンドと組み合わせて、新しく作成されたプロジェクトに必要な構成を取得できます。

Generate Commands

Angular CLIには、さまざまな回路図を生成するためのng generateコマンドが用意されています。 たとえば、次のものを使用できます。

ng generate component login
ng generate component login (コンポーネント ログインの生成)

上記のコマンドは、プロジェクトに LoginComponent というコンポーネントを生成します。ng generateで利用できる多くのオプションがあります。あなたはそれらを–helpオプションでリストすることができます。

ng generate –help
ng generate –help

ご覧のとおり、さまざまなオプションが可能な引数として概略図を取ります。使用可能なスケマティック引数は次のとおりです。

  • appShell
  • application
  • class
  • コンポーネント
  • directive
  • 列挙型
  • guard
  • interface
  • 図書館
  • module
  • パイプ
  • service
  • serviceWorker
  • universal

generate コマンドを使用すると、コンポーネントを生成したり、プロジェクトにserviceWorkerを追加してプログレッシブ Web アプリに変換したりすることもできます。

ng generate serviceWorker
ng generate serviceWorker

コンポーネントの生成

ng generate コマンドを使用して、新しいコンポーネントを生成できます。以下では、dryオプションでgenerateコマンドを実行しています。

ng generate component products –dry
NG Generate Component Products –ドライ

ドライオプションを指定してgenerateコマンドを実行し、すべてが正しいことを確認しました。 コマンドを確認するには、ドライモードでコマンドを実行する必要があります。 以下のコマンドでコンポーネントを生成できます。

ng generate component products
NG GENERATEコンポーネント製品

上記のコマンドは、products という名前のフォルダーと次のファイルをプロジェクトに追加します。

  1. component.ts
  2. component.html
  3. component.css

products.spec.tsは追加されていません。hellowworld1 プロジェクトが -skip-tests オプションを指定して作成されたため、ファイル。ng generate component を使用してさまざまなオプションを構成し、テンプレートとスタイルを外部ファイルに含めるか、コンポーネント クラスにインラインで配置するかを決定できます。使用可能なオプションは、–helpコマンドで確認できます。

ng generate component –help
ng generate component –help

 ご覧のとおり、利用可能なさまざまなオプションは次のとおりです。

  • –change-detection
  • –エントリーコンポーネント
  • –export
  • –flat
  • –インラインスタイル
  • –インラインテンプレート
  • –lint-fix
  • –module
  • –prefix
  • –プロジェクト
  • –selector
  • –skip-import
  • –skip-tests
  • –spec
  • –style
  • –styleext
  • –view-encapsulation

これらのオプションにも使用できるショートカットがあります。コンポーネント生成オプションの詳細については、ヘルプを参照してください。ここで、ビューのカプセル化と変更検出が事前に構成されたコンポーネントを生成するとします。これは、以下のコマンドで実行できます。

ng g c addproduct  --v ShadowDom --c OnPush
ng g c addproduct  --v ShadowDom --c OnPush

ここでは、コマンドとオプションのショートカットを使用しました。Shadow Dom View Encapsulation と OnPush Change Detection を使用するようにコンポーネントを構成しています。生成されるコンポーネントは次のようになります。

生成されたコンポーネントは次のようになります

多くのオプションを組み合わせて、プロジェクトの必要に応じてコンポーネントを生成できます。

ディレクティブの生成

ディレクティブは、次のコマンドで生成できます。

ng generate directive creditcard
ng generate directive creditcard

上記のコマンドは、次の画像に示すように、プロジェクト内にディレクティブを生成します。セレクターは app ではなく foo で始まることに注意してください。これは、プロジェクトの作成時にプレフィックス foo を使用するように設定されているためです。

セレクターは app ではなく foo で始まることに注意してください。これは、プロジェクトの作成時にプレフィックス foo を使用するように設定されているためです。

コンポーネントと同様に、directive generate でも多くのオプションを利用できます。–helpを使用してそれらをリストできます

ng generate directive  --help
ng generate ディレクティブ --help

 ディレクティブ生成で使用できるさまざまなオプションは次のとおりです。

  • –export
  • –flat
  • –lint-fix
  • –module
  • –プロジェクト
  • –selector
  • –skip-import
  • –skip-tests
  • –spec

これらのオプションをさまざまな組み合わせで使用して、プロジェクトで必要に応じてディレクティブを生成できます。

Generate Service

コンポーネントとディレクティブを生成する方法では、

  1. Service
  2. パイプ
  3. Interface
  4. Class
  5. Enum etc.

サービス実行コマンドを生成するには:

ng generate service foodata
ng generate service foodata

上記のコマンドは、プロジェクトにサービスを作成します。 以下を探索できます。

ng generate –help

使用可能な他の回路図オプションを見つけるには。

構築と提供

ng buildコマンドを使用してAngularアプリケーションをビルドできます。

ng build
ng build

ご覧のとおり、ng buildはブラウザでダウンロードするファイルを生成します。それらは次のとおりです。

  • Main
  • Polyfills
  • 実行中
  • スタイル
  • Vendor

ng buildで利用できる多くのオプションがあり、–helpコマンドで一覧表示できます。

ng build –help
ng build –help

 次のような多くのオプションが利用可能です

  • –aot
  • –base-href
  • –prod
  • –deploy-url
  • –output-hashing
  • –source-mapなど

上記のオプションには、多くのオプションが用意されています。ヘルプで詳しく学ぶことができます。

ファイルの変更を追跡するアプリケーションをビルドして提供する場合は、ng serveコマンドを使用する必要があります。 デフォルトでは、ポート 4200 でアプリケーションを提供します。

ng serve
ng serve

正常に完了すると、上記のように「正常にコンパイルされました」というメッセージが表示されます。さらに、アプリケーションがポート4200でリッスンしていると言っています。 ng serveで使用可能なさまざまなオプションをリストできます –helpコマンド。

概要

この記事では、Angular CLI とそれで使用できるさまざまなコマンドについて学びました。Angularアプリケーションを迅速に開発するにはAngular CLIを使用する必要があります。

Angular
デモを予約