Angular Webアプリ開発入門4

はじめに

前回は、雛形からAngularプロジェクトを自動生成して実行してみた。
今回は、自動生成されたAngularプロジェクトがどのような構成になっているのか、どこをどのように修正して、自分が望む動作にカスタマイズできるのかを学ぶ。

Angularアプリを構成する要素

エクスプローラーウインドウでは、開いたプロジェクトのフォルダ名が一番上に大文字で表示される。その下に、含まれているファイルやフォルダがツリー構造で表示されている。
最初に開くと下記3つのフォルダがあり、その下にいくつかのファイルがある。
※Visual Studio Codeを使用

  •  e2e
  •  src
  •  node_module

 

 

 

 

 

 

 

 

 

プログラムを格納するsrcフォルダ

開発するプログラムはsrcフォルダの左側の三角形マークをクリックし展開すると、その中に下記のフォルダやファイルが格納されている。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

修正する機会が多いものを列挙しておく。

appアプリケーションを構成するフォルダ
asset画像や動画など、ブラウザでアクセスしたときに参照させたいファイル群を配置するフォルダ
faviconこのアプリのアイコン。タイトルバーやお気に入りで使われる
index.htmlブラウザが最初にアクセスするときに表示されるテンプレートファイル
main.tsブラウザが最初にアクセスするよきに実行されるTypeScriptファイル
style.cssindex.htmlに適用されるスタイルシート

 

ページを構成する3つのファイル

Angularアプリは、3つのファイルで、ユーザーに表示するページを構成するのか基本

1. テンプレートファイル(.html)
ユーザーに表示されるHTMLファイルのテンプレート。「テンプレート」と呼ばれるのは、普通のHTMLではなく、特殊な要素(タグ)を記述することで、TypeScriptのプログラム実行結果を好きな場所に差込むなどの、プログラム連携が出来る。


2. TypeScriptファイル(.ts)
実行されるプログラムを構成する。TypeScript言語で書くが、ブラウザで実行するときは、JavaScriptに変換される。


3. CSSファイル(.css)
HTMLの見栄えを設定するCSSファイル。テンプレートファイルがユーザーに表示されるときに適用される。

Angularはこれら3つを、それぞれ「HTML」、「JavaScript」、「CSS」の3種類のファイルに変換する。
ブラウザは、この変換されたファイルを参照することで事項結果を表示している。

最初にアクセスしたときに表示されるページを構成するファイル

  1. index.html
  2. main.ts
  3. style.css

index.htmlを確認する

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>AngularTest</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-root></app-root>」要素がある。

ここで扱っているHTMLは、TypeScriptのプログラムと連動しており、「Welcome to APP!」や「Here are some links to help uou start:」 などのメッセージ、そしてAngularの画像などはTypeScriptのプログラムから埋め込まれている。その埋め込みが「<app-root></app-root>」である。

ページを構成する部品となるコンポーネント

Angularでは、ページを構成する部品として「コンポーネント」という仕組みが提供されている。コンポーネントとは、「<app-root></app-root>」のようなタグをコ述すると、その要素に対応した部品を、そこに差込める仕組みである。この仕組みでページを部品化する。
Angularで開発するときはページを作るのではなく、コンポーネントを作り、そのコンポーネントにア合わせてページを作っていく。よって、inidex.hrmlを編集するようなことはない。

コンポーネントはsrcフォルダの下に格納するの慣例。コンポーネントもページを構成するのが慣例。
コンポーネントもページを構成する場合と同じように「テンプレート(.html)「TypeScriptのプログラム(.ts)」「CSS(,css)」で構成され更に攻勢され、それに追加して、もう1つ、単体テストをするときに使われるテスト用の[.spec.ts」となる。

Abgularアプリにはメインとなるコンポーネント、それを「ルートコンポーネント」と呼ぶ。
ルートコンポーネントはapp.componentという名前のファイルで構成される。また、appフォルダには、アプリケーション全体のプログラムを構成されるモジュールと呼ばれるプログラムが「app.module.ts」が格納されている。

フォルダまたはファイル名

用途

app.module.tsモジュールを構成するファイル
app.component.cssルートコンポーネントのレイアウトを構成するCSSファイル
app.component.htmlルートコンポーネントを構成するHTMLファイル
app.component.tsルートコンポネートを構成するTypeScriptファイル
app.component.spec.tsルートコンポーネントを構成する単体テスト用のTypeScriptファイル

 

ルートコンポーネントのプログラムを確認する

app.component.tsを確認してみる

import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})

export class AppComponent {
title = ‘AngularTest’;
}

コンポーネントの名称
export class コンポーネント名 {
…このなかにプログラムを書く…

app.component.tsはは8~10行目に「AppComponent」という名前のコンポーネントであり、そのなかにの「title = ‘AngularTest’;」というプログラム構造だとわかる。

識別名やテンプレート、CSSとの関係を結びつけるデコレータ

コンポーネントでは、テンプレートから参照されるときの識別名や結びつけるテンプレート、CSSとの関係を定義する。

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})

「@」で始まる設定はTypeScriptに対して、動作の設定地を与える命令であり「デコレータ」と呼ばれる

import { Component } from ‘@angular/core’;

 

設定値意味
selector識別名。このコンポーネントを他のHTMLファイルから参照するときの名称‘app-root’,
templateUrlテンプレートファイル名‘./app.component.html’,
styleUrlsCSSファイル名。全体を「[  ]」で囲み、複数値は、「,」で区切った入れるの形にしなければならない‘./app.component.css’

 

テンプレートと差込む値の関係

デコレータによって差込まれている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>

 

2点の箇所に着目する
1. 画像がバイナリデータとして設定されている
→これはHTML5の仕様
2. 「{{tittle}}」という表記がある
→この「{{}}」で囲まれた表記は「コンポーネントのプログラムによって定義されている値を差込む」というAngularにおける特別な表記である

利用するコンポーネントのを定義するモジュール

app.module.tsファイルは、アプリケーション全体の構造を定義するTypeScriptファイルであり、どのコンポーネントやライブラリを読み込むのか設定する。

import {BrowserModule }from‘@angular/platform-browser’;

import {NgModule }from‘@angular/core’;

import {AppRoutingModule }from‘./app-routing.module’;

import {AppComponent }from‘./app.component’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule

],

providers: [],

bootstrap: [AppComponent]

})

exportclassAppModule { }

終わりに

1.ページはテンプレート、TypeScript、CSSで構成される

2.ページはコンポーネントを利用する
ページではコンポーネントと呼ばれる部品を読み込んでぺージが構成される。
コンポーネントも同様に、テンプレート、Typescript、CSSで構成される。

3.ページにはコンポーネントのデータ「{{プロパティ}}」という表記で差込める

4.コンポーネントを追加するには「ng g component コンポーネント」を実行する。
「ng g component コンポーネント」を実行すると、appフォルダの下にコンポーネント名のフォルダができ、テンプレート、Typescript、CSSが作成される。
このとき、app.module.tsファイルに作られたコンポーネントを参照するための設定が追加され、作成したコンポーネントが利用可能になる。

次回は入力フォームを作ってみようと思う。

コメント