【Angular】公式チュートリアルまとめ

Angularの公式チュートリアルを

やったので、そのまとめ。

 

ショッピングサイトの構築を実際に手を動かしながら、

チュートリアルを進めることができる。

開発環境も「stackblitz」というサービスを使うことで、

Webブラウザ上でコーディングを行えた。

単純に読み進め手を動かすだけなら

2時間もかからないと思う。

 

色々調べながら進めて4時間くらやってた気がする。

何となーくでしかまだ理解できていない。

本などで、勉強したい。

 

用語集

単語を理解することしかできなかった。

仕組みや構成、構造を別途勉強しないとだめそう。

 

コンポーネント

新規でコンポーネントを作成すると下記4つのファイルをできる。

 ・html

  ・css

  ・spec.ts:これはテスト用のファイル。

  ・ts

CLIコマンド

 ng generate component 名前

サービス

ビジネスロジックを作成する為に利用する。

データを共有できる。

コンポーネントは受け渡しに注力する必要がある。

サービスをインポートして利用する。

 コマンド

  ng generate service 名前

*ngはA[ng]ularという意味らしい。

*ngFor

 For文

 特殊構文

index

First

Last

Even

odd

 例

 

*ngFor=“let 配列名 of 名前; index as I(ここが特殊構文)”

*ngIf

  If文

 例

*ngIf=“値、条件式”

値のみを指定したとき、体だと表示されないなどあるみたい

*ngSubmit

 フォームの値を送るやつ

プロパティバインディング

 [] : このカッコを使うとデータを引き渡せる。

 例:

[titele]= “紐づける内容(配列内のKey名など”

 バインディング=束縛、紐づけるということ

補間

 {}:式を埋め込む、変数名、配列の中に保持されてるプロパティなど

イベントバインディング

  ():関数を紐づける

Router

ページ遷移を実現するやつ

app.module.ts

これの

RputerModule

に作成されるURLになる部分を定義する

例:

{ path: ‘URLになる所’ , component: 指定のコンポーネント }

[routerLink]

リンクの指定

HttpClient

Angularに用意されているので、

importする。

 (import { HttpClientModule } from ‘@angular/common/http’;)

Json形式のデータなどを取得できる

パイプ(あんまりよくわかってない。

async

コンポーネントが存在する限り、最新の値を常に取得する。

コンポーネントが破棄されると停止する。

チェックアウトフォームモデル

Angularで用意されている、フォームを作るやつ

入力する内容などを定義する

小ネタ

+:パラメータを数値にすることができる

まとめというか感想

typeScriptの内容も理解している必要がありそう。

テスト用のファイルができるのが、

感心した。また、テスト駆動開発についても

ちらっと本で読んだので、そこと繋がった感じがする。

テスト駆動開発の本も読んでみたい。

最近、読みたい本がありすぎて時間が足りない。笑