Angular環境構築 - 白眼鏡のblog

それでは、Angularのはじめかたについて書いていこうとおもう。

今回参考にするページはAngular公式ページのQuickStartです。

Angularを始める際まず必要なのがnode.jsなのでインストールするんですが

割と頻繁にnode.jsはバージョンが上がり、その度のバージョンアップが面倒なので

Windowsならnodist,Macならnodebrew,Linuxならnvmをインストールすることを強くすすめます。

自分の端末でのインストール法をここで例としてあげときます。

nvmインストール

　ターミナルで次のコマンドを実行

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

　node.jsのバージョンを確認

nvm ls-remote

　このコマンドを実行すると次のようなバージョン一覧が表示されるので、Latest版をインストールする以下のコマンドを実行

f:id:wadada420:20171105163355p:plain

　nvm install 8.9.0

これで、npmコマンドが使えるようになっているはずなのでnode.jsの設定はこれで完了

　それでは、QuickStartにしたがってAngularのプロジェクトを作成していきます

まずは、ターミナルを開いてプロジェクトを作成したい場所まで移動し、次のコマンドを実行してAngular cliをグローバルインストールします（これでngコマンドを使えるようにする）

npm install -g @angular/cli

　ちょいとまってインストールが完了したら、次のコマンドを実行してプロジェクト本体を作成します。

ng new アプリ名

　そうすると、今のディレクトリ配下に指定したアプリ名のディレクトリが作成されるのでそこへ移動して次のコマンドを実行するとAngularプロジェクトの初期画面がhttp://localhost:4200で起動する、そこへアクセスして下のような画面になっていれば成功です。

ng serve

f:id:wadada420:20171105232514p:plain

これで、Angularを始めるための環境はほとんど整いました

次回は、プロジェクトの構造の説明とAngularプロジェクトを弄る時に使うエディタ（？）について書こうと思います。

では、また。