Angular はじめに覚えること

# 基本コマンド

```js
// 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ファイルの記述
```html
<p>金額：{{ 1000 * 1.1 | currency: "JYP" }}</p>
```

### HTML出力結果
```html
<p>金額：￥1,000</p>
```

## 2. 属性

### 属性値設定

```html
[属性]="プロパティ"
```

### イベント属性設定
JavaScriptイベントの「on」を除外した文字列をイベントに記載する。
例： click, change, blur, keypress, keydown, keyup, etc

```html
(イベント)="メソッド"
```

### 属性値参照

```html
<input type="text" #price (blur)="check(price.value)" />
```
* #price は、「id="price"」と同じ意味
* price.value は「document.getElementById('price').value」と同じ意味

### Styleバインディング
```html
[style.CSSプロパティ]="値"
```
CSSプロパティには、colorやfont-sizeなどを指します。

```html
<p [style.color]="'#ff0000'" [style.font-size.pt]="36">こんにちは。</p>
```
文字列はシングルクォーテーションで囲む必要あり。

### 属性ディレクティブ：ngClass, ngStyle
```html
[ngClass]="プロパティ|オブジェクト"
[ngStyle]="プロパティ|オブジェクト"
```

#### コンポーネントcssファイル

```html
.l { font-size: 36pt; }
.b { font-weight: bold; }
.c { color: #f00; }
```

#### コンポーネントtsファイル

```html
myClass={
  'l': false,
  'b': true,
  'c': true
};
myStyle={
  'border-style': 'double',
  'border-color': 'blue'
}
```

#### コンポーネントhtmlファイル

```html
<p [ngClass]="myClass">まいど</p>
<p [ngStyle]="myStyle">おおきに</p>
```

#### 出力結果

* 「まいど」は、太字の赤文字で出力される
* 「おおきに」は、青い二重線で囲まれている



## 構造ディレクティブ：条件表示

### *ngIf
```html
*ngIf="条件"
```

### *ngFor
```html
*ngFor="let 変数 of 配列; index as 変数"
```

「*ngFor」の「index」以外にもローカル変数があり。「count, first, last, even, odd」
https://angular.io/api/common/NgForOf#local-variables

### [ngSwitch], *ngSwitchCase, *ngSwitchDefault
```html
[ngSwitch]="プロパティ"
*ngSwitchCase="値"
*ngSwitchDefault
```

```html
<div [ngSwitch]="greetingTime">
  <p *ngSwitchCase="'morning'">おはようございます。</p>
  <p *ngSwitchCase="'noon'">おはようございます。</p>
  <p *ngSwitchCase="'afternoon'">おはようございます。</p>
  <p *ngSwitchDefault>おはこんばんちは。</p>
</div>
```
文字列の場合、シングルクォーテーションで囲む必要があり。



# 起動コンポネントの設定

## １．app.module.ts の bootstrap を importしているコンポーネントに置き換える

```javascript
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のコンポーネントタグを書き換える

```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 フォーム (1)：基礎](https://qiita.com/thankkingdom/items/f8a670be6302471a198e)
* [Angular フォーム (2)：バリデーション](https://qiita.com/thankkingdom/items/6a32cc6edf2f431a8b43)
* [Angular 次に覚えること](https://qiita.com/thankkingdom/items/13eb62a8d35a65c819dd)

# 参考資料
* 『Angular超入門』 著者：掌田 津邪乃
* [npx を利用して特定バージョンの Angular プロジェクトを作成する](https://watermargin.net/programming/angular/npx-angular-specific-version/)