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

ANGULAR

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

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

Angularの解説シリーズです。

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

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

この記事を読むと・・・
  • 画面にデータを表示させる事ができる
Angularを使いこなそう!

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

作りたいもの

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

初期設定

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

環境がない人はcodesansboxを使ってね!

アプリケーションの作成

ng new アプリケーション名

ルーティングの質問

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

拘りがなければNo

使いたいCSSの形式

? Which stylesheet format would you like to use?

拘りがなければCSS

✔ Packages installed successfully.
Successfully initialized git.

と表示されたらOKだよ!

アプリケーションの起動

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!';
}
AppComponentクラスのプロパティを画面に表示するよ!

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関数が使える事がわかりました!

toUpperCase()は小文字を大文字にする関数だよ!

まとめ

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

タイトルとURLをコピーしました