凡人エンジニアの前向きスローライフ

南国ビーチでビールを飲みながらゆっくり過ごしたい凡人エンジニアが、気ままに書いているブログです

【Angular 4 対応】Angularの始め方 開発環境インストール (mac編)

Angularを初めて利用する人向けに、開発環境のセットアップ、インストール手順を整理したものです。

 *本手順はAngular バージョン4以降を対象に書かれた記事です。Angular.jsはAngularとは異なる手順となりますので、ご注意ください。

Angularとは

Angularとはgoogleで開発されたWebアプリケーション開発用のフレームワークです。

他のライブラリなどと組み合わせなくても、Webアプリ開発に必要な機能をほぼ全て備えている(フルスタックである)ことが大きな特徴です。

2017年9月現在の最新メジャーバージョンはAngular 4になります。

ウンチクはこのぐらいにして、早速始めましょう。

前提環境

OS : Mac OS X Yosemite (10.10.5)
npm : 5.3.0
Angular : 4.3.6

環境セットアップ

Angularの環境セットアップには、npm(ノードパッケージマネージャ)が必要です。

brewコマンドを使用して、npmを利用できるようにします。

$ brew install node

angular用のCLI(コマンドベースで操作するためのライブラリ)をインストールします。

$ npm install -g @angular/cli

アプリケーションの動作確認

my-app(名前は任意)という名前のアプリケーションを作成します。

$ ng new my-app

このコマンドを実行すると、カレントディレクト直下にmy-appという名前のディレクトリが作成され、その中にangularアプリケーションに必要なディレクトリ構造やファイル群が自動で生成されます。

※ Ruby on Railsの経験がある方は、「rails new my-app」コマンドと同じようなことをやってくれていると思っていただいて構いません。


my-appディレクトリに移動し、angularサーバを起動します。

$ cd my-app
$ ng serve --open

 *--open は「ブラウザを自動で立ち上げてね」の意味です。--openを省略して、手動でwebブラウザ起動後にURL(後述)を入力する方法でも構いません。

 

下記のように「Welcome to app」画面が表示されていれば、正常に動作しています。

f:id:nhnaoto:20170924142448p:plain

なお、AngularアプリケーションのデフォルトのURLは、http://localhost:4200/ になります。

参考URL

Angular公式サイト QuickStart

 

以上。