Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naopeke/angular-jp
Explanation in Japanese
https://github.com/naopeke/angular-jp
Last synced: about 2 months ago
JSON representation
Explanation in Japanese
- Host: GitHub
- URL: https://github.com/naopeke/angular-jp
- Owner: naopeke
- Created: 2023-12-21T09:16:48.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-30T11:53:44.000Z (11 months ago)
- Last Synced: 2024-01-30T12:53:18.942Z (11 months ago)
- Size: 36.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# INDEX
[](#)
1.[インストール](#インストール)
2.[モジュールの作成](#モジュールの作成)
3.[コンポーネントの作成](#コンポーネントの作成)
4.[ダウングレード](#ダウングレード)
5.[ルーティング](#ルーティング)
6.[文字列補間（単方向バインディング）](#文字列補間単方向バインディング)
7.[プロパティバインディング（単方向データバインディング）](#プロパティバインディング単方向データバインディング)
8.[イベントバインディング（単方向データバインディング）](#イベントバインディング単方向データバインディング)
8.[双方向データバインディング](#双方向データバインディング)
9.[ngIf](#ngif)
10.[ngFor](#ngfor)
11.[PIPE](#pipe)
12.[@Input](#@input)
13.[@Output](#@output)
14.[EventEmitter](#eventemitter)
15.[Bootstrap](#bootstrap)
16.[Service](#service)
17.[navigateとnavigateByUrl](#navigateとnavigateByUrl)
18.[Location](#location)
19.[ActivatedRoute](#activatedroute)
20.[Form](#form)
## インストール
```
npm i -g @angular/[email protected]
```
```
npm uninstall -g @angular/cli
```
```
npm cache clean --force
```
```
ng new my-app(nombre de aplicacion)
```
## モジュールの作成
```
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({
declarations: [MiComponente],
imports: [CommonModule],
exports: [MiComponente]
})
export class MiModulo {}
```
## コンポーネントの作成
```
ng generate component nombre-del componente
ng g c nombre-del componente
```
```
npm start
```
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/[email protected] --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）にデータをバインド
```
{{expression}}
![]()
```
文字列の連結、算術演算、メソッドの呼び出しなども可能
## プロパティバインディング（単方向データバインディング）
One Way Binding コントローラーからビュー
コンポーネントのクラスプロパティとテンプレート内の HTML 要素プロパティを結びつける重要な機能
プロパティバインディングは角括弧 [] を使って行われます。これは、コンポーネントのプロパティを HTML 要素のプロパティにバインドするために使用される。
ExampleComponent の userName プロパティがテキストボックスの value 属性にバインドされています。このため、テキストボックスには初期値として "John Doe" が表示される。
属性バインディング: DOM の属性にバインドする。例:
クラスバインディング: CSS クラスにバインドする。例:
スタイルバインディング: インラインスタイルにバインドする。例:
## （イベントバインディング）単方向データバインディング
ビューからコントローラー
テンプレート（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: リアクティブフォームの使用
テンプレート駆動フォームとリアクティブフォーム、同一アプリケーション内で両方を使用することが可能。ただし、同一のフォーム内で混在させることはできない 。
## ngIf
特定の条件が真（
true）の場合にのみ、DOM上に要素を表示するために使用。条件がfalse の場合、要素はDOMから完全に削除。
*ngIf で使用される条件は、通常、コンポーネントの TypeScript クラス内で定義されたプロパティに基づいています
else 条件を使用して、条件が false の場合に別のテンプレートを表示することもできます。
この例では、showMessage が false の場合、「メッセージはありません。」というテキストを含む
要素が表示されます。
## ngFor
*ngFor は *ngFor="let item of items" の形式で使用され、ここで items は配列やオブジェクトのリストを表し、item はリスト内の個々のアイテムを表すローカル変数です。
ループ中の各アイテムのインデックスや他の有用な変数にアクセスすることもできる。
この場合、let i = index で各アイテムのインデックスにアクセスし、1から始まる番号と共にアイテムを表示。
大きなリストや複雑なオブジェクトを含むリストを扱う際には、パフォーマンスを最適化するために trackBy 関数を使用することが推奨されます。これにより、Angular はオブジェクトのアイデンティティを追跡し、必要なときのみ DOM を更新します。
## Pipe
## @Input
親 ⇒ 子
1.子コンポーネントに @Input プロパティを定義
2.親コンポーネントから子コンポーネントにデータを渡す
## @Output
子 ⇒ 親
1.子コンポーネントに @Output プロパティを定義
2.親コンポーネントでイベントを受け取る
## EventEmitter
カスタムイベントをコンポーネント間で送信するために使用されるオブジェクト。これは主に子コンポーネントから親コンポーネントへのデータの伝達に利用される
1.EventEmitterのインポート
2.EventEmitterのインスタンスの作成
3.親コンポーネントでのイベントの受信
親コンポーネントのテンプレートで、子コンポーネントのイベントにリスナーを設定
親コンポーネントのクラスで、イベントが発火したときに実行する関数を定義
## 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.サービスの作成
2.サービスの実装
my-service.service.ts
必要なロジックやデータアクセスのメソッドを定義
3.サービスの注入と使用
コンポーネントのコンストラクター内でサービスを注入
## 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のインポート