いちろう’s blog

すーぱーえんじにあ

Angularメモ ngコマンド

Anguler

Angularチュートリアルの個人的なメモです。チュートリアルを元に、各要素についてまとめます。

ngコマンド

Angularには開発を円滑にするngから始まるコマンドが複数ある。プロジェクトの作成の際に利用したng newコマンドから、コンポーネントやサービスを作成するためのコマンドなど様々存在する。そのうちのよく使いそうなコマンドをまとめた。

利用可能なngコマンドに関しては、以下の公式ドキュメントを参照。

プロジェクトの作成

Angularでプロジェクトを作成する場合は、ng newコマンドを利用する。チュートリアルに従って、angular-tour-of-heroesを作成する場合は以下のコマンドを実行する。

ng new angular-tour-of-heroes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
~~省略~~

実行すると、scssを利用するかroutingを利用するか質問がされるので、自身の環境に合わせて設定する。いろいろフォルダが作成されるが、開発において主に触るフォルダはsrc/以下のフォルダのみ。作成されるフォルダの説明に関しては以下のリンクを参照。

ちなみに、下記のようにオプションで指定することで、上記の項目をあらかじめ設定して実行できる。

ng new angular-tour-of-heroes  --routing=true --style=scss

また何も指定しない場合、コンポーネントのセレクターがappになってしまう。なので一般的にはプロジェクトごとにprefixの設定することが好ましい。--prefixを指定することで任意のprefixを指定することができる。

ng new angular-tour-of-heroes  --prefix=${任意の名称}

サーバの起動

開発の際にアプリケーションを起動する場合は以下のコマンドを実行する。

ng serve --open
ng s --open # ←省略系

--opneを指定すると、ビルドと同時にブラウザが立ち上がり、localhost:4200でリアルタイムに確認できる。

コンポーネントの追加

コンポーネントを追加する際は、以下のコマンドを実行する。

ng generate component ${{コンポーネント名}}
ng g component ${{コンポーネント名}} # ←省略系
ng generate component heroes

以下のようなコンポーネントファイルが作成される。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

上記のコマンドで生成した場合、各ファイルには必須のステートメントが定義されている状態で新規作成が行われる。そのため、手動でコンポーネントを追加するパターンと比較して、命名規則が守られたり、記述忘れが減ったりと便利なので、コンポーネントを追加する場合はng generate componentを利用したい。

また、コマンドに--dry-runオプションを付与することで、作成する前に影響するファイルの一覧を確認することができる。

$ ng generate component heroes --dry-run

CREATE src/app/heroes/heroes.component.css (0 bytes)
CREATE src/app/heroes/heroes.component.html (21 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (626 bytes)
CREATE src/app/heroes/heroes.component.ts (275 bytes)
UPDATE src/app/app.module.ts (475 bytes)

NOTE: The "dryRun" flag means no changes were made.

サービスの追加

serviceを追加する場合も同様に、ng generate serviceコマンドを利用する。

ng generate service hero

サービスは以下のようなファイルが作成される。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

ビルド

開発の際はng serveでローカルの開発サーバを利用して開発を進めるが、本番環境にビルドする場合は、Angularで書かれたソースコードをhtmlファイルとして出力する必要がある。

Angularで書かれたソースをビルドするコマンドを以下に示す。

ng build
ng b # 省略系

ビルド結果はdist/ディレクトリ以下に保存される。

ng serveを実行した場合、ソースコードの変更がリアルタイムにブラウザに反映されるが、例えばバックエンドはJava、フロントをAngularで開発するという場合、バックエンドがJavaのサーバになりng serveによるリアルタイムな反映を実現できない。 そこで--watchオプションを付与することで、ソースコードの変更に反応してビルドが実行され、dist/以下のファイルが上書きされるため、ng serveを実行している時と同じ感覚で開発を進めることができる

ng b --watch

リントの適応

コードに誤った記述があったり、コーディングスタイルの違反がないかを確認するために、リントを実行する必要がある。リントを適応するために、以下のコマンドを実行する。

ng lint
ng l # 省略系

ng newしたばかりでリンターをインストールしていない場合、リンターがが含まれていないので以下のコマンドでインストールを実行する必要がある。

ng add @angular-eslint/schematics

チュートリアルの実装完了後実施したケースであるが、コードの品質になにも問題がなければ以下のように出力される。

$ ng l

Linting "angular-tour-of-heroes"...

All files pass linting.

随時追加予定です。