Vue 経験者が Angular のチュートリアルを通して概要を掴む

npm install -g @angular/cli

// プロジェクト作成
ng new angular-tour-of-heroes

// ビルド vue の yarn build
ng build

// dev サーバ起動。yarn serve
ng serve

// Component や Service のテンプレートを生成してくれます
// 生成できる一覧はこちら https://angular.jp/cli/generate
// 例：次のコマンドを実行すると、以下が一式作成されます。
// hoge
//  - hoge.component.html
//  - hoge.component.scss
//  - hoge.component.spec.ts
//  - hoge.component.ts
ng generate component hoge

// 単体テスト実行。karma とのこと。yarn test:unit
ng test

// e2e テスト実行
// 以下によると、angular 標準に含まれていた protector というツールのサポートが angular 15 で終わるとのこと
// https://www.alpha.co.jp/blog/202204_01
ng e2e

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { HeroSearchComponent } from './hero-search/hero-search.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    DashboardComponent,
    HeroSearchComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false}
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world', 
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

// 次のようにして使える
<hello-world></hello-world>

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  {{ message }}
</p>

<button
  type="button"
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>


// Angular では、タグにシャープ（#）から始まる変数名をつけることで、HTML 内で使えるローカル変数を定義することができる。
// 例えば、次のように書くことで、 input タグに name というローカル変数名を付けられる。
// 宣言したローカル変数は、同じ HTML 内からアクセス可能。
// <input> 要素などの HTML 標準タグに変数名を付けた場合、変数の値はネイティブの HTML 要素なり、
// Angular コンポーネントのタグに変数名をつけると、変数の中身はコンポーネントのインスタンスになります。
<input type="text" #name>
<button (click)="onClick(name.value)">SET</button>

// *ngIf
<div *ngIf="condition; else elseBlock">
	condition === true の場合こちら
</div>
<ng-template #elseBlock>
	condition === false の場合はこっちがレンダリングされる
</ng-template>


// ngForOf
// * は短縮形
// let i=index で配列のインデックスが使える
// trackBy は一意な id 
//   .ts ファイルで trackByItems(index: number, item: Item): number { return item.id; }
//   などメソッドを用意したりする。
// Vue では :key
<div 
	*ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById"
	[class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

// 短縮じゃない版
<ng-template 
	ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

<input type="text" id="hero-name" [(ngModel)]="hero.name">

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-inout-parent',
  templateUrl: './inout-parent.component.html',
  styleUrls: ['./inout-parent.component.scss']
})
export class InoutParentComponent implements OnInit {
　// 内部変数
  name: string = '';
  nameOptions = ['Ymada', 'Sato', 'Watanabe'];

  constructor() {}
  ngOnInit(): void {}

  // 子から呼んでもらうメソッド
  selectedName(name: string) {
    this.name = name;
  }
}

<div>
  <!- 子コンポーネントを利用. selectedName イベントで selectedName メソッドを実行($event はイベントペイロード)-->
  <app-inout-child
    [nameOptions]="nameOptions"
    (selectedName)="selectedName($event)"
  >
  </app-inout-child>

  <p id="userInfo" *ngIf="name">
    name =  
    <span style="font-size: 1.5em; color: green">{{ name }}</span>
    が選ばれました。
  </p>
</div>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-inout-child',
  templateUrl: './inout-child.component.html',
  styleUrls: ['./inout-child.component.scss']
})
export class InoutChildComponent implements OnInit {

  constructor() {}
  ngOnInit(): void {}

  name: string = '';

  // 親から来た値をセット
  @Input() nameOptions: string[] = [];
  // emit するために Emitter を作成
  @Output() selectedName = new EventEmitter<string>();

  handleOnClick() {
    // イベントを emit する。親側では $event は this.name の値
    this.selectedName.emit(this.name);
  }

}

<div>
  <div class="suggestedUserNames">
    <select #selectUser [(ngModel)]="name">
      <option
      *ngFor="let name of nameOptions" // 親から来た情報を表示
      style="margin-left:15px"
      [value]="name"
      >{{ name }}</option>
    </select>
  </div>

  <div>
    <label for="userName">{{name}}</label>
    <!- 選択情報を親に emit -->
    <button (click)="handleOnClick()">"選択</button>
  </div>
</div>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { InoutParentComponent } from './inout-parent/inout-parent.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent},
  { path: 'dashboard', component: DashboardComponent},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'detail/:id', component: HeroDetailComponent},
  { path: 'inout', component: InoutParentComponent},

];

@NgModule({
  // ルートに routes を設定する
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  constructor(private http: HttpClient,
              private messageService: MessageService) { }

  private heroesUrl = 'api/heroes'; 
  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  getHeroes(): Observable<Hero[]> {
    // HttpClient の処理は Observable オブジェクトを返します。
    // pipe で取得結果の Observable オブジェクトに対して処理を行うことができます。
    // tap は Observable オブジェクトに対して同期的な処理を行う Rxjs の operator。
    // 例外時には catchError に流れます。
    return this.http.get<Hero[]>(this.heroesUrl).pipe(
      tap(heroes => this.log('fetched heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', [])))
  }
  ...
}

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[] = []

  constructor(private heroService: HeroService, private messageService: MessageService) {}

  ngOnInit(): void {
    this.getHeros()
  }

  getHeros(): void {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }
}

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'}) // アプリ全体で共有
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
	log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  // DI
  constructor(private logger: Logger) { }

  onLogMe() {
    // this.logger でアクセスできます 
    this.logger.writeCount(this.count);
    this.count++;
  }
}