[Angular]チュートリアルその 0 環境構築〜アプリの起動まで

Angular をチュートリアルを使って勉強する機会があったので、その時の内容について説明していきます。

Angular 4 を勉強してみようと思ったのは、最近いろんなプロジェクトでサーバサイドで Web API を開発して、クライアントサイドで jQuery で API を呼び出すことが多くなってきたので、せっかくならきちんと勉強してみようと思ったのがきっかけです。

React か Angular のどっちを勉強するか迷いましたが、設計思想とかが理解しやすそうな Angular から勉強することにしました。

React についても、機会があれば勉強してみたいと思います。

Angular については、本家サイトの方で詳細を確認してもらえればと思います。

サーバサイドは Django でクライアントサイドは Angular でゴリゴリ開発していくのが最終目標です!!

開発環境

まぁ、今時点での最新の環境になります。今回利用する Angular 4 ですが、 node 6.9 以上、 npm 3 以上でないと利用できませんので注意してください。

また、今回は Node.js とか npm の設定はすでに終わってる前提で作業を進めていきます。

Node.js とか npm のインストールや設定方法を知りたい方は、こちらを参考にしてください。

では、早速環境構築していきたいと思います。

npm を利用して Angular CLI をインストールします。

$ npm install -g @angular/cli

下記コマンドを実行してプロジェクトを新規作成します。

$ ng new my-app

「 my-app 」はプロジェクト名なので、好きな名前に変更できます。

プロジェクトを新規作成すると npm で必要なパッケージがインストールされ、アプリケーションの雛形も作成されるので、この状態でアプリケーションを実行することが可能になります。

プロジェクトのディレクトリに移動してアプリを起動します。

$ cd my-app
$ ng serve --open

ちなみに、「 --open 」（もしくは -o ）を serve コマンドのオプションに追加すると、実行時に http://localhost:4200/ の URL でブラウザが自動で開きます。

この画面が表示されれば起動成功です！！

Angular の Component を編集して、タイトル名とタイトルのスタイルを変更します。

export class AppComponent {
  title = 'My First Angular App';
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

この状態でもう一度先ほどの serve コマンドを実行すると・・・。

タイトルが変更できました！！

Angular で環境構築からアプリの起動までができるようになりました！

プロジェクト作成時に雛形も一緒に作成してくれるので、ほとんど何もしなくても、アプリを起動させることができました。

ただ、今回は Angular のチュートリアルを実施する前の下準備みたいなものなので、次回以降はもうちょっと本格的なコーディングが必要になってくるかと思います。

一つ一つ確実に Angular の知識を深めていきたいと思います！！