Angular CLI で作成したプロジェクトを使用して、Angular の理解を深めるためにアレコレすることを目的としたものです。 したがって、完全に個人での利用を目的としたものであり、更新のたびに以前の機能が無くなることがあります。
学習の内容が気になる場合は各ブランチをご参照ください。
なお develop ブランチには各ブランチで学習/実装した機能をマージしております。 表示される画面に違いはありますが、コンポーネントやサービス、ディレクティブにおける基本的な実装内容に大きな違いはありません。
develop ブランチの内容は 以下の環境で実行・確認しています。 他のブランチの確認バージョンについては、後述の各ブランチ の README をご参照下さい。
| 環境 | バージョン | 備考 |
|---|---|---|
| Angular CLI | v18.0.4 | ng version で確認 |
| Angular | v18.0.3 | 同上 |
| Angular Material | v18.0.3 | 同上 |
| Angular CDK | v18.0.3 | 同上 |
| RxJS | v6.6.7 | 同上 |
| TypeScript | v5.4.5 | 同上 |
| zone.js | v0.14.7 | 同上 |
| Node.js | v20.14.0 | 同上 |
| npm | v10.7.0 | 同上 |
| ngx-toastr | v16.1.0 | package.json で確認 |
Angular のバージョン詳細( ng version の結果 )
% ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 18.0.4
Node: 20.14.0
Package Manager: npm 10.7.0
OS: darwin x64
Angular: 18.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.4
@angular-devkit/build-angular 18.0.4
@angular-devkit/core 18.0.4
@angular-devkit/schematics 18.0.4
@angular/cli 18.0.4
@schematics/angular 18.0.4
rxjs 6.6.7
typescript 5.4.5
zone.js 0.14.7基本的にそのとき確認した内容ごとにブランチを切ります。 現在は次のブランチがあります。
- develop
- GitHub 上のデフォルトブランチ
- 他のブランチで確認したコードを取り込んだブランチ
- HTML のレイアウトやスタイルは変えているが､Angular の実装は大きく変えていない
- ブランチを切り替えずにそれぞれのコードを確認できることが目的
- feat_life_cycle_docheck
- Angular コンポーネントのライフサイクルの ngDoCheck について確認するためのブランチ
- Qiita の [Angular] ライフサイクルメソッドをみる(ngDoCheck) で扱った
- feat_life_cycle_aftercontent
- Angular コンポーネントのライフサイクルの ngAfterContentInit と ngAfterContentChecked について確認するためのブランチ
- Qiita の [Angular] ライフサイクルメソッドをみる(ngAfterContentInit と ngAfterContentChecked) で扱った
- feat_life_cycle_afterview
- Angular コンポーネントのライフサイクルの ngAfterViewInit と ngAfterViewChecked について確認するためのブランチ
- Qiita の [Angular] ライフサイクルメソッドをみる(ngAfterViewInit と ngAfterViewChecked) で扱った
- feat_reference_component
- Angular コンポーネントで子コンポーネントや外部コンテンツの参照を取得する動きを確認するためのブランチ
- Qiita の [Angular] 子コンポーネントや外部コンテンツの参照を取得する で扱った
- feat_parent_child
- Angular コンポーネントで親子関係にあるコンポーネント間でのデータ受け渡しの動きを確認するためのブランチ
- Qiita の [Angular] 親子関係にあるコンポーネント間でデータの受け渡しを行う で扱った
- feat_create_service
- Angular サービスの生成と利用についての動きを確認するためのブランチ
- Qiita の [Angular] Angular CLI によるサービスの生成 で扱った
- feat_share_service
- Angular サービスによるコンポーネント間のデータ共有を確認するためのブランチ
- Qiita の [Angular] サービスを使用してデータをコンポーネント間で共有する で扱った
- feat_http_client
- Http モジュールを利用した Http クライアントの実装を確認するためのブランチ
- Qiita の [Angular] HTTPクライアント(RESTクライアント)を実装する で扱った
- feature/validation
- Angular による validation 機能を確認するためのブランチ
- Qiita の [Angular] 標準機能を利用して validation を実現する で扱った
- feat_generics
- TypeScript のジェネリックで、引数で渡されたインスタンスのメソッドを使うための実装を確認するためのブランチ
- Qiita の [TypeScript] ジェネリックで引数で渡されたインスタンスのメソッドを使いたい で扱った
- feat_directive
- ディレクティブの自作について確認するためのブランチ
- Qiita の [Angular] 属性ディレクティブを自作する で扱った
- feat_directive_event
- イベント処理を伴うディレクティブについて確認するためのブランチ
- Qiita の [Angular] 属性ディレクティブにイベント処理を登録する で扱った
- feat_directive_validation
- ディレクティブに検証機能( validation )を設ける方法について確認するためのブランチ
- Qiita の [Angular] 属性ディレクティブにvalidation機能を設ける で扱った
- feat_reactive_form
- ReactiveFormsModule を使って statusChanges で validation の状態遷移を検知する方法について確認するためのブランチ
- Qiita の [Angular] ReactiveFormsModuleを使ってFormの作成とvalidationを実現する で扱った
- feat_switch_tab
- ngComponentOutlet を使ったタブの実装を通じてコンポーネントの動的切り替えを確認するためのブランチ
- Qiita の [Angular] ngComponentOutlet を使ってタブを実装する で扱った
- feat_routing
- Routing による画面繊維の確認するためのブランチ
- Qiita の [Angular] ルーティング による画面遷移 で扱った
- feat_routing_another
- Routing による画面繊維の確認するためのブランチ(画面そのものの切り替えを試す)
- 上記ブランチと同じく Qiita の [Angular] ルーティング による画面遷移 で扱った
- feat_modal
- ngComponentOutlet を使って modal の実装を試すブランチ
- Qiita の [Angular] ngComponentOutlet を使ってモーダルダイアログを実装する で扱った
- feat_csv
- CSVデータをバックエンドから取得してファイル出力する実装を試すブランチ
- Qiita の [Angular] CSV ファイルを出力したときにやったこと で扱った
- feat_zip
- base64 文字列化したZIPファイルをバックエンドから取得してファイル出力する実装を試すブランチ
- Qiita の [Angular] base64 文字列をバイナリに戻してダウンロードする で扱った
- feature/speech-to-text/use-webspeechapi
- WebSpeechAPI を使った音声認識と文字起こしの実装を試すブランチ
- feature/speech-to-text/use-aws-transcribe-streaming
- AWS Transcribe Streaming を使った音声認識と文字起こしの実装を試すブランチ
- feature/investigate/angular-material
- Angular Material の検証を行うブランチ
- feature/use-toastr
- ngx-toastr の使用感を検証するブランチ