Tour of Heroesをやってみる1
公式チュートリアル
しばらく別業務で忙しくAngularから離れていたのでリハビリがてら公式チュートリアルの
をやってみようと思います。
環境は前回の記事のものをそのまま流用します。
公式サイトの流れにしたがって始めていきます。
The Application Shell
1.環境整備
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-size: 250%;}h2, h3 {color: #444;font-weight: lighter;}body {margin: 2em;}body, input[text], button {color: #888;}/* everywhere else */* {}
ここまで編集したら、実行されている画面が次のように変化していると思います。
最初に実行した画面に比べてスタイルとタイトルが変化してることが分かるとおもいます。
これで、チュートリアル「The Application Shell」は終了です。
次回は、「The Hero Editor」をやっていきたいと思います。