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 を利用したアプリ開発の基本を勉強していきたいと思います。
コメント