概要
Angular開発時に使用するコマンドのまとめです。
プロジェクト作成
ng new [プロジェクト名]
任意のフォルダで以下コマンドを実行するとプロジェクト名のフォルダが作成され、そのフォルダ内にAngularプロジェクトの最低限のモジュール等が格納される。標準でないモジュールは、「ng add xxx」で追加する。
モジュール追加
ng add [モジュール名]
追加したいモジュールの公式サイトに追加方法が記載されているので詳細のコマンドは、モジュールの公式サイトを参照する。
コンポーネント追加
表示に関わるものをコンポーネントを追加で実装する。
ng g c [コンポーネント名] ※こっちの方が楽 ng g component [コンポーネント名]
// 例)カレントフォルダにxxxコンポーネントを作成する ng g c [コンポーネント名] // 例)カレントフォルダにpagesフォルダを作成して、その中にxxxコンポーネントを作成する ng g c pages/xxx
コンポーネント追加で以下ファイル一式が作成される。※cssはscssを指定した場合
- html:コンポーネントの表示用のhtmlファイル
- scss:コンポーネントのスタイルファイル
- ts:コンポーネントの処理を記述するTypeScriptファイル
- spec-ts:コンポーネントの処理の単体テストを記述するTypeScriptファイル
サービス追加
バックエンドとの連携処理などの共通的な処理は、サービスを追加して実装する。
ng g s [サービス名] ※こっちの方が楽 ng g service [サービス名]
// 例)カレントフォルダにxxxサービスを作成する ng g s xxx // 例)カレントフォルダにservicesフォルダを作成して、その中にxxxサービス作成する ng g s services/xxx
サービス追加で以下ファイル一式が作成される。
- ts:サービスの処理を記述するTypeScriptファイル
- spec-ts:サービスの処理の単体テストを記述するTypeScriptファイル