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

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

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

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

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

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

angular.io

Angular

https://angular.io

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

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

開発環境

macOS : Sierra 10.12.6
node : 8.4.0
npm : 5.3.0
Angular : 4.3.6

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

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

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

CodeLab

2017.08.25

[Angular] Angular 4 の環境構築手順まとめ

https://codelab.website/npm-angular4-install

Angular 4 の勉強してみようと思って、環境構築の方法を調べてたら、 npm を使って Angular をインストールする必要があるみたいなので、実際にインストールした時の手順をまとめました。Angular 4 の環境構築には npm をインストールする前に Node.js のインストールが必要ですが、 Node.js のインストール手順については、こちらを参考にしてもらえればと思います。https://codelab.website/mac-nodejs-install/npm ( Node Packaged Module )とはhttps://www.npmjs.com/Node.js のパッケージマネージャです。 Node.js をインストール...

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

開発環境セットアップ

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 を編集する

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

src/app/app.component.ts

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

src/app/app.component.css

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

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

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

最後に

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

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

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

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