Angular開発環境構築手順
本記事ではAngular開発環境構築手順(for Windows)について説明します。
お使いのPCがMacの場合は以下の記事にAngular開発環境構築手順について記載しているので参考にして下さい。
Angularの良い所
僕は普段の仕事で、超マニアックなJava Scriptのソースコードや、 グローバル領域を汚しまくったり、めちゃくちゃしてるJava Scriptのソースコードなどをよく見かけます。。。
Java Scriptは手軽に自由に書ける反面、書く人によって出来上がるものに差が出やすく、 メンテナンスがしずらくなることが。。。(実際に僕は最近ひどい目に合いました、、)
そこで、 Java言語のように型の定義がきっちりしていて、オブジェクト指向で、行儀の悪いことはできなくて、 誰がコードを書いてもある程度同じようになるフロントエンドのフレームワークを探していると、 それがAngularでした。
そんな素敵なものがあるのか、、と思いAngularについて現在勉強中です。
最終的にはお試しで簡単なWebアプリのフロントエンドをAngularで作成し、 Spring Bootで作成したバックエンドのRest APIをコールして・・・ みたいなことをやってみようかなと思います。
環境構築対象
OS:Windows 10 64bit
環境構築手順
手順は以下です。
- nodejsインストール
- Angular CLIインストール
- Visual Studio Codeインストール
1.nodejsインストール
まずnodejsをダウンロードします。
ダウンロードしたインストーラをダブルクリックします。 ダイアログが開いたらインストールを進めて行きます。
コマンドプロンプトからnodejsが正常にインストールできたか確認します。
> node -v
v6.10.3
> npm -v
3.10.10
nodeとnpmのバージョンが確認できればnodejsのインストールは完了です。
2.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のインストールは完了です。
3.Visual Studio Codeインストール
Visual Studio Codeをダウンロードします。
ダウンロードしたインストーラをダブルクリックします。 ダイアログが開いたらインストールを進めて行きます。
Visual Studio Codeが起動したらインストール完了です。
以上でAngular開発環境構築は完了です。
環境構築ができたら次はAngularのサンプルプログラムを作成してHello Worldしてみてください。