【Angular】データと画面を紐付けよう！【初期設定】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はデータと画面を紐付ける方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

画面にデータを表示しよう

作りたいもの

今回作りたいものは、TypeScriptで持つ値をブラウザ上に表示するアプリケーションです。

初期設定

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

アプリケーションの作成

ng new アプリケーション名

ルーティングの質問

? Would you like to add Angular routing?(y/N)

拘りがなければNo

使いたいCSSの形式

? Which stylesheet format would you like to use?

拘りがなければCSS

アプリケーションの起動

npm start

http://localhost:4200/
にアクセスし、 このような画面が表示されたら初期設定は完了です。

TypeScriptファイルを編集しよう！

app.component.ts

初期画面を構築するTypeScriptファイルは以下に格納されています

MY-APP/src/app/app.component.ts

画面データに値を表示したいので、
app.component.tsを編集しましょう。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // 対応するHTMLファイルのパス
  templateUrl: './app.component.html',
  // 対応するスタイルシートのパス
  styleUrls: ['./app.component.css'],
})　

// app.component.htmlに渡す変数
export class AppComponent {
  title = 'ページタイトル';
  name = 'サメハック';
  message = 'hello angular!';
}

HTMLファイルを編集しよう！

app.component.html

初期画面のHTMLは以下に格納されています。

MY-APP/src/app/app.component.html

マスタッシュ構文{{　}}で値を受け取ろう！

{{ 変数名 }}

HTMLにAppComponentクラスの値を表示するには、
このような記述が必要となります。

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

<p>こんにちは、{{ name }}です！</p>

このように記述することで、画面にTypeScriptで定義した値が表示できました。

マスタッシュ構文{{ }}にJavaScript式を記述しよう！

マスタッシュ構文{{ }}内はJavaScriptの世界なので、
JavaScriptの関数等も使用することができます。

messageを大文字に変換して動作確認してみましょう

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

<p>こんにちは、{{ name }}です！</p>

<!-- 元のmessage -->
<p>message・・・ {{ message }}</p>
<!-- JavaScriptの関数を使って大文字に変換 -->
<p>message.toUpperCase()・・・ {{ message.toUpperCase() }}</p>

このように、JavaScript関数が使える事がわかりました！

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram