より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

Angular知ったかして間違ったアドバイスをしたので、Angularをはじめてみる

職場で新人が分報でわからんと言っていたので、横からソース見て、コメントしたら間違ったアドバイスをしてしまったということがありました。

そもそも、自分、Angular触ったことなかったな、と。

ということで、Angularを触ってみることにしました。

angular.jp

f:id:rimever:20201214181413p:plain

とりあえず、最初のアプリは出来ました。

Tour Of Heroes

実践形式のチュートリアルとして、ツアーオブヒーローズが用意されています。英雄たちの旅行ということになるのですが、すごい名前ですね。

人材派遣会社がヒーローを管理するアプリを作りながら、Angularについて学ぶことになります。

僕らのヒーローアカデミアの世界ですね。

Angularもng serve --openで実行中であればhtmlを修正して更新すれば自動的に反映されます。

再度ビルドして実行という手間は不要です。

あと、動かしながら気付くのは、TypeScript前提であることでしょう。

なので、しっかりしたコードを書くことができます。

f:id:rimever:20201214211230p:plain

ハマったこと

htmlがおかしい

これを検知してくれませんでした。

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<div *ngIf="selectedHero">
  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name" )]> // )] ではなく /
    </label>
  </div>
</div>

HttpClientModule を宣言するとエラー

This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

以下のコマンドを実行する。

npm cache clean --force

github.com

TSLintの指摘

import fromのfromのモジュールはダブルクォーテーションだとNG

シングルクォーテーションにする。

f:id:rimever:20201214191243p:plain

不要なスペースを入れない

f:id:rimever:20201214191355p:plain

返り値がない場合はvoidを指定する

f:id:rimever:20201214191814p:plain
add(message: string): voidが望ましい。

おまけ

Angularとは英語で角ばった、無骨なという意味です。

ejje.weblio.jp