JavaScriptプログラムに関する各種メモ書き

Angular8 の インストールと Hello World

● Angular8 の インストールと Hello World

● yarn のインストール

brew install yarn
brew upgrade yarn
yarn -v

● angular のインストール

yarn global add @angular/cli

● angular のプロジェクトを作成する

cd <任意のディレクトリ>
ng new test-angular-app

● angular のテストアプリを起動する

cd test-angular-app
ng serve

http://localhost:4200/
にアクセスします。

● Hello World と Angular のバージョン表示

app.component.scss

.version {
  th,td {
    border: solid #999 1px;
  }
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component2.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public versionInfo = VERSION;
  title = 'タイトルテスト Hello! Angular';
  desc = '説明文です';
}

app.component2.html

<h1>{{ title }}</h1>
<div>{{ desc }}</div>

Angularバージョン
  <table class="version">
    <tr>
      <th>full</th>
      <th>major</th>
      <th>minor</th>
      <th>patch</th>
    </tr>
    <tr>
      <td>{{versionInfo.full}}</td>
      <td>{{versionInfo.major}}</td>
      <td>{{versionInfo.minor}}</td>
      <td>{{versionInfo.patch}}</td>
    </tr>
  </table>

でバージョンが表示されます。

No.1645
12/25 17:16

edit