【忘備】Angular チートシート

nodeバージョン切り替え（n）

$ sudo n list
node/12.18.2
node/14.15.4

$ sudo n 14.15.4

新規プロジェクト作成

$ ng n <project-name>

コンポーネント作成

$ ng g component <directory/component-name>  --routing

モジュール作成

コンポーネントをまとめてモジュールとして定義できる。

$ ng g module <directory/module-name>

こんなかんじでコンポーネントまとめておく。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { HeaderComponent } from './components/header/header.component';

@NgModule({
  declarations: [
    SidebarComponent,
    HeaderComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SidebarComponent,
    HeaderComponent
  ]
})
export class CoreModule { }

app.module.ts (ルート)から読み込むと、呼び出したいhtmlに<app-sidebar></app-sidebar>みたいな感じで記載すると呼び出せる

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

サービス作成

$ ng g service <directory/service-name>

モデル(任意のクラス)作成

モデルクラス作るときとかに使うかな

$ ng g class <directory/service-name>

(例)

$ ng g class models/user

パイプ(pipe)作成

例として、コメント日付をフォーマットするパイプ（comment-date パイプ）を作成

$ ng g pipe pipes/comment-date

pipes 配下にcommentDateクラスができるので、「transform」メソッドを以下のように書き換える。

@Pipe({
  name: 'commentDate'
})
export class CommentDatePipe implements PipeTransform {

  transform(value: number, ...args: string[]): string {
    const format = args[0] || 'yyyy年MM月dd日 HH:mm'
    return formatDate(value, format, 'en-US');
  }

}

html側では以下の感じで呼び出す。comment.dateの中に返還対象の日付が入っている。

<div>{{ comment.date | commentDate }}</div>

コメントクラスはこんな感じ

export class Comment {

  date: number;

  constructor(public user: User, public message: string) {
    this.date = Date.now();
  }

}

開発日報

窓際エンジニアの開発備忘。日報は嘘です。