Tour of Heroesをやってみる1

公式チュートリアル

しばらく別業務で忙しくAngularから離れていたのでリハビリがてら公式チュートリアルの

Tour of Heroes

をやってみようと思います。

環境は前回の記事のものをそのまま流用します。

wadada420.hatenablog.com

公式サイトの流れにしたがって始めていきます。

The Application Shell

１.環境整備

Tour of Heroesのチュートリアルを始めるにあたって、必要な環境を用意します。

まず、公式コマンドラインツールであるAngular cliをインストールするために次のコマンドを実行します。

npm install -g @angular/cli

 このツールをインストールすることで簡単にAngularアプリを立ち上げることができます。

2.Angularアプリの立ち上げ

次のコマンドを実行してTour of Heroesようの新規アプリを構築します。

ng new angular-tour-of-heroes

 このコマンドを実行すると実行ディレクトリ配下に新たにangular-tour-of-heroesが作成されていることが確認できるかと思います。

それでは、次のコマンドを実行してアプリを起動します。

cd angular-tour-of-heroes

ng serve --open

この様に初期のwebアプリケーションが立ち上がるのを確認できます

Angularのcomponentを弄ってみる

 次は、Angularプロジェクトのファイルを編集してタイトルを変更します。

まずは、app.component.tsを編集します

ファイルの

title = 'app';

の箇所を次のように編集します。

title = 'Tour of Heroes';

 次は、app.component.htnlを編集します。

ファイルの

<h1>

Welcome to {{title}}!

</h1>

の箇所を次のように編集します。

<h1>

{{title}}

</h1>

 最後に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;

}

ここまで編集したら、実行されている画面が次のように変化していると思います。

 最初に実行した画面に比べてスタイルとタイトルが変化してることが分かるとおもいます。

これで、チュートリアル「The Application Shell」は終了です。

次回は、「The Hero Editor」をやっていきたいと思います。