学習に使用している書籍

Angularデベロッパーズガイド

※8章→9章→その他の章 という順で読んだ方が理解しやすいような気がする

※正誤表は事前に確認しておいた方が良い。

 

環境構築

  1. NodeJsのインストール
  2. Angular CLIのインストール
    npm install -g @angular/cli​
  3. バージョンの確認
    ng version​
  4. VSCodeにAngularのプラグインをインストールする(補完が便利)

 

プロジェクトの作成

ng new {プロジェクト名}
// ルーティングを使用する場合
ng new {プロジェクト名} --routing

 

テストサーバーの起動

ng serve

 

コンポーネントの作成(+自動登録)

ng g component {コンポーネント名}

・コンポーネントの登録場所
 「app.module.ts」の「declarations:」

・再利用可能なUIブロックを作成する

・HTMLのタグのように使用する

・@Componentは@Directiveを継承している

 

ディレクティブの作成(+自動登録)

ng g directive {ディレクティブ名}

・ディレクティブの登録場所
  コンポーネントの登録場所と同じ

・DOM要素に対する振る舞いを定義する

・HTMLの属性・プロパティのように使用する

 

 サービスの作成

ng g service {サービス名}

・サービスの登録場所
 「app.module.ts」の「providers:」に手動で登録する

・app.module.tsのprovidersにサービスを記述した場合はシングルトンになる

・コンポーネントのprovidersにサービスを記述した場合は当該コンポーネントを親とするツリー内でシングルトンになる

・コンポーネントやディレクティブの中で使用する

 

パイプの作成

ng g pipe {パイプ名}

 

ガードの作成(認証関連)

ng g guard {名前}

 

モジュールの作成

// モジュールの作成
ng g module {モジュール名}

 

インターフェースの作成

ng g interface {インターフェース名}

 

Aotコンパイル

ng build --prod

 

ngModule使用時にエラーが出る場合の対処

app.module.tsにFormsModuleを追加する

...
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    FormsModule,
  ],
  providers: [
    ...
  ],
  bootstrap: [
    ...
  ]
})
export class AppModule { }

 NgModuleについて

providers サービス
declarations コンポーネント、ディレクティブ、パイプ
imports 利用するモジュール
exports 外部公開するコンポネント、ディレクティブ、モジュール
entryComponents コンパイルの際にエントリーポイントとなるコンポーネント
boostrap 起動時に使用するコンポーネント
schemas Angular管理対象外の要素や属性に対するHTMLパーサの挙動
id モジュールID
   

 

ディレクティブ

HTMLの属性・プロパティのように使用する

・ngClass:クラス属性の指定

<!-- styleA,styleBを適用する -->
<div> [ngClass]="'styleA styleB'">XXX</div>
<div> [ngClass]="['styleA','styleB']">XXX</div>

<!-- isErrorがtrueの場合にstyleA,styleBが適用される -->
<div> [ngClass]="{'styleA styleB':isError}">XXX</div>

<!-- isErrorがfalseの場合はstyleA,それ以外はstyleBを適用する -->
<div> [ngClass]="{'styleA':!isError,'styleB':isError}">XXX</div>

・ngStyle:スタイルの指定

<div [ngStyle]="{'color':'red'}">hoge</div>
<div [ngStyle]="{'color':hogeColor}">hoge</div>
<div [ngStyle]="styleA">hoge</div>

・ngFor:繰り返し

<div *ngFor="item of items">{{item}}</div>
<div *ngFor="item of items; index as idx">{{idx}}:{{item}}</div>
<div *ngFor="item of items; even as isEven; odd as isOdd">{{item}}</div>
<div *ngFor="item of items; first as isFirst; last as isLast">{{item}}</div>

 ・ngIf:条件分岐

<div *ngIf="expression">OK</p>

<ng-container *ngIf="expression; else hogeElse">
  <div>expressionがtrueの場合に表示される</div>
</ng-container>
<ng-template #hogeElse>
  <div>expressionがfalseの場合に表示される</div>
</ng-template>

<div *ngIf="expression">
   expressionがtrueの場合に表示される
</div>

 ・ngSwitch:条件分岐

  <button (click)="value1=1">1</button>
  <button (click)="value1=2">2</button>
  <button (click)="value1=3">3</button>
  <span [ngSwitch]="value1">
    <p *ngSwitchCase="1">
        Selected 1
    </p>
    <p *ngSwitchCase="2">
        Selected 2
    </p>
    <p *ngSwitchDefault>
        Selected other
    </p>
  </span>

 

ViewChildとContentChild

// app-component1のテンプレート
<app-hoge1></app-hoge1>  // [*1]

// app-component2のテンプレート
<app-component1>
   <app-hoge1></app-hoge1>  [*2]
</app-component1>

・app-component1から見た場合

    [*1]:ViewChild

    [*2]:ContentChild

 

ng-content

・ContentChildを展開する

・ng-contentについてわかりやすい説明が書かれているサイト様

https://qiita.com/ukyo/items/0e44f5f562335fd6601b

// ng-contentなし

// app-child
<div>Component Child</div>

// app-parent
<div>Component Parent</div>

// app
<app-parent>
    <app-child></app-child>
    <div>hello</div>
</app-parent>


[Out(app)]
Component Parent
// ng-contentあり

// app-child
<div>Component Child</div>

// app-parent
<div>Component Parent</div>
<ng-content></ng-content>

// app
<app-parent>
    <app-child></app-child>
    <div>hello</div>
</app-parent>


[Out(app)]
Component Parent
Component Child
hello

 

「Cannot find module 'rxjs-compat/Observable'」エラーの対処

・対処方法

npmを利用して「rxjs-compat」をインストールする

npm install --save rxjs-compat

 

deprecated

・HttpClient → HttpClientModule (@angular/common/http)

 

マテリアルデザインの導入手順

https://material.angular.io/guide/getting-started

※以下は上記サイトの説明部分を省略してほぼ転記したもの。

 

1.インストール

npm install --save @angular/material @angular/cdk @angular/animations

2.プロジェクトに追加

ng add @angular/material

3.アニメーションモジュールのインポート:app.module.ts

// アニメーションする場合(ng add した時に自動で設定してくれる)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...
imports: [BrowserAnimationsModule],

// アニメーションしない場合
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
...
imports: [NoopAnimationsModule],

4.必要に応じてマテリアルボタン等のモジュールを追加する:app.module.ts

import { MatButtonModule,... } from '@angular/material';
...
imports: [
    MatButtonModule,...
]

5.テーマのインポート:style.css

// テーマは公式サイト参照
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

6.各種コンポーネントのインストール(任意)

npm install --save hammerjs

7.マテリアルアイコンのリンクを追加:index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 

ルーティングに関して

https://angular.io/guide/router

・ルーティング設定ファイル

app-routing.module.ts

・ルーティングの書き方

const routes: Routes = [{
    path: '',
    children: [
       {
           path: パス
           component: コンポーネントの型
           children: {
              ...
           }
       },
       ...
    ]
}]

・ルーティング(リダイレクト)の書き方

{
    path: '',
    redirectTo: 'リダイレクト先'
}

・URLパラメータ

{
    // http://xxxx/person/1/ichiro/18
    path: '/person/:id/:name/:age',
    ...
}

・関連するタグ

<router-outlet></router-outlet>
<!-- ここに展開される -->

・A Link

<a routerLink="パス">ページA</a>
<a [routerLink]="['パス','パス',...]">ページA</a>

・アクティブ時に特定のスタイルを適用する

<a routerLink="/" routerLinkActive="my_class">ページA</a>

・クエリパラメータを渡す

<a routerLink="/" [queryParams]="{key:'value',...}">ページA</a>

・パラメータの取得

// URLパラメータ
this.activatedRoute.params.subscrive(p=>{
    this.somedata = p['key']
});

// クエリパラメータ
this.activatedRoute.queryParams.subscribe(p=> {
    // params: any
    this.params = p;
});

 

Rx関連のメモ(旧:書籍の記述方法 新:Angular v7)

// 旧Ver
Observable.of(true).delay(1000) 

// 新
of(true).pipe(delay(1000))
※pipeを使って繋げる
// 旧
import 'rxjs/add/operator/finally'

// 新
import { finalize } from 'rxjs/operators';
// 旧
import {Observable} from 'rxjs/Observable'

// 新
import {Observable} from 'rxjs'

 

カレントロケールに関するメモ(パイプ)

import { LOCALE_ID, InjectionToken, Inject } from '@angular/core';

...
{
    ...

    private datePipe: DatePipe;
    constructor(@Inject(LOCALE_ID) public locale: string) {
        this.datePipe = new DatePipe(locale);
    }

    ...
}

 

ng2-char

※angularのバージョン違いのせいか書籍のコードはそのままでは動作しない。
 動作させるために変更した箇所を残しておく

1. 必要なモジュールのインストール(char.jsもインストールする)

npm i --save ng2-charts chart.js

2. angular.jsonの編集(編集するファイルは「angular.json」)

"scripts" : []

の部分を以下のようにする(build,testの2か所)
※testは不要かも。

"scripts": [
    "./node_modules/chart.js/dist/Chart.min.js"
]

3. mapの修正(rxjs/operatorsのswitchMap,mapの使用方法を変更)

this.forecastObservable = this.route.params.pipe(
	switchMap(param => {
		return this.openWeatherMapService.forecast(param['city']).pipe(map ...