Angular アプリケーションの起動
[前回の記事] https://qiita.com/toguchi/items/1e630b572a6d934d6242
前回までに作成したひな形「myApp」を修正しながら、Angularの基本について学んでいきます。
作成されたひな形は既にサンプルのページが追加されているので、myAppフォルダに移動して下記のコマンドを実行しましょう。
ng serve --open
そうするとWebブラウザが起動して下記のページが表示されるとアプリケーションの起動に成功です。
先程も説明したとおり、これは自動的に作成されたアプリケーションのサンプルですが、
ng serveコマンドを利用して、アプリケーションを起動できることが確認できました。
一度ng serveコマンドを利用してアプリケーションを起動しておくと、コードを修正するたびに自動的に保存・ビルドが行われますので、画面も自動的に更新されます。
また、起動しているAngular アプリケーションには http://localhost:4200 でアクセスできますので、Webブラウザを誤って閉じてしまった場合はその都度 http://localhost:4200 にアクセスしてください。
Angular アプリケーションの概要
アプリケーションが起動することを確認したらいよいよ中身の説明に移っていきます。
myAppフォルダの中にあるsrcフォルダを開いてみると index.html を含む様々なファイルが存在しています。
Webアプリケーションのコードはindex.htmlに記述してあるのが一般的ですが、index.htmlには下記のようなコードがあるだけで、先程画面に現れた「Welcome to myApp!」といった文言や他のページへのリンクなどは存在していません。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
実は、アプリケーションの中身は別のファイルに記述してあります。
appフォルダの中を見てみましょう。
Angularではコンポーネントという概念でページを構築していきます。
コンポーネントとは部品のようなイメージで、この部品の表示を切り替えることでページの遷移を表現したり、複雑なページを構築していく事ができるのです。
今起動しているアプリケーションは、１つのページで構成されたシンプルな作りになっており、下記3つのファイルでページが構築されているのです。
- app.component.css
- app.component.html
- app.component.ts
app.component.html はHTMLファイルですので、画面の構成を担っています。また、app.component.cssは一般的なWebページ同様にページの見た目を定義しています。
Angularで要になるのは、3つ目のapp.component.tsファイルです。
これはTypescriptという言語のファイルですが、基本的にはjavascriptと同様の使い方ができます。
ここでは、これら3つのファイルが1セットで、1つのページを構成しているという事を覚えておきましょう。
※厳密にはコンポーネント＝部品ではありませんが、ここでは説明を省略させてください。
それではそれぞれのファイルの中身について簡単に説明します。
app.component.html
既に説明した通り、画面の構成を定義するファイルです。
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
一番初めに起動したページの中身になります。が、<h1>要素の中身をよく見てると Welcome to {{ title }} ! と記述されています。
これは、 title という変数の中身を表示する という書き方です。
ページ上では Welcome to myApp ! と表示されていることから、titleという変数の中には "myApp" という文字列が入っているはずですが、このtitleという変数はいったいどこで定義されているのでしょうか。
続いて、app.component.tsファイルを見てみましょう。
app.component.ts
ページに表示するデータや動きを記述するファイルです。
javascriptとは随分と見た目が違うことに気づいたでしょうか。
component.tsファイルは大きく、以下3つの領域に分かれています。
- import (インポート)
- @Component (コンポーネントの定義)
- export class (クラスの中身)
インポートは、別で作成した処理をこのファイルの中で利用するときに記述します。ここでは説明を省略します。
コンポーネントの定義では、htmlとcssファイルをリンクさせる役割を担っています。特別な理由がない限り編集することはないので、これも省略します。
さてページを構築していく上で実際にコードを書いていく場所は export class ～～ の中身です。
ここはページ上に表示される情報や、ボタンをクリックした際に実行する関数を定義する場所です。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myApp';
}
classの中身を見てみると、titleという変数に"myApp"という文字が代入されている事に気づくと思います。
先程のhtmlの中に {{ title }} という記述がありましたが、classの中で定義した変数を、そのままページ上に表示することができるのです。
これがAngularで特徴的なバインディングという技術になります。
新しくサブタイトルを追加して画面上に表示してみましょう。
サンプルを下記に示します。
tsファイルに subTitle という変数を追加しました
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myApp';
subTitle = "ようこそ myApp へ !!";
}
ページに表示させたいので、htmlファイルにも {{ subTitle }} を追加してみます。
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<h2>
{{ subTitle }}
</h2>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
ページに subTitle の中身が新しく表示されていますね。
このようにして、tsファイルでは情報を定義して、htmlファイルではその表示の方法や構造を定義することができる事を確認できました。
.htmlと.tsの連携のイメージ
app.component.ts で設定した変数が画面に表示されるまでの簡単なイメージです。
変数の中身を書き換えるとリアルタイムに画面に反映されますが、これをバインディングと呼びます。
次回
Angular のバインディングについて基本的な文法を学びます。