基本コマンド
// node.jsのバージョン確認
node -v
// Angular CLIインストール
npm install -g @angular/cli
// Angular Version確認
ng version
// Angular のバージョンアップ
npm uninstall -g @angular/cli
npm cache verify // キャッシュの整合性確認
npm cache clean // キャッシュ削除
npm install -g @angular/cli
//
// アプリケーションのAngularバージョンアップ
// 【オプション】 --allow-dirty --force
// 【メモ】バージョンは一気に上げることはできず、１つずつ上げる必要があるようです。
//
ng update @angular/core@バージョン @angular/cli@バージョン
// Angular アプリケーション
ng new アプリ名
// Angularのバージョン指定する場合
npx @angular/cli@バージョン番号 new プロジェクト名
cd アプリ名
// アプリ起動
ng serve
// コンポーネント作成
ng generate component コンポーネント名
// サービス作成
ng generate service サービス名
HTML出力方法
1. マスタッシュ構文
できること
- tsファイルに定義している変数や関数を呼び出しての結果出力
- 通貨フォーマット
HTMLファイルの記述
<p>金額：{{ 1000 * 1.1 | currency: "JYP" }}</p>
HTML出力結果
<p>金額：￥1,000</p>
2. 属性
属性値設定
[属性]="プロパティ"
イベント属性設定
JavaScriptイベントの「on」を除外した文字列をイベントに記載する。
例： click, change, blur, keypress, keydown, keyup, etc
(イベント)="メソッド"
属性値参照
<input type="text" #price (blur)="check(price.value)" />
- #price は、「id="price"」と同じ意味
- price.value は「document.getElementById('price').value」と同じ意味
Styleバインディング
[style.CSSプロパティ]="値"
CSSプロパティには、colorやfont-sizeなどを指します。
<p [style.color]="'#ff0000'" [style.font-size.pt]="36">こんにちは。</p>
文字列はシングルクォーテーションで囲む必要あり。
属性ディレクティブ：ngClass, ngStyle
[ngClass]="プロパティ|オブジェクト"
[ngStyle]="プロパティ|オブジェクト"
コンポーネントcssファイル
.l { font-size: 36pt; }
.b { font-weight: bold; }
.c { color: #f00; }
コンポーネントtsファイル
myClass={
'l': false,
'b': true,
'c': true
};
myStyle={
'border-style': 'double',
'border-color': 'blue'
}
コンポーネントhtmlファイル
<p [ngClass]="myClass">まいど</p>
<p [ngStyle]="myStyle">おおきに</p>
出力結果
- 「まいど」は、太字の赤文字で出力される
- 「おおきに」は、青い二重線で囲まれている
構造ディレクティブ：条件表示
*ngIf
*ngIf="条件"
*ngFor
*ngFor="let 変数 of 配列; index as 変数"
「*ngFor」の「index」以外にもローカル変数があり。「count, first, last, even, odd」
https://angular.io/api/common/NgForOf#local-variables
[ngSwitch], *ngSwitchCase, *ngSwitchDefault
[ngSwitch]="プロパティ"
*ngSwitchCase="値"
*ngSwitchDefault
<div [ngSwitch]="greetingTime">
<p *ngSwitchCase="'morning'">おはようございます。</p>
<p *ngSwitchCase="'noon'">おはようございます。</p>
<p *ngSwitchCase="'afternoon'">おはようございます。</p>
<p *ngSwitchDefault>おはこんばんちは。</p>
</div>
文字列の場合、シングルクォーテーションで囲む必要があり。
起動コンポネントの設定
１．app.module.ts の bootstrap を importしているコンポーネントに置き換える
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SampleComponent } from './sample/sample.component';
@NgModule({
declarations: [
AppComponent,
SampleComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [SampleComponent]
})
export class AppModule { }
２．index.htmlのコンポーネントタグを書き換える
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-sample></app-sample>
</body>
</html>
関連記事
参考資料
- 『Angular超入門』 著者：掌田 津邪乃
- npx を利用して特定バージョンの Angular プロジェクトを作成する