【今日から携わる】Angularを試してみた（Angular入門・チュートリアル）

Angularを試してみたので共有します。
jsフレームワーク未経験の方でもできる、Angular公式チュートリアルをやってみました。
＜作業時間＞
１回目：10分
２回目：3分

Angularチュートリアル
https://angular.jp/guide/quickstart

このチュートリアルでできること

・Angularをインストール
・新規プロジェクト作成
・ブラウザで確認する
・編集する（タイトルの文言&スタイル変更）

(1)Angular CLIのインストール

Nodeのバージョンを確認

node -v
//バージョン8.xまたは10.xが必要

Angularをグローバルインストール

npm install -g @angular/cli

(2)新規プロジェクト作成

ローカルに新規フォルダを作成する。
↓↓↓
ng new my-app
//新しいワークスペースと初期アプリケーションプロジェクトを作成する
↓↓↓
Enterキーを押してデフォルト値を受ける

(3)アプリケーションをサーブ

cd my-app
//ワークスペースフォルダ（my-app）に移動
↓↓↓
ng serve --open
//--openオプションを付けてCLIコマンド ng serve を使用してサーバーを起動
↓↓↓
http://localhost:4200/
//ブラウザで開く

(4)Angularコンポーネントを編集

my-appフォルダをエディタで開く

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

//1. src/app/app.component.tsを開く
//2. title プロパティを 'my-app'から 'My First Angular App'に変更

↓変更する

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

ブラウザで確認する
http://localhost:4200/

h1のスタイルをCSSで変更する

src/app/app.component.css

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
  }

”入門”おわり

【今日から携わる】Angularを試してみた（Angular基礎・ツアー・オブ・ヒーローズ チュートリアル）