Angular CLIは簡単なコマンドを利用してAngularプロジェクトのScaffoldingを生成、実行、ビルドでき、Angularの様々な構成要素を追加できる指令方式のインターフェースです。
サポートする機能は以下のとおりです。
-
Angularプロジェクト作成
-
Angularプロジェクトにcomponent、directive、pipe、service、class、interfaceなどの構成要素を追加
-
Live Reloadをサポートする内蔵開発サーバーを使用したAngularプロジェクトの実行
-
UnitE2Eテスト環境対応
-
デプロイのためのAngularプロジェクトpackaging
インストールと削除方法です。
$ npm install -g @angular/cli
$ npm uninstall -g @angualr/cli
$ npm cache verify
$ npm install -g @angular/cli@latest
インストールの確認はngversion指令で確認することが出来ます。
基本指令は以下の通りです。
- プロジェクト作成
$ ng new
Angularの基本構造、名入れ規則、コード規則などを遵守してプロジェクトを作成します。
- プロジェクト実行
$ cd
$ ng serve [--open] [-- port xxxx]
- 構成要素を作成
$nggenerateを利用しています。
- Component作成
$ ng generate component (ng g c)
srcappフォルダにフォルダを作成します。
フォルダの中に4つのファイルが生成されます。
component.html, component.css, component.ts, component.spec.ts
Root component「src/app/app.module.ts」に新しく生成されたcomponentを登録します。
コンポーネントをインポートして@NgModuleのdeclarationsに登録します。
- componentのselectorの名前はkebab-case規則で作成され、基本接頭辞はappです。
- Directive作成
$ ng generate directive highlight
- Module生成
$ ng generate module todos
- サービス作成
$ ng generate service data
- Class作成
$ ng generate class user
- デプロイのためのビルド
$ ng build [--prod]
ありがとうございます。