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の内容も理解している必要がありそう。
テスト用のファイルができるのが、
感心した。また、テスト駆動開発についても
ちらっと本で読んだので、そこと繋がった感じがする。
テスト駆動開発の本も読んでみたい。
最近、読みたい本がありすぎて時間が足りない。笑