プログラミング

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

プログラミング
この記事は約3分で読めます。
スポンサーリンク

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

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

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

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

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

Angular

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

スポンサーリンク

開発環境

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

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

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

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

[Angular]Angular4の環境構築手順まとめ
Angular4の勉強してみようと思って、環境構築の方法を調べてたら、npmを使ってAngularをインストールする必要...

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

開発環境セットアップ

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

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

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の知識を深めていきたいと思います!!

スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

  1. I don’t normally comment but I gotta tell appreciate it for the post on this one :D.

タイトルとURLをコピーしました