Angular Schematics & Ignite UI CLI
CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。プロジェクトにさらに追加できる Ignite UI for Angular コンポーネントを備えたビューの選択により、開発者の生産性が大幅に向上します。
Ignite UI CLI は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドラインツールです。
Ignite UI for Angular Schematics は同じプロジェクトの一部であり、Angular CLI で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。Ignite UI for Angular をインストールすると、schematics コレクションがプロジェクトに追加されます。
ツールの両方バージョンにより、異なるプロジェクト、コンポーネント、およびシナリオビュー (テンプレート)を生成し、ガイドモードを提供します。
作業の開始
Ignite UI for Angular Schematics をグローバルにインストールする方法:
npm i -g @igniteui/angular-schematics
上記のインストールにより、schematics が ng new
コマンドのコレクション パラメーターを使用できるようになります。
IgniteUI CLI を使用する場合、npm でインストールできます。
npm install -g igniteui-cli
ガイドの使用
アプリケーションを最短でブートストラップする最も簡単な方法は、Step-by-Step ガイドを使用する方法です。
Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。
ng new --collection="@igniteui/angular-schematics"
Ignite UI CLI を使用している場合は、次のコマンドを実行します。
ig
新しいプロジェクトの作成
Ignite UI for Angular コントロールを使用するように設定されたアプリケーションを作成するには、コレクションオプションに @igniteui/angular-schematics
を提供する ng new
コマンドを実行します。
ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav
Ignite UI CLI を使用する場合、angular
をフレームワークとして提供し、igx-ts
を new
コマンドのプロジェクト タイプ引数として提供する必要があります。
ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav
新しいアプリケーションが同じ名前でディレクトリに作成されます (newAngularProject
)。Ignite UI for Angular アプリケーションを作成するときに選択できるいくつかのプロジェクト テンプレートがあります。
テンプレートの ID | テンプレートの説明 |
---|---|
empty | ルーティングとホームページを備えたプロジェクト構造 |
side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造 |
side-nav-auth | ユーザー認証モジュールで拡張されたサイド ナビゲーション プロジェクトプロジェクト テンプレートの詳細は、Angular 認証プロジェクト テンプレートトピックをご覧ください。 |
さらに、引数を指定してテーマを制御したり、パッケージのインストールをスキップしたりできます。
name
name
(alias: -n
)
アプリケーションの名前。アプリケーションが同じ名前のディレクトリに作成されます。
framework (Ignite UI CLI only)
--framework
(alias: -f
) default value: "jquery"
プロジェクトの対象フレームワーク。サポートされるフレームワークは jQuery、Angular、および React です。
type (Ignite UI CLI only)
--type
(alias: -t
)
使用可能なプロジェクト タイプは、選択したフレームワークによって異なります。
theme
--theme
(alias: -th
)
プロジェクト テーマ (プロジェクトの種類によって異なります)。
skip-git
--skip-git
(alias: --sg
)
このオプションを使用すると、Git によるリポジトリの自動初期化はスキップされます。オプションを省略すると、グローバルな skipGit構成プロパティが使用されます。
skip-install
--skip-install
(alias: --si
)
new
コマンドは、プロジェクトの作成時にパッケージの依存関係をインストールします。このフラグを渡すと、最初のインストールがスキップされます。
template
--template
特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。 現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。
テンプレートの追加
利用可能な Ignite UI Angular テンプレートを追加するには、新しいコンポーネントのテンプレート ID と名前を指定するか、Step-by-Step Guide を使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が ng add
でインストールされている 場合にのみサポートされます。
Schematics には、Ignite UI for Angular コレクション と component [template] [name]
の ng generate
を使用します。
ng g @igniteui/angular-schematics:component grid newGrid
Ignite UI CLI には、ig add [template] [name]
コマンドを使用します。
ig add grid newGrid
すべての利用可能なテンプレート のリストを取得するには、プロジェクトディレクトリで ig list
コマンドを実行することもできます。
また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。
module
--module
(alias: -m
)
注: module 引数は、Angular プロジェクトでのみ適用できます。
新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。
ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
ig add combo newCombo --module=myModule/myModule.module.ts
skip-route
--skip-route
(alias: -srk
)
新しいコンポーネントのアプリ ナビゲーション ルートを自動生成しないでください。
アプリケーションの実行
start
schematic またはコマンドはアプリケーションがビルドされ、Web サーバーが起動してデフォルトのブラウザーで開きます。
Ignite UI for Angular Schematics の使用:
ng g @igniteui/angular-schematics:start
Ignite UI CLI の使用:
ig start
Ignite UI CLI コマンド
使用可能な Ignite UI CLI コマンドとその使用方法 (フラグを渡すなど) の完全なリストは、Ignite UI CLI wiki ページにあります。
コマンド | エイリアス | 説明 |
---|---|---|
ig start | アプリケーションをビルドしてウェブ サーバーを開始、次にアプリケーションをデフォルト ブラウザーで開きます。 | |
ig build | アプリケーションをアプトプット ディレクトリへビルドします。 | |
ig generate | g | サポートされるフレームワークおよびプロジェクト タイプのための新しいカスタム テンプレートを生成します。 |
ig help | -h | 使用可能なコマンドをリストして手順の簡単な説明を示します。 |
ig config | Ignite UI CLI 構成設定の読み取り / 書き込み操作を実行します。 | |
ig doc | 検索した用語についてインフラジスティックスのサポート情報を検索します。 | |
ig list | l | 指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。 |
ig test | 現在のプロジェクトのテストを実行します。 | |
ig version | -v | ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。 |