1.インストール
2.モジュールの作成
3.コンポーネントの作成
4.ダウングレード
5.ルーティング
6.文字列補間（単方向バインディング）
7.プロパティバインディング（単方向データバインディング）
8.イベントバインディング（単方向データバインディング）
8.双方向データバインディング
9.ngIf
10.ngFor
11.PIPE
12.@Input
13.@Output
14.EventEmitter
15.Bootstrap
16.Service
17.navigateとnavigateByUrl
18.Location
19.ActivatedRoute
20.Form
npm i -g @angular/cli@16.2.10
npm uninstall -g @angular/cli
npm cache clean --force
ng new my-app(nombre de aplicacion)</p>
ng generate module nombre-del-modulo
ng g m nombre-del modulo
import{ NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { MiComponente } from './mi-componente.component'
@NgModule({<br>
declarations: [MiComponente],
imports: [CommonModule],
exports: [MiComponente]
})
export class MiModulo {}
ng generate component nombre-del componente
ng g c nombre-del componente
npm start<br>
Actively supported versions https://angular.io/guide/versions Node.js
nvm install 18.10.0 // to install the version of node.js I wanted
nvm use 18.10.0 // use the installed version
Angular (Downgrade @angular-devkit/build-angular)
npm list @angular-devkit/build-angular
npm install @angular-devkit/build-angular@16.2.10 --save-dev
異なるビューやコンポーネントをナビゲーションバーのURLに基づいて表示するための仕組み
1.ルーティングモジュールの作成: 多くのプロジェクトでは、ルーティングを管理するために専用のモジュール（通常は AppRoutingModule）を作成
ng generate module app-routing --flat --module=app
2.ルートの定義
3.＜router-outlet＞の使用: 通常は app.component.html）に を配置
4.ナビゲーションリンクの設定: routerLink ディレクティブを使って、異なるルートへのナビゲーションリンクを設定
One Way Binding コントローラーからビュー
二重中括弧 {{ }} を使って、コンポーネントの TypeScript クラスからテンプレート（HTML）にデータをバインド
<h1>{{expression}}</h1>
<img src="{{expression}}" />
<div [class]="expression" ></div>
<img [bind-src]="expression" />
文字列の連結、算術演算、メソッドの呼び出しなども可能
One Way Binding コントローラーからビュー
コンポーネントのクラスプロパティとテンプレート内の HTML 要素プロパティを結びつける重要な機能
プロパティバインディングは角括弧 [] を使って行われます。これは、コンポーネントのプロパティを HTML 要素のプロパティにバインドするために使用される。
ExampleComponent の userName プロパティがテキストボックスの value 属性にバインドされています。このため、テキストボックスには初期値として "John Doe" が表示される。
属性バインディング: DOM の属性にバインドする。例: <div [attr.role]="myRole">
クラスバインディング: CSS クラスにバインドする。例: <div [class.special]="isSpecial">
スタイルバインディング: インラインスタイルにバインドする。例: <div [style.color]="isSpecial ? 'red' : 'green'
ビューからコントローラー
テンプレート（HTML）内のイベント（ユーザーの操作など）をコンポーネントのメソッドにバインドするためのメカニズム
（反応させたいDOMイベントの名前）＝”イベントがトリガーされたときに実行されるコンポーネントのメソッド”
コンポーネント内でのメソッド定義
イベントバインディングに関連付けられたメソッドは、コンポーネントのクラス内に定義されます。
イベントオブジェクトの使用
イベントハンドラーには、イベントオブジェクトへのアクセスが可能です。
$event はクリックイベントのマウスイベントオブジェクトを表します。
Two Way Binding
双方向バインディングでは、以下の二つのプロセスが組み合わさっています：
プロパティバインディング: コンポーネントのプロパティがテンプレートの属性にバインドされ、コンポーネントの状態がテンプレートに反映されます。
イベントバインディング: テンプレート内のユーザーのアクション（例えば、テキストボックスへの入力）がコンポーネントのメソッドにバインドされ、それによってコンポーネントの状態が更新されます。
Angular では、[(ngModel)] ディレクティブを使って双方向バインディングを実現します。これは、特にフォーム要素での使用に適しています。
この例では、username というコンポーネントのプロパティが 要素の value 属性にバインドされています。ユーザーがテキストボックスに何かを入力すると、username プロパティが自動的に更新されます。同様に、username プロパティの値がプログラム的に変更されると、テキストボックスの表示内容も更新されます。
FormsModule をインポートする
FormsModule を @angular/forms パッケージからインポート
通常、app.module.ts ファイル内で行う。
NgModule デコレータの imports 配列に FormsModule を追加
FormsModule は主にテンプレート駆動フォーム（Template-driven Forms）で使用されます。リアクティブフォーム（Reactive Forms）を使用する場合は、代わりに ReactiveFormsModule をインポートする必要があります。
1: ReactiveFormsModule のインポート
ReactiveFormsModule のインポート:
通常、アプリケーションのルートモジュール（多くの場合は app.module.ts）で行う。
NgModule デコレータに追加:
2: リアクティブフォームの使用
テンプレート駆動フォームとリアクティブフォーム、同一アプリケーション内で両方を使用することが可能。ただし、同一のフォーム内で混在させることはできない 。
特定の条件が真（
true）の場合にのみ、DOM上に要素を表示するために使用。条件がfalse の場合、要素はDOMから完全に削除。
*ngIf で使用される条件は、通常、コンポーネントの TypeScript クラス内で定義されたプロパティに基づいています
else 条件を使用して、条件が false の場合に別のテンプレートを表示することもできます。
この例では、showMessage が false の場合、「メッセージはありません。」というテキストを含む
要素が表示されます。
*ngFor は *ngFor="let item of items" の形式で使用され、ここで items は配列やオブジェクトのリストを表し、item はリスト内の個々のアイテムを表すローカル変数です。
ループ中の各アイテムのインデックスや他の有用な変数にアクセスすることもできる。
この場合、let i = index で各アイテムのインデックスにアクセスし、1から始まる番号と共にアイテムを表示。
大きなリストや複雑なオブジェクトを含むリストを扱う際には、パフォーマンスを最適化するために trackBy 関数を使用することが推奨されます。これにより、Angular はオブジェクトのアイデンティティを追跡し、必要なときのみ DOM を更新します。
親 ⇒ 子
1.子コンポーネントに @Input プロパティを定義
2.親コンポーネントから子コンポーネントにデータを渡す
子 ⇒ 親
1.子コンポーネントに @Output プロパティを定義
2.親コンポーネントでイベントを受け取る
カスタムイベントをコンポーネント間で送信するために使用されるオブジェクト。これは主に子コンポーネントから親コンポーネントへのデータの伝達に利用される
1.EventEmitterのインポート
2.EventEmitterのインスタンスの作成
3.親コンポーネントでのイベントの受信
親コンポーネントのテンプレートで、子コンポーネントのイベントにリスナーを設定
親コンポーネントのクラスで、イベントが発火したときに実行する関数を定義
npm install bootstrap jquery @popperjs/core
angular.JSON
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
アプリケーション全体で使用される共有データやロジックをカプセル化するためのもの。
コンポーネント間でのデータ共有、API呼び出し、ユーザー認証、ロギングなどの機能を提供するために使用
1.サービスの作成
2.サービスの実装
my-service.service.ts
必要なロジックやデータアクセスのメソッドを定義
3.サービスの注入と使用
コンポーネントのコンストラクター内でサービスを注入
navigate
this.router.navigate(['/path', { queryParams: { page: 1 } }]);
navigateByUrl
this.router.navigateByUrl('/path?page=1');
1.インポート
import { Location } from '@angular/common';
2.コンポーネントでの注入
constructor(private location: Location) { }
3.メソッドの使用
戻るボタン
goBack(): void {
this.location.back();
}
URL取得
currentUrl(): string {
return this.location.path();
}
URL変更（ブラウザの履歴に追加せずに）
replaceUrl(path: string): void {
this.location.replaceState(path);
}
まずコンポーネントに注入
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ルートパラメータの取得：URLの動的セグメント（例えば、/product/:id の :id）
ngOnInit() {
this.route.paramMap.subscribe(params => {
const productId = params.get('id');
// パラメータ 'id' の値を使用する
});
}
クエリパラメータの取得:URLのクエリパラメータ（例えば、?search=text の search）
ngOnInit() {
this.route.queryParamMap.subscribe(queryParams => {
const searchQuery = queryParams.get('search');
// クエリパラメータ 'search' の値を使用する
});
}
フラグメントの取得:URLのフラグメント（例えば、#section1 の section1）
ngOnInit() {
this.route.fragment.subscribe(fragment => {
// URLのフラグメントを使用する
});
}
データの取得:静的データやリゾルバ経由で取得されたデータ
ngOnInit() {
this.route.data.subscribe(data => {
// ルートに関連するデータを使用する
});
}
1.ReactiveFormsModuleのインポート