コース概要
はじめに
- 0]とは?
- Angular vs React vs Vue
- 0]の概要 17の機能とアーキテクチャ
- 開発環境のセットアップ
はじめに
- 0] CLIを使用して新しいAngular 17プロジェクトを作成する
- プロジェクト構造とファイルの探索
- アプリケーションの実行と提供
- 補間と式を使ったデータの表示
コンポーネント
- 0] 17 におけるコンポーネントの役割を理解する
- コンポーネントの作成と使用
- 入力と出力を使用してコンポーネント間でデータを渡す
- コンポーネントのライフサイクルフックの使用
ディレクティブ
- 構造ディレクティブと属性ディレクティブの違いを理解する
- ngIf、ngFor、ngSwitch などの組み込みディレクティブの作成と使用
- カスタムディレクティブの作成と使用
パイプ
- 0] 17におけるパイプの目的を理解する
- 日付、通貨、json などの組み込みパイプの作成と使用
- カスタムパイプの作成と使用
サービス
- サービスの役割を理解する Angular 17
- サービスの作成と使用
- プロバイダを使った依存関係の注入
モジュール
- モジュールの役割を理解する Angular 17
- モジュールの作成と使用
- モジュールのインポートとエクスポート
データバインディング
- 一方向データバインディングと双方向データバインディングの違いを理解する
- プロパティ・バインディング、イベント・バインディング、バナナ・イン・ア・ボックス構文の作成と使用
- テンプレート参照変数の使用
ルーティング
- 0] 17におけるルーティングの役割を理解する
- ルートの作成と設定
- routerLink と router.navigate() を使ってルート間を移動する
- ルートパラメータ、クエリパラメータ、フラグメントを使う
フォーム
- テンプレート駆動型フォームとリアクティブ型フォームの違いを理解する
- フォームコントロール、フォームグループ、フォーム配列などを使ったフォームの作成とバリデーション
- required、minLength、maxLength などの組み込みバリデータの使用法
- カスタムバリデータの作成と使用
HTTP クライアント
- 0] 17 における HTTP クライアントの役割を理解する
- バックエンドサービスと通信するための HTTP リクエストの作成と使用
- observable を使用して非同期データストリームを処理する
- インターセプターを使用してHTTPリクエストやレスポンスを変更したり処理したりする
新しい、宣言的な制御フロー
- 新しいテンプレート制御ブロック構文と、条件付きレンダリング、ループ処理、空のコレクションの処理などの一般的なタスクを簡素化する方法について説明します。
- if、@else、@switch、@case、@default、@for、@emptyなどの新しいブロックの使用例を示します。
- ngIf、*ngSwitch、*ngFor などの新しい構文と以前の構文を比較する。
- 新しい制御ブロックがシグナルを使ったゾーンレスアプリケーションをどのようにサポートするかについて言及する。
遅延ロードブロック
- 遅延ロードの概念と、それが Web アプリケーションのパフォーマンスとユーザー体験をどのように向上させるかを説明します。
- ブロックのコンテンツとその依存関係の遅延ロードを可能にする新しい@deferコントロールブロックの紹介
- コンポーネント、ディレクティブ、パイプ、アニメーション、スタイルの読み込みなど、さまざまなシナリオで @defer ブロックを使用する例を示します。
- deferブロックが新しいビュー遷移APIとどのように連携するかについて言及する
ビュー遷移 API
- 開発者がビュー間のアニメーションと遷移をカスタマイズできるようにする、ビュー遷移 API の目的と利点について説明します。
- ビュー遷移 API の使用を可能にする新しい withViewTransitions ディレクティブの紹介
- withViewTransitionsディレクティブを、フェード、スライド、ズーム、フリップなどのさまざまな遷移タイプで使用する例を示します。
- ビュー遷移APIがAngularルータとブラウザ履歴でどのように動作するかについて言及する
その他の機能と改善点
- 0]17が提供するその他の機能や改善点を簡単にまとめます:
- Component.stylesを文字列として渡すことができるようになりました。
- Angularのアニメーションコードを遅延ロード可能にした。
- TypeScript 5.2のサポート
- コアとなるシグナルAPIが安定しました。
- Node.js v16のサポートが削除され、最小サポートバージョンはv18.13.0になりました。
- Esbuildがデフォルトのビルダーとなり、デフォルトの開発サーバーはViteを使用する。
まとめと次のステップ
要求
- 2]、CSS、Javaのスクリプトを理解していること
- 6]とRxJSの経験
- Web開発経験
対象者
- 0]17を使用してダイナミックでレスポンシブなWebアプリケーションを作成する方法を学びたい開発者
- 旧バージョンのAngularからスキルアップしたい開発者
- 0]17の新機能や改善点を知りたいプログラマー
お客様の声 (10)
The practical experience of actually working with the code
Chad Roskuge - ALTRON
コース - AngularJS Basics
interesting showing the topic
Adam Boroch - SPOC S.A.
コース - Angular JavaScript
The labs were interesting and probably the most useful learning tool to me. Anything I missed or forgot about was relearned or reinforced in the labs.
Joseph Fuerst
コース - Building Web Apps using the MEAN stack
あなたのジョークが好きでした
Dermot - Griffiths & Armour
コース - Angular 2 Fundamentals
Machine Translated
I mostly enjoyed the hands-on training code.
Tomislav Brajkovic - HSE - Healthlink
コース - Angular 4: Create Single-Page Applications Using HTML, CSS and JavaScript
ステップごとの分析。コードの各行の説明。コース中に発生したすべての問題はうまく解決され、Łukasz はその理由を教えてくれました。また、紹介された優れたプラクティスも気に入りました。TDD スタイルに納得したことは一度もありません。単に、役に立たず、時間をかける価値もないと感じていたからです。Łukasz は TDD の多くの利点を指摘し、私の意見は完全に変わりました。
Michał Uściński - Devapo Sp. z o. o.
コース - Testing Angular Applications
Machine Translated
część o RxJS
Kacper - INWEBIT Sp. z o.o.
コース - Reactive Programming with Angular RxJS
I liked the communication and way of passing knowledge.
Marcin Wojdowski - PSI Polska Sp. z o.o.
コース - Angular 5
Good material! The trainer is a really nice guy which helps a lot!
Xander Knol - Conclusion Learning Centers
コース - Angular 6
Good examples and interactive course !