Angular開発環境構築手順(for Windows)

Angular開発環境構築手順

本記事ではAngular開発環境構築手順(for Windows)について説明します。

お使いのPCがMacの場合は以下の記事にAngular開発環境構築手順について記載しているので参考にして下さい。

>>Angular開発環境構築手順(for Mac)

Angularの良い所

僕は普段の仕事で、超マニアックなJava Scriptのソースコードや、 グローバル領域を汚しまくったり、めちゃくちゃしてるJava Scriptのソースコードなどをよく見かけます。。。

Java Scriptは手軽に自由に書ける反面、書く人によって出来上がるものに差が出やすく、 メンテナンスがしずらくなることが。。。(実際に僕は最近ひどい目に合いました、、)

そこで、 Java言語のように型の定義がきっちりしていて、オブジェクト指向で、行儀の悪いことはできなくて、 誰がコードを書いてもある程度同じようになるフロントエンドのフレームワークを探していると、 それがAngularでした。

そんな素敵なものがあるのか、、と思いAngularについて現在勉強中です。
最終的にはお試しで簡単なWebアプリのフロントエンドをAngularで作成し、 Spring Bootで作成したバックエンドのRest APIをコールして・・・ みたいなことをやってみようかなと思います。

環境構築対象

OS：Windows 10 64bit

環境構築手順

手順は以下です。

１．nodejsインストール

まずnodejsをダウンロードします。

>>nodejsのダウンロードページ

  ダウンロードしたインストーラをダブルクリックします。 ダイアログが開いたらインストールを進めて行きます。

コマンドプロンプトからnodejsが正常にインストールできたか確認します。

> node -v
v6.10.3
> npm -v
3.10.10

nodeとnpmのバージョンが確認できればnodejsのインストールは完了です。  

２．Angular CLIインストール

コマンドプロンプトからAngular CLIをインストールします。

> npm install -g @angular/cli

コマンドプロンプトからAngular CLIが正常にインストールできたか確認します。

> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64

バージョンが確認できたらAngular CLIのインストールは完了です。  

３．Visual Studio Codeインストール

Visual Studio Codeをダウンロードします。

>>Visual Studio Codeダウンロードページ

  ダウンロードしたインストーラをダブルクリックします。 ダイアログが開いたらインストールを進めて行きます。

Visual Studio Codeが起動したらインストール完了です。
以上でAngular開発環境構築は完了です。  

環境構築ができたら次はAngularのサンプルプログラムを作成してHello Worldしてみてください。

>>AngularでHello Worldしてみる(for Windows)