Skip to content

Latest commit

 

History

History
360 lines (295 loc) · 17.1 KB

README.md

File metadata and controls

360 lines (295 loc) · 17.1 KB
Raw

INDEX

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>

http://localhost:4200/

ダウングレード

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.ルートの定義
Captura desde 2023-12-21 12-18-18

3.＜router-outlet＞の使用: 通常は app.component.html）に を配置
Captura desde 2023-12-21 12-18-37

4.ナビゲーションリンクの設定: routerLink ディレクティブを使って、異なるルートへのナビゲーションリンクを設定
Captura desde 2023-12-21 12-18-57

文字列補間（単方向バインディング）

One Way Binding コントローラーからビュー
二重中括弧 {{ }} を使って、コンポーネントの TypeScript クラスからテンプレート（HTML）にデータをバインド

<h1>{{expression}}</h1>
<img src="{{expression}}" />
<div [class]="expression" ></div>
<img [bind-src]="expression" />

Captura desde 2023-12-21 12-09-38

文字列の連結、算術演算、メソッドの呼び出しなども可能
Captura desde 2023-12-21 12-09-49

プロパティバインディング（単方向データバインディング）

One Way Binding コントローラーからビュー
コンポーネントのクラスプロパティとテンプレート内の HTML 要素プロパティを結びつける重要な機能
プロパティバインディングは角括弧 [] を使って行われます。これは、コンポーネントのプロパティを HTML 要素のプロパティにバインドするために使用される。
Captura desde 2023-12-21 12-29-15
ExampleComponent の userName プロパティがテキストボックスの value 属性にバインドされています。このため、テキストボックスには初期値として "John Doe" が表示される。

属性バインディング: DOM の属性にバインドする。例: <div [attr.role]="myRole">
クラスバインディング: CSS クラスにバインドする。例: <div [class.special]="isSpecial">
スタイルバインディング: インラインスタイルにバインドする。例: <div [style.color]="isSpecial ? 'red' : 'green'

（イベントバインディング）単方向データバインディング

ビューからコントローラー
テンプレート（HTML）内のイベント（ユーザーの操作など）をコンポーネントのメソッドにバインドするためのメカニズム
（反応させたいDOMイベントの名前）＝”イベントがトリガーされたときに実行されるコンポーネントのメソッド”
Captura desde 2023-12-21 12-59-34

コンポーネント内でのメソッド定義
イベントバインディングに関連付けられたメソッドは、コンポーネントのクラス内に定義されます。 Captura desde 2023-12-21 13-00-26

イベントオブジェクトの使用
イベントハンドラーには、イベントオブジェクトへのアクセスが可能です。
Captura desde 2023-12-21 13-11-35
$event はクリックイベントのマウスイベントオブジェクトを表します。

双方向データバインディング

Two Way Binding 双方向バインディングでは、以下の二つのプロセスが組み合わさっています：
プロパティバインディング: コンポーネントのプロパティがテンプレートの属性にバインドされ、コンポーネントの状態がテンプレートに反映されます。
イベントバインディング: テンプレート内のユーザーのアクション（例えば、テキストボックスへの入力）がコンポーネントのメソッドにバインドされ、それによってコンポーネントの状態が更新されます。

Angular では、[(ngModel)] ディレクティブを使って双方向バインディングを実現します。これは、特にフォーム要素での使用に適しています。
Captura desde 2023-12-21 13-39-40
この例では、username というコンポーネントのプロパティが 要素の value 属性にバインドされています。ユーザーがテキストボックスに何かを入力すると、username プロパティが自動的に更新されます。同様に、username プロパティの値がプログラム的に変更されると、テキストボックスの表示内容も更新されます。
Captura desde 2023-12-21 13-42-05

Captura desde 2023-12-21 13-42-40

Captura desde 2023-12-21 13-43-32　　

FormsModule をインポートする　　 FormsModule を @angular/forms パッケージからインポート
通常、app.module.ts ファイル内で行う。
Captura desde 2023-12-21 13-47-39

NgModule デコレータの imports 配列に FormsModule を追加
Captura desde 2023-12-21 13-48-08

FormsModule は主にテンプレート駆動フォーム（Template-driven Forms）で使用されます。リアクティブフォーム（Reactive Forms）を使用する場合は、代わりに ReactiveFormsModule をインポートする必要があります。

1: ReactiveFormsModule のインポート
ReactiveFormsModule のインポート:
通常、アプリケーションのルートモジュール（多くの場合は app.module.ts）で行う。
Captura desde 2023-12-21 13-56-45

NgModule デコレータに追加:
Captura desde 2023-12-21 13-57-33

2: リアクティブフォームの使用
Captura desde 2023-12-21 13-58-40
テンプレート駆動フォームとリアクティブフォーム、同一アプリケーション内で両方を使用することが可能。ただし、同一のフォーム内で混在させることはできない 。

ngIf

特定の条件が真（ true）の場合にのみ、DOM上に要素を表示するために使用。条件がfalse の場合、要素はDOMから完全に削除。
Captura desde 2023-12-21 14-11-00

*ngIf で使用される条件は、通常、コンポーネントの TypeScript クラス内で定義されたプロパティに基づいています
Captura desde 2023-12-21 14-12-14

else 条件を使用して、条件が false の場合に別のテンプレートを表示することもできます。
Captura desde 2023-12-21 14-13-10 この例では、showMessage が false の場合、「メッセージはありません。」というテキストを含む

要素が表示されます。

ngFor

*ngFor は *ngFor="let item of items" の形式で使用され、ここで items は配列やオブジェクトのリストを表し、item はリスト内の個々のアイテムを表すローカル変数です。
Captura desde 2023-12-21 14-18-10

ループ中の各アイテムのインデックスや他の有用な変数にアクセスすることもできる。
この場合、let i = index で各アイテムのインデックスにアクセスし、1から始まる番号と共にアイテムを表示。 Captura desde 2023-12-21 14-18-41　　

大きなリストや複雑なオブジェクトを含むリストを扱う際には、パフォーマンスを最適化するために trackBy 関数を使用することが推奨されます。これにより、Angular はオブジェクトのアイデンティティを追跡し、必要なときのみ DOM を更新します。　　 Captura desde 2023-12-21 14-20-53　　

Pipe

@Input

親　⇒　子
1.子コンポーネントに @Input プロパティを定義
Captura desde 2023-12-21 10-01-39

2.親コンポーネントから子コンポーネントにデータを渡す
Captura desde 2023-12-21 10-01-56

@Output

子　⇒　親 1.子コンポーネントに @Output プロパティを定義
Captura desde 2023-12-21 10-08-34

2.親コンポーネントでイベントを受け取る
Captura desde 2023-12-21 10-08-52

EventEmitter

カスタムイベントをコンポーネント間で送信するために使用されるオブジェクト。これは主に子コンポーネントから親コンポーネントへのデータの伝達に利用される
1.EventEmitterのインポート
Captura desde 2024-01-09 17-48-37

2.EventEmitterのインスタンスの作成
Captura desde 2024-01-09 17-49-34

3.親コンポーネントでのイベントの受信
親コンポーネントのテンプレートで、子コンポーネントのイベントにリスナーを設定
Captura desde 2024-01-09 17-50-23
親コンポーネントのクラスで、イベントが発火したときに実行する関数を定義 Captura desde 2024-01-09 17-52-24

Bootstrap

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"

    ]

Service

アプリケーション全体で使用される共有データやロジックをカプセル化するためのもの。
コンポーネント間でのデータ共有、API呼び出し、ユーザー認証、ロギングなどの機能を提供するために使用

1.サービスの作成
Captura desde 2024-01-09 17-56-41

2.サービスの実装
my-service.service.ts
必要なロジックやデータアクセスのメソッドを定義
Captura desde 2024-01-09 17-57-47

3.サービスの注入と使用
コンポーネントのコンストラクター内でサービスを注入
Captura desde 2024-01-09 17-59-06

navigateとnavigateByUrl

navigate

this.router.navigate(['/path', { queryParams: { page: 1 } }]);

navigateByUrl

this.router.navigateByUrl('/path?page=1');

Location

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);
}

ActivatedRoute

まずコンポーネントに注入

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 => {
    // ルートに関連するデータを使用する
  });
}

Form

Model Driven

1.ReactiveFormsModuleのインポート