LUMIFY WORK Angular 12 プログラミング

このコースを学ぶ理由

この包括的な Angular 12 プログラミング コースは、理論的な学習と実践的なラボを組み合わせたもので、Angular の紹介に続いて、TypeScript、コンポーネント、ディレクティブ、サービス、HTTP クライアント、テスト、デバッグについて学習します。
このコースには、すぐに仕事に応用できる役立つ実用的な情報が満載です。シングルページブラウザアプリケーション、レスポンシブなアプリケーションなど、Angular 12開発の基礎を学びます。 webサイト、ハイブリッド モバイル アプリケーションなどです。
注記: Angular の他のバージョンに関するトレーニングも提供できます。お問い合わせいただくか、ご興味をお持ちの場合は、ぜひご連絡ください。

あなたが学ぶこと
このコースを修了すると、次のことができるようになります。

• Typescript を使用してシングルページの Angular アプリケーションを開発する
• 完全なAngular開発環境をセットアップする
• コンポーネント、ディレクティブ、サービス、パイプ、フォーム、カスタムバリデータを作成する
• Observablesを使用して高度なネットワークデータ取得タスクを処理し、RESTからデータを消費する web Angular HT TPクライアントを使用したサービスプッシュデータ接続の処理 Webソケットプロトコル
• Angular Pipesを使用してデータをフォーマットする
• 高度なAngularコンポーネントルーター機能を使用する
• 組み込みツールを使用して Angular アプリケーションをテストおよびデバッグします。

コース科目

第1章 Angularの紹介

• Angular とは何ですか?
• Angularフレームワークの中心的な機能 適切な使用例
• Angularアプリケーションの構成要素 Angularアプリケーションの基本アーキテクチャ Angularのインストールと使用
• Angularアプリケーションの構造 アプリケーションの実行
• ネイティブモバイルアプリ向けアプリケーション Angular の構築とデプロイ
• まとめ

第2章 TypeScriptの紹介

• Angular TypeScript 構文で使用するプログラミング言語
• プログラミング編集者
• 型システム – 変数の定義
• 型システム – 配列の定義
• 基本的なプリミティブ型
• 関数を入力する
• 型推論
• クラスの定義
• クラスメソッド
• 視界制御
• クラスコンストラクタ
• クラスコンストラクタ – 代替形式 初期化されていないフィールド
• インターフェース
• ES6 モジュールの操作
• var と let
• 矢印関数
• 矢印関数のコンパクト構文テンプレート文字列
• クラス内のジェネリック
• 関数内のジェネリック
• まとめ

第3章 コンポーネント

• コンポーネントとは
• 元ampコンポーネント
• Angular CLI を使用してコンポーネントを作成する
• コンポーネントクラス
• @Component デコレータ
• モジュールコンポーネントテンプレートにコンポーネントを登録する
• Example: HelloComponent テンプレート
• Example: コンポーネントを使用する HelloComponent クラス
• アプリケーションを実行する
• コンポーネント階層
• アプリケーションルートコンポーネント
• ブートストラップ File
• コンポーネントライフサイクルフック例ampライフサイクルフック
• CSS スタイル
• まとめ

第4章 コンポーネントテンプレート

• テンプレート
• テンプレートの場所
• 口ひげ {{ }} 構文
• DOM要素プロパティの設定
• 要素本文テキストの設定
• イベントバインディング
• 式イベント ハンドラー
• デフォルト処理の防止
• 属性ディレクティブ
• CSSクラスを変更してスタイルを適用する
• Example: ngClass
• スタイルを直接適用する
• 構造指令
• 条件付きでテンプレートを実行する
• Example: ngIf
• ngFor を使用したループ
• ngFor ローカル変数
• コレクションの操作例ample – アイテムの削除
• ngFor によるアイテム追跡、ngSwitch による要素の入れ替え、要素のグループ化
• テンプレートリファレンス変数の概要

第5章 コンポーネント間通信

• コミュニケーションの基本
• データフローアーキテクチャ
• 子どもがデータを受け取るための準備
• 親からデータを送信
• プロパティ設定の詳細
• コンポーネントからのイベントの発動
• @Output() 例ample – 子コンポーネント @Output() 例ample – 親コンポーネント
• 完全な双方向バインディング
• 親での双方向データバインディングの設定
• まとめ

第6章 テンプレート駆動型フォーム

• テンプレート駆動型フォーム
• フォームモジュールのインポート
• 基本的なアプローチ
• フォームの設定
• ユーザー入力の取得
• ngForm属性の省略
• フォームを初期化する
• 双方向データバインディング
• フォームの検証
• Angular バリデーター
• クラスを使用した検証状態の表示 追加の入力タイプ
• チェックボックス
• 選択（ドロップダウン）フィールド
• 選択（ドロップダウン）日付フィールドのレンダリング オプション
• ラジオボタン
• まとめ

第7章 リアクティブフォーム

• 反応フォーム終了view
• ビルディングブロック
• ReactiveFormsModuleをインポートする
• フォームを構築する
• テンプレートをデザインする
• 入力値の取得
• 入力フィールドの初期化
• フォーム値の設定
• 入力変更の購読
• 検証
• 組み込みバリデータ
• 検証エラーを表示
• カスタムバリデーター
• カスタムバリデータの使用
• カスタムバリデーターへの設定の提供
• FormArray – 入力を動的に追加する
• FormArray – コンポーネントクラス
• FormArray – テンプレート
• FormArray – 値
• サブ FormGroups – コンポーネント クラス
• サブフォームグループ – HTML テンプレート
• サブフォームグループを使用する理由
• まとめ

第8章 サービスと依存性注入

• サービスとは何ですか?
• 基本的なサービスの作成
• サービスクラス
• 依存性注入とは何ですか?
• サービスインスタンスの注入
• インジェクター
• インジェクター階層
• ルートインジェクターでサービスを登録する
• コンポーネントのインジェクタを使用してサービスを登録する
• 機能モジュールインジェクターを使用してサービスを登録する
• サービスを登録する場所はどこですか?
• 代替実装を提供する他の成果物における依存性注入依存性注入と@Host
• 依存性注入と@Optional
• まとめ

第9章 HTTPクライアント

• Angular HT TP クライアント
• HT TPクライアントの使用 – 終了view
• HttpClientModule のインポート
• HttpClient を使用したサービス
• GETリクエストを行う
• Observable オブジェクトは何をするのでしょうか?
• コンポーネント内でのサービスの使用
• PeopleService クライアント コンポーネントのエラー処理
• エラーオブジェクトのカスタマイズ
• POSTリクエストの作成
• PUTリクエストの作成
• 削除リクエストの作成

第10章 パイプとデータのフォーマット

• パイプとは何ですか?
• 内蔵パイプ
• HTML テンプレートでのパイプの使用 パイプの連鎖
• 国際化パイプ (i18n) ロケールデータの読み込み
• デートパイプ
• パイプ番号
• 通貨パイプ
• カスタムパイプを作成する
• カスタムパイプExample
• カスタムパイプの使用
• ngFor でパイプを使用する
• フィルターパイプ
• パイプのカテゴリー: 純粋と不純
• まとめ
• ピュアパイプEXample
• 不純なパイプExample
• まとめ

第11章 シングルページアプリケーションの概要

• シングルページアプリケーション（SPA）とは？ Web 応用
• SPAワークフロー
• シングルページアプリケーションアドバンtages HTML5 履歴 API
• SPAの課題
• Angular を使用した SPA の実装の概要

第12章 Angularコンポーネントルーター

• コンポーネントルーター
• View ナビゲーション
• Angular ルーター API
• ルーター対応アプリケーションの作成
• ルーティングされたコンポーネントのホスティング
• リンクとボタンを使ったナビゲーション
• プログラムによるナビゲーション
• ルートパラメータの受け渡し
• ルートパラメータを使ったナビゲーション
• ルートパラメータ値の取得
• ルートパラメータを同期的に取得する
• ルートパラメータを非同期的に取得する
• クエリパラメータ
• クエリパラメータの指定
• クエリパラメータを非同期的に取得する
• マニュアルの問題 URL エントリーとブックマーク
• まとめ

第13章 高度なHTTPクライアント

• リクエストオプション
• HttpResponse オブジェクトを返す
• リクエストヘッダーの設定
• 新しいオブザーバブルの作成
• シンプルな Observable の作成
• Observable コンストラクタメソッド Observable 演算子
• マップ演算子とフィルター演算子
• flatMap() 演算子
• tap() 演算子
• zip() コンビネータ
• HT TP レスポンスのキャッシュ
• 連続 HT TP 呼び出しの実行
• 並列呼び出しを行う
• catchError() によるエラー オブジェクトのカスタマイズ
• パイプラインのエラー
• エラー回復
• まとめ

第14章 Angularモジュール

• なぜ Angular モジュールなのか?
• モジュールクラスの構造
• @NgModule プロパティ
• 機能モジュール
• Exampモジュール構造
• ドメインモジュールを作成する
• ルーティング/ルーティングモジュールペアを作成する
• サービスモジュールを作成する
• 共通モジュールの作成

第15章 高度なルーティング

• ルーティング対応機能モジュール
• 機能モジュールの使用
• 機能モジュールの遅延読み込み
• 機能モジュールコンポーネントへのリンクの作成
• 遅延読み込みについての詳細
• モジュールのプリロード
• デフォルトルート
• ワイルドカードルートパス
• リダイレクト先
• 子ルート
• 子ルートの定義
• 子ルートの場合
• 子ルートのリンク
• ナビゲーションガード
• ガード実装の作成
• ルートでのガードの使用
• まとめ

第16章 Angularアプリケーションの単体テスト

• Angular アーティファクトのユニットテスト
• テストツール
• 一般的なテスト手順
• テスト結果
• Jasmine テストスイート
• Jasmine 仕様 (ユニットテスト)
• 期待（アサーション）
• マッチャー
• Exampマッチャーの使用例
• notプロパティの使用
• ユニットテストスイートのセットアップとティアダウン
• ExampbeforeEach と afterEach 関数の説明
• 角度テストモジュール
• ExampAngular テストモジュール
• サービスのテスト
• サービスインスタンスの注入
• 同期メソッドをテストする
• 非同期メソッドをテストする
• モック HT TP クライアントの使用
• 定型文の返信
• コンポーネントのテスト
• コンポーネントテストモジュール
• コンポーネントインスタンスの作成
• ComponentFixture クラス
• 基本コンポーネントテスト
• DebugElement クラス
• ユーザーインタラクションのシミュレーション
• まとめ

第17章 デバッグ

• 以上view Angular デバッグの
• ViewデバッガーでTypeScriptコードを実行する
• デバッガーキーワードの使用
• デバッグログ
• Angular DevTools とは何ですか?
• Angular DevToolsの使用
• Angular DevTools – コンポーネント構造
• Angular DevTools – 変更検出の実行
• 構文エラーの検出
• まとめ

ラボ演習

• ラボ 1. Angular の紹介
• ラボ 2. TypeScript 入門
• ラボ 3. コンポーネントの概要
• ラボ 4. コンポーネント テンプレート
• ラボ 5. フォトギャラリー コンポーネントを作成する
• ラボ 6. テンプレート駆動型フォーム
• ラボ 7. 編集フォームを作成する
• ラボ 8. 反応型
• ラボ9. サービスの開発
• ラボ 10. HT TP クライアントの開発
• ラボ 11. パイプの使用
• ラボ 12. ルーターを使用した基本的なシングルページ アプリケーション ラボ 13. シングルページ アプリケーション (SPA) の構築
• ラボ 14. 高度な HT TP クライアント
• ラボ 15. Angular Bootstrap の使用
• ラボ 16. 遅延モジュール読み込み
• ラボ 17. 高度なルーティング
• ラボ 18. ユニットテスト
• ラボ 19. Angular アプリケーションのデバッグ

誰のためのコースですか?
このコースは、Angular 12開発の基礎を学び、それを開発に応用する必要がある人を対象としています。 web アプリケーションをすぐに開始できます。また、このトレーニング コースを大規模なグループ向けに提供およびカスタマイズできるため、組織の時間、コスト、リソースを節約できます。

前提条件
Web この Angular コースを最大限に活用するには、HTML、CSS、JavaScript を使用した開発経験が必要です。ブラウザ DOM の知識も役立ちます。AngularJS または任意のバージョンの Angular を使用した事前の Angular 経験は必要ありません。
https://www.lumifywork.com/en-au/courses/angular-12-programming/

ドキュメント / リソース

LUMIFY WORK Angular 12 プログラミング [pdf] ユーザーガイド Angular 12 プログラミング、Angular、12 プログラミング、プログラミング

参考文献

• ユーザーマニュアル