Angularプロジェクト作成

はじめに

最近仕事でAngularを触り始めました。
まずは環境構築から、自分の備忘録用に残していこうと思います。

Angularとは

AngularとはGoogleによって開発されたJavaScriptフレームワークです。
元々は「AngularJS」という名前でしたが、バージョン2.0から「Angular」という名前に変更されています。

バージョンについてはこちらを参照

環境構築

とりあえずプロジェクトを作成してみましょう。

Node.jsのインストール

Node.jsとはJavaScript実行環境のこと
参考記事：Node.jsとはなにか？なぜみんな使っているのか？

ReactだろうがVueだろうが、Node.jsのインストールは必要。

インストール後は以下コマンドでバージョン確認が出来ます。

$node -v

Angular CLIのインストール

Node.jsをインストールしたことで、Node Package Manager(npm)が使えるようになりました。
次にAngular CLIをインストールします。

$npm install -g @angular/cli

CLIとはCommand Line Interfaceのことで、これをインストールすることで、プロジェクト作成がコマンド一つで簡単に出来るようになります。

インストール後は以下コマンドでバージョン確認が出来ます。

$ng version または ng --version

プロジェクト作成

Angular CLIをインストール出来たので、早速プロジェクトを作成します。
プロジェクトは以下コマンドで作成できます。（途中に色々と聞かれるので選択していく）

$ng new プロジェクト名

プロジェクト起動

プロジェクトが作成できたので、一度起動して見ましょう。プロジェクトのディレクトリに移動して以下のコマンドを実行します。

$ng serve または npm start

ローカルサーバが立ち上がるのでhttp://localhost:4200/でページが表示されることを確認しましょう。

ところで ng serveとnpm startですが、どっちもサーバを起動させるコマンドです。npm startはpackage.jsonに記載されたstartスクリプトを実行しています。package.jsonのscripts部分を確認してみると、プロジェクト作成直後は以下のようになっています。

package.json

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

結局どちらもng serveを実行しているようです。