まずはAngularに慣れるために、はじめてのアプリケーションを動かしてみましょう。 Angular-CLIで生成したアプリケーションを起動するには、次のコマンドを実行します。
$ ng serve
コマンドを実行したら、Webブラウザで http://localhost:4200
にアクセスしてみましょう。
「app works!」と表示されればアプリケーションが起動できています。
それでは、アプリケーションを動かしたままソースコードを見てみましょう。
まず src/app/app.component.ts
ファイルを開いてください。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
ここでは次の4点に注目してください。
- クラスプロパティとして
title
プロパティが定義されている selector: 'app-root'
によって、コンポーネントは<app-root>
要素として定義されている- コンポーネントのテンプレートは
./app.component.html
から読み込んでいる - コンポーネントのスタイルは
./app.component.css
から読み込んでいる
次に ./app.component.html
ファイルを見てみましょう
<h1>
{{title}}
</h1>
ここで使われている、 {{title}}
は、データをテキストとして表示するための補間構文です。
では、 title
プロパティを変更してみましょう。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hello Angular!';
}
ソースコードを保存するとコンパイルが始まり、Webブラウザは自動的にページを再読込します。 表示されるテキストが変わっていることが確認できたら、次のチャプターに進みましょう!