Angularヒーローチュートリアル1

はじめに

公式サイトのチュートリアルを整理がてらまとめています。

構造の基礎

Angular CLIをインストール

ターミナル

$ npm install -g @angular/cli

これでngコマンドを使用できます。

初期アプリケーションを作成

ターミナル

$ ng new angular-tour-of-heroes

このコマンドで作成されるのは

• angular-tour-of-heroesというアプリケーションのディレクトリ

そのディレクトリ下に

• 初期スケルトンアプリケーションプロジェクト(src)
• エンドツーエンドのテストプロジェクト(e2e)
• その他の設定ファイル

主に記述していくのはsrcディレクトリの中のファイルです。

このコマンドを打った時点では、初期のwelcomeページが出力されます。

ターミナル

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

こんなん出てきましたね。

基本の構造

src/appを見てみると6個くらいファイルがありますが、この中で3つ

• app.component.ts
• app.component.html
• app.component.css

が重要です。これらによってサイトの見かけが出来上がります。

動作の確認

まず、app.component.tsのtitle変数とapp.component.htmlを以下のように変更します。元々あったHTMLは全部消しちゃいます。

app.component.ts

  title = 'Tour of Heros';

app.component.html

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

そしてlocalhostを見てみると、、、

こんなん出てきました。
つまり、ts(typescript)ファイルでtitle変数に代入された値がHTMLファイルで使用できるということです。

共通のスタイルを整える

src/style.cssというファイルがあり、ここでアプリケーション全体のスタイルを決めます。

style.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[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

localhostは

こんな感じになりました。