Angular コーディングスタイルガイド

      
/* avoid */import {Component, NgModule, OnInit} from '@angular/core';import {BrowserModule} from '@angular/platform-browser';import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';interface Hero {  id: number;  name: string;}@Component({  selector: 'app-root',  template: `      <h1>{{title}}</h1>      <pre>{{heroes | json}}</pre>    `,  styleUrls: ['../app.component.css'],})export class AppComponent implements OnInit {  title = 'Tour of Heroes';  heroes: Hero[] = [];  ngOnInit() {    getHeroes().then((heroes) => (this.heroes = heroes));  }}@NgModule({  imports: [BrowserModule],  declarations: [AppComponent],  exports: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}platformBrowserDynamic().bootstrapModule(AppModule);const HEROES: Hero[] = [  {id: 1, name: 'Bombasto'},  {id: 2, name: 'Tornado'},  {id: 3, name: 'Magneta'},];function getHeroes(): Promise<Hero[]> {  return Promise.resolve(HEROES); // TODO: get hero data from the server;}
    

      
import {AppComponent} from './app/app.component';import {bootstrapApplication} from '@angular/platform-browser';bootstrapApplication(AppComponent);
    

      
import {Component} from '@angular/core';/* avoid */@Component({  standalone: true,  selector: 'tohHeroButton',  templateUrl: './hero-button.component.html',})export class HeroButtonComponent {}
    

      
import {Component} from '@angular/core';/* avoid */// HeroComponent is in the Tour of Heroes feature@Component({  standalone: true,  selector: 'hero',  template: '',})export class HeroComponent {}
    

      
import {Component} from '@angular/core';/* avoid */// UsersComponent is in an Admin feature@Component({  standalone: true,  selector: 'users',  template: '',})export class UsersComponent {}
    

      
import {Component} from '@angular/core';@Component({  template: '<div>hero component</div>',  standalone: true,  selector: 'toh-hero',})export class HeroComponent {}
    

      
import {Component} from '@angular/core';@Component({  template: '<div>users component</div>',  standalone: true,  selector: 'admin-users',})export class UsersComponent {}
    

      
import {Directive} from '@angular/core';/* avoid */@Directive({  standalone: true,  selector: '[validate]',})export class ValidateDirective {}
    

      
import {Directive} from '@angular/core';@Directive({  standalone: true,  selector: '[tohValidate]',})export class ValidateDirective {}
    

      
プロジェクトルート├── src│ ├── app│ │ ├── core│ │ │ └── exception.service.ts|spec.ts│ │ │ └── user-profile.service.ts|spec.ts│ │ ├── heroes│ │ │ ├── hero│ │ │ │ └── hero.component.ts|html|css|spec.ts│ │ │ ├── hero-list│ │ │ │ └── hero-list.component.ts|html|css|spec.ts│ │ │ ├── shared│ │ │ │ └── hero-button.component.ts|html|css|spec.ts│ │ │ │ └── hero.model.ts│ │ │ │ └── hero.service.ts|spec.ts│ │ │ └── heroes.component.ts|html|css|spec.ts│ │ │ └── heroes.routes.ts│ │ ├── shared│ │ │ └── init-caps.pipe.ts|spec.ts│ │ │ └── filter-text.component.ts|spec.ts│ │ │ └── filter-text.service.ts|spec.ts│ │ ├── villains│ │ │ ├── villain│ │ │ │ └── …│ │ │ ├── villain-list│ │ │ │ └── …│ │ │ ├── shared│ │ │ │ └── …│ │ │ └── villains.component.ts|html|css|spec.ts│ │ │ └── villains.module.ts│ │ │ └── villains-routing.module.ts│ │ └── app.component.ts|html|css|spec.ts│ │ └── app.routes.ts│ └── main.ts│ └── index.html│ └── …└── node_modules/…└── …
    

      
import {NgModule} from '@angular/core';import {BrowserModule} from '@angular/platform-browser';import {RouterModule} from '@angular/router';import {AppComponent} from './app.component';import {HeroesComponent} from './heroes/heroes.component';@NgModule({  imports: [    BrowserModule,    RouterModule.forChild([{path: '04-08', component: AppComponent}]),  ],  declarations: [AppComponent, HeroesComponent],  exports: [AppComponent],})export class AppModule {}
    

      
プロジェクトルート├──src├──├──app├──├──├── shared├──├──├──└── shared.module.ts├──├──├──└── init-caps.pipe.ts|spec.ts├──├──├──└── filter-text.component.ts|spec.ts├──├──├──└── filter-text.service.ts|spec.ts├──├──└── app.component.ts|html|css|spec.ts├──├──└── app.module.ts├──├──└── app-routing.module.ts├──└── main.ts├──└── index.html└── …
    

      
import {Component} from '@angular/core';/* avoid */@Component({  standalone: true,  selector: '[tohHeroButton]',  templateUrl: './hero-button.component.html',})export class HeroButtonComponent {}
    

      
<!-- avoid --><div tohHeroButton></div>
    

      
import {Component} from '@angular/core';import {Observable} from 'rxjs';import {Hero, HeroService} from './shared';import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common';/* avoid */@Component({  standalone: true,  selector: 'toh-heroes',  template: `    <div>      <h2>My Heroes</h2>      <ul class="heroes">        @for (hero of heroes | async; track hero) {          <li (click)="selectedHero=hero">            <span class="badge">{{hero.id}}</span> {{hero.name}}          </li>        }      </ul>      @if (selectedHero) {        <div>          <h2>{{selectedHero.name | uppercase}} is my hero</h2>        </div>      }    </div>  `,  styles: [    `    .heroes {      margin: 0 0 2em 0;      list-style-type: none;      padding: 0;      width: 15em;    }    .heroes li {      cursor: pointer;      position: relative;      left: 0;      background-color: #EEE;      margin: .5em;      padding: .3em 0;      height: 1.6em;      border-radius: 4px;    }    .heroes .badge {      display: inline-block;      font-size: small;      color: white;      padding: 0.8em 0.7em 0 0.7em;      background-color: #607D8B;      line-height: 1em;      position: relative;      left: -1px;      top: -4px;      height: 1.8em;      margin-right: .8em;      border-radius: 4px 0 0 4px;    }  `,  ],  imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe],})export class HeroesComponent {  heroes: Observable<Hero[]>;  selectedHero!: Hero;  constructor(private heroService: HeroService) {    this.heroes = this.heroService.getHeroes();  }}
    

      
import {Component, EventEmitter} from '@angular/core';/* avoid */@Component({  standalone: true,  selector: 'toh-hero-button',  template: `<button type="button"></button>`,  inputs: ['label'],  outputs: ['heroChange'],})export class HeroButtonComponent {  heroChange = new EventEmitter<any>();  label: string = '';}
    

      
import {Component, EventEmitter, Input, Output} from '@angular/core';@Component({  standalone: true,  selector: 'toh-hero-button',  template: `<button type="button">{{label}}</button>`,})export class HeroButtonComponent {  @Output() heroChange = new EventEmitter<any>();  @Input() label = '';}
    

      
import {Component, EventEmitter, Input, Output} from '@angular/core';/* avoid pointless aliasing */@Component({  standalone: true,  selector: 'toh-hero-button',  template: `<button type="button">{{label}}</button>`,})export class HeroButtonComponent {  // Pointless aliases  @Output('heroChangeEvent') heroChange = new EventEmitter<any>();  @Input('labelAttribute') label!: string;}
    

      
<!-- avoid --><toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()"></toh-hero-button>
    

      
/* avoid */import {Component, OnInit} from '@angular/core';import {HttpClient} from '@angular/common/http';import {Observable} from 'rxjs';import {catchError, finalize} from 'rxjs/operators';import {Hero} from '../shared/hero.model';const heroesUrl = 'http://angular.io';@Component({  standalone: true,  selector: 'toh-hero-list',  template: `...`,})export class HeroListComponent implements OnInit {  heroes: Hero[];  constructor(private http: HttpClient) {    this.heroes = [];  }  getHeroes() {    this.heroes = [];    this.http      .get(heroesUrl)      .pipe(        catchError(this.catchBadResponse),        finalize(() => this.hideSpinner()),      )      .subscribe((heroes: Hero[]) => (this.heroes = heroes));  }  ngOnInit() {    this.getHeroes();  }  private catchBadResponse(err: any, source: Observable<any>) {    // log and handle the exception    return new Observable();  }  private hideSpinner() {    // hide the spinner  }}
    

      
import {Component, OnInit} from '@angular/core';import {Hero, HeroService} from '../shared';@Component({  standalone: true,  selector: 'toh-hero-list',  template: `...`,})export class HeroListComponent implements OnInit {  heroes: Hero[] = [];  constructor(private heroService: HeroService) {}  getHeroes() {    this.heroes = [];    this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes));  }  ngOnInit() {    this.getHeroes();  }}
    

      
import {Component, EventEmitter, Output} from '@angular/core';/* avoid */@Component({  standalone: true,  selector: 'toh-hero',  template: `...`,})export class HeroComponent {  @Output() onSavedTheDay = new EventEmitter<boolean>();}
    

      
<!-- avoid --><toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>
    

      
import {Component} from '@angular/core';import {Hero} from '../shared/hero.model';import {NgFor} from '@angular/common';import {HeroComponent} from '../hero/hero.component';/* avoid */@Component({  standalone: true,  selector: 'toh-hero-list',  template: `    <section>      Our list of heroes:      @for (hero of heroes; track hero) {        <toh-hero [hero]="hero"></toh-hero>      }      Total powers: {{totalPowers}}<br>      Average power: {{totalPowers / heroes.length}}    </section>  `,  imports: [NgFor, HeroComponent],})export class HeroListComponent {  heroes: Hero[] = [];  totalPowers: number = 0;}
    

      
import {Component} from '@angular/core';import {HeroComponent} from '../hero/hero.component';import {Hero} from '../shared/hero.model';import {NgFor} from '@angular/common';@Component({  standalone: true,  selector: 'toh-hero-list',  template: `    <section>      Our list of heroes:      @for (hero of heroes; track hero) {        <toh-hero [hero]="hero"></toh-hero>      }      Total powers: {{totalPowers}}<br>      Average power: {{avgPower}}    </section>  `,  imports: [NgFor, HeroComponent],})export class HeroListComponent {  heroes: Hero[];  totalPowers = 0;  // testing harness  constructor() {    this.heroes = [];  }  get avgPower() {    return this.totalPowers / this.heroes.length;  }}
    

      
import {Component, Input} from '@angular/core';@Component({  standalone: true,  selector: 'toh-hero',  template: `...`,})export class HeroComponent {  @Input() id = 'default_id';}
    

      
import {Component, Input} from '@angular/core';@Component({  standalone: true,  selector: 'toh-hero',  template: `...`,})export class HeroComponent {  @Input() id?: string;  process() {    if (this.id) {      // ...    }  }}
    

      
import {Component, Input} from '@angular/core';@Component({  standalone: true,  selector: 'toh-hero',  template: `...`,})export class HeroComponent {  // The exclamation mark suppresses errors that a property is  // not initialized.  // Ignoring this enforcement can prevent the type checker  // from finding potential issues.  @Input() id!: string;}
    

      
import {Directive, HostListener} from '@angular/core';@Directive({  standalone: true,  selector: '[tohHighlight]',})export class HighlightDirective {  @HostListener('mouseover') onMouseEnter() {    // do highlight work  }}
    

      
<div tohHighlight>Bombasta</div>
    

      
import {Directive, HostBinding, HostListener} from '@angular/core';@Directive({  standalone: true,  selector: '[tohValidator]',})export class ValidatorDirective {  @HostBinding('attr.role') role = 'button';  @HostListener('mouseenter') onMouseEnter() {    // do work  }}
    

      
import {Directive} from '@angular/core';@Directive({  standalone: true,  selector: '[tohValidator2]',  host: {    '[attr.role]': 'role',    '(mouseenter)': 'onMouseEnter()',  },})export class Validator2Directive {  role = 'button';  onMouseEnter() {    // do work  }}
    

      
import {Injectable} from '@angular/core';import {HttpClient} from '@angular/common/http';import {Hero} from './hero.model';@Injectable()export class HeroService {  constructor(private http: HttpClient) {}  getHeroes() {    return this.http.get<Hero[]>('api/heroes');  }}
    

      
import {Injectable} from '@angular/core';@Injectable({  providedIn: 'root',})export class Service {}
    

      
import {Inject} from '@angular/core';import {HttpClient} from '@angular/common/http';import {HeroService} from './hero.service';/* avoid */export class HeroArena {  constructor(    @Inject(HeroService) private heroService: HeroService,    @Inject(HttpClient) private http: HttpClient,  ) {}}
    

      
import {Injectable} from '@angular/core';import {HttpClient} from '@angular/common/http';import {HeroService} from './hero.service';@Injectable()export class HeroArena {  constructor(    private heroService: HeroService,    private http: HttpClient,  ) {}  // test harness  getParticipants() {    return this.heroService.getHeroes();  }}
    

      
import {Component} from '@angular/core';/* avoid */@Component({  standalone: true,  selector: 'toh-hero-button',  template: `<button type="button">OK</button>`,})export class HeroButtonComponent {  onInit() {    // misspelled    console.log('The component is initialized');  }}
    

      
import {Component, OnInit} from '@angular/core';@Component({  standalone: true,  selector: 'toh-hero-button',  template: `<button type="button">OK</button>`,})export class HeroButtonComponent implements OnInit {  ngOnInit() {    console.log('The component is initialized');  }}