Ignite UI CLI を使用した作業の開始
新しい Angular アプリケーションを最初から作成する場合、ユーザー フレンドリな付きエクスペリエンスを提供するため、以下に説明する方法を使用することをお勧めします。このガイドでは、すべてのセットアップ オプションについて説明します。
はじめに Ignite UI CLI をグローバルにインストールします。
npm install -g igniteui-cli
yarn
パッケージ マネージャーを使用している場合:
yarn global add igniteui-cli
ガイドの使用
アプリケーションを最短でブートストラップする最も簡単な方法は、Ignite UI CLI を使用したステップ バイ ステップ ガイドを使用する方法です。
Ignite UI for Angular CLI を使用してガイドをアクティブにするには、次のコマンドを実行します。
ig
または
ig new
新しいプロジェクトを作成します。
Ignite UI CLI を使用する場合、angular
をフレームワークとして提供し、igx-ts
を new
コマンドのプロジェクト タイプ引数として提供する必要があります。
ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav
Note
v13.1.0
以降、igx-ts
プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用したい場合は、type
を igx-ts-legacy
に設定できます。
新しいアプリケーションが同じ名前でディレクトリに作成されます (newAngularProject
)。Ignite UI for Angular アプリケーションを作成するときに選択できるいくつかのプロジェクト テンプレートがあります。
テンプレートの ID | テンプレートの説明 |
---|---|
empty | ルーティングとホームページを備えたプロジェクト構造 |
side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造 |
side-nav-auth | ユーザー認証モジュールで拡張されたサイド ナビゲーション プロジェクト プロジェクト テンプレートの詳細は、Angular 認証プロジェクト テンプレートトピックをご覧ください。 |
さらに、引数を指定してテーマを制御したり、パッケージのインストールをスキップしたりできます。
name
name
(alias: -n
)
アプリケーションの名前。アプリケーションが同じ名前のディレクトリに作成されます。
framework (Ignite UI CLI のみ)
--framework
(alias: -f
) default value: "jquery"
プロジェクトの対象フレームワーク。サポートされるフレームワークは jQuery、Angular、および React です。
type (Ignite UI CLI のみ)
--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 と名前を指定するか、ステップ バイ ステップ ガイドを使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が ng add
でインストールされている場合にのみサポートされます。
ig add [template] [name]
コマンドを使用します。
ig add grid newGrid
すべての利用可能なテンプレートのリストを取得するには、プロジェクトディレクトリで ig list
コマンドを実行することもできます。
また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。
module
--module
(alias: -m
)
注: module 引数は Angular プロジェクトにのみ適用できます。
新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。
ig add combo newCombo --module=myModule/myModule.module.ts
skip-route
--skip-route
(alias: -srk
)
新しいコンポーネントのアプリ ナビゲーション ルートを自動生成しません。
アプリケーションの実行
start
コマンドはアプリケーションがビルドされ、Web サーバーが起動してデフォルトのブラウザーで開きます。
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 バージョンを示します。 |