Angularチュートリアルその1 新規アプリケーション作成〜アプリケーションのタイトル編集まで

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

Angularの本家サイトのチュートリアルの「The Application Shell」の説明をしていきたいと思います。

今回は実際にアプリケーションを作成してアプリケーションのタイトルを編集してみたいと思います。

本家サイトはこちらになります。

作成するプロジェクトは「Tour of Heroes」というアプリケーションです。

作成するアプリの概要についてはこちらから確認できます。

では、早速始めていきたいと思います!

開発環境

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

Angular CLIのインストール

npmを使ってAngular CLIをインストールします。

npm install -g @angular/cli

アプリケーションを新規に作成する

ngコマンドでアプリケーションを新規に作成します。

ng new angular-tour-of-heroes

アプリケーションを起動する

新規作成したアプリケーションのフォルダに移動して、ngコマンドを利用してアプリを起動します。

cd angular-tour-of-heroes
ng serve --open

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

アプリケーションのタイトル編集

アプリケーションのタイトルを編集していきたいと思います。

app.component.tsというファイルを開いてtitleにセットする値を編集します。

export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.htmlというファイルの<h1>タグも編集します。

<h1>{{title}}</h1>

ng serveコマンドでアプリケーションを起動していれば、ファイルに変更があったら自動的に再起動されます。

編集後にブラウザを確認すると・・・

このようにタイトルが編集されていればOKです。

アプリケーションにスタイル(CSS)を追加する

アプリケーションのフォントや文字の色などを変更していきます。

srcフォルダのstyles.cssというファイルにスタイルを記述していきます。

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

これで、アプリケーションのスタイルを変更することができます。

文字の色やフォントが変更されています。

ソースコードについて

今までのソースコードはGithubにあげてますので、詳細を確認したい方はこちらからソースコードを見てもらえればと思います。

最後に

今回のチュートリアルを実施することで、Angularの新規アプリケーションの作成と画面に表示する内容の編集ができるようになりました。

次回以降もチュートリアルを進めていき、Angularを利用したアプリ開発の基本を勉強していきたいと思います。