【Angular】Angular CLI コマンド(ngコマンド)を整理してみた

仕事でAngularを扱わないといけなくなったのですが、
はじめ何が何やらさっぱりでして、とりあえずAngularをインストールしてngコマンドを叩くとこから始めました。
なので、それをざっくりとまとめておきます。


Angular CLI

まずは、Angular CLIのインストールが必要。
インストールしたらngコマンドを使うことができるようになります。

npm install -g @angular/cli

ちなみに-gオプションを付けて、グローバルにインストールしました。
グローバルにというのは、パスを指定しなくてもどこからでも使うことができるようになることを指します。
指定しない場合は、カレントディレクトリにインストールすることになります。


サーバ起動

サーバを起動する。

ng serve

サーバ起動した後に自動的にブラウザを開く場合は–openオプションを付けます。

ng serve --open

同一ネットワーク内で他PCからのアクセスもできるようにするには、–hostオプションで0.0.0.0を指定してあげます。

ng serve --host 0.0.0.0

プロジェクト作成

プロジェクトを作成する。

ng new MyApp

オプションでCSSをSASS、SCSSに変更することもできます。

ng new MyApp <span>-</span><span>-</span>style=sass
ng new MyApp <span>-</span><span>-</span>style=scss

個人的にはいつもscssを指定してあげています。

また、自分はMacで作業しているのでならなかったのですが、Windowsの場合ワーニングが出る場合があるようです。
遭遇した場合は、こちらを参考にしてください。
fseventsが依存関係でエラーになる


コンポーネント作成

コンポーネントを作成する

ng g component [フォルダ]/[コンポーネント名]

コンポーネントを追加したあとは、ルーティングに追加しましょう。
こちらのファイルにコンポーネントを追加してあげることでルーティングできるようになります。
app-routing.module.ts


クラス作成

クラスを作成する。

ng g class [フォルダ]/[クラス名]

コンポーネント作成と同様。


パイプ作成

パイプを作成する。

ng g pipe [フォルダ]/[パイプ名]

コンポーネント作成と同様。


ビルド

一旦は、参考サイトを添付

Angularで作ったアプリをApacheサーバーにUPして公開する


これからAngularを覚えるなら

こちらのサイトがすごくわかりやすくまとめてあります。
まずは、ここで基本を押さえると後々楽になるのではと・・・
いくつか参考サイトを載せておきます。

Angular入門 未経験から1ヶ月でサービス作れるようにする

CLIの概要とコマンドリファレンス

Angular 入門 – アプリケーションを作りながらモジュールとコンポーネントとサービスについて理解する

【Angular】複数アプリケーションの共存