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%;
}
”入門”おわり