Angularメモ

Angularメモ
Angularとは
開発について

Angularとは

Googleが開発したtypescriptベースのフロントエンドwebアプリケーションフレームワーク。
半年に1度バージョンが上がるので、一年に一回は更改メンテナンスが必要になる。
Javaユーザにはなじみやすいフルスタック（＝必要なライブラリは用意されている）。

AngularJS（バージョン１）とAngularと互換性がない。
またReactやVue.jsと比べてファイル数やコード量が多い。
Angularに内蔵されている非同期ツールであるRxJSは難解。

開発について

事前準備

用意するもの
・ブラウザ（chrome）
・node.js（https://nodejs.org/ja/）⇒LTSをダウンロード
・コマンドプロンプトを開いて「npx conwsay hello」をたたいて牛のアスキーアートが表示されればOK。

インストール

npm install @angular/cli@next

※@nextは最新、という意味。バージョンを指定する場合は＠の後ろにバージョンを指定する。

インストールしたらアプリを立ち上げる。

ng serve

コンポーネントが変更されると検知して再度コンパイルして表示しなおしてくれる。

コンポーネント

画面を構成する部品。
AngularのAppcomponentは3つの部品で出来ている。
1．Typescriptクラス
2．HTMLテンプレート
3．表示を装飾するスタイルシート
 cliのコマンドで作成するとこれらを自動で作成してくれる。あとはおまけでテストコードも。
例）

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

selectorはHTML上で割り当てられる名前。htmlではこの名前を使ってデータを参照する。備考：下記のようにhtml上でデータを参照するときに｛｝を使用するがこれをinterpolation(補間)という。

{{ title }}

参考リンク： https://angular.io/guide/interpolation

styleUrlsはCSSのリンクを記載する。カンマで続けて複数読み込むことも可能。

  styleUrls: ['./test.component.css','./test.component2.css']

備考：cssの共通化について。
アプリ全体に同一のスタイルを飾る場合はルートのstyle.cssに記載すれば良い。
しかし、複数あるコンポーネントのうち、一部だけスタイルシートを共通化するということは可能だが、
コンパイルされる際にはそれぞれのコンポーネントごとにcssが生成されるためファイルサイズが大きくなる。
よって開発面で言うなれば管理がしやすいかもだが、
読み込む側のhtmlが多ければ多いほどファイル（サイズ）が大きくなるので注意が必要。
※CSSはコンポーネントごとに保有する、ということらしい。

⇒共通化を設計するならcssではなくscssとして作成し、共通スタイルシートをimportを使うと共通化しやすい。

備考：typescript中にhtmlを記載するとどうなるか
クラス内はサニタイズされて出力されるため、全部文字として扱われる。
よってhtmlタグを書いてもhtmlだと解釈されない。

備考：デバッグ方法について
フロントエンドなのでコンソールでエラーログやデバッグログを出すものらしい。

サービスクラス

サーバサイドとのやりとりはServiceクラスに任せるのが鉄板。
Serviceクラスは基本的にシングルトンなので、アプリ起動中はいろんなコンポーネントから使いまわしされる感じになる。

※使い方としては、コンポーネント側のコンストラクタにサービスクラスを記述する。

export class HogeComponent implements OnInit {
  foo: Foo[] = []; //そういうインターフェイスクラスがあると想定

  constructor(private fooService: FooService ) { } // サービスクラス呼び出し

  ngOnInit(): void {
    this.foo= this.FooService .getFoo(); // サービスクラス内のメソッドを呼び出し
  }
}

Log.log(work)

いろんな作業メモ

Angular memo1