LUMIFY WORK Angular 15 プログラミングユーザーガイド

アプリケーションと WEB 発達
Angular 15 プログラミング
長さ 5日
バージョン 15

コンテンツ 隠れる

このコースを学ぶ理由

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

LUMIFY WORK における ANGULAR

あなたが学ぶこと

このコースを修了すると、以下の知識が得られます。

Typescript を使用して単一ページの Angular アプリケーションを開発する

完全なAngular開発環境をセットアップする
コンポーネント、ディレクティブ、サービス、パイプ、フォーム、カスタムバリデータを作成する

Observablesを使用して高度なネットワークデータ取得タスクを処理する
RESTからデータを利用する web Angular HTTPクライアントを使用したサービス

プッシュデータ接続を処理するには、 Webソケットプロトコル
Angular Pipesを使用してデータをフォーマットする

高度なAngularコンポーネントルーター機能を使用する
組み込みツールを使用してAngularアプリケーションをテストおよびデバッグする

Angular CLI の操作

私のインストラクターは、私の特定の状況に関連する現実世界のインスタンスにシナリオを組み込むことができて素晴らしかったです。
到着した瞬間から歓迎されていると感じられ、教室の外にグループで座って自分たちの状況や目標について話し合うことができたのは非常に貴重でした。
多くのことを学びましたし、このコースに参加することで自分の目標を達成することが重要であると感じました。
Lumify Workチーム、素晴らしい仕事でした。アマンダ・ニコル
IT サポートサービスマネージャー – Health World LIMITED

コース科目

Angularの紹介
• Angular とは何ですか?
• Angularフレームワークの中心的な機能
• 適切な使用例
• Angular アプリケーションの構築ブロック
• Angular アプリケーションの基本アーキテクチャ
• Angularのインストールと使用
• Angularアプリケーションの構造
• アプリケーションの実行
• アプリケーションの構築とデプロイ
• ネイティブモバイルアプリ向けAngular
TypeScript 入門
• Angular で使用するプログラミング言語
• TypeScript構文
• プログラミング編集者
• 型システム – 変数の定義
• 型システム – 配列の定義
• 基本的なプリミティブ型
• 関数を入力する
• 型推論
• クラスの定義
• クラスメソッド
• 可視性制御
• クラスコンストラクタ
• クラスコンストラクタ – 代替形式
• 初期化されていないフィールド
• インターフェース
• ES6モジュールの操作
• var と let
• 矢印関数
• 矢印関数の簡潔な構文
• テンプレート文字列
• クラス内のジェネリック
• 関数内のジェネリック

コンポーネント
• コンポーネントとは何ですか?
• 元恋人ampコンポーネント
• Angular CLIを使用してコンポーネントを作成する
• コンポーネントクラス
• @Component デコレータ
• コンポーネントをモジュールに登録する
• コンポーネントテンプレート
• 元ample: HelloComponent テンプレート
• 元ample: HelloComponent クラス
• コンポーネントの使用
• アプリケーションを実行する
• コンポーネント階層
• アプリケーションルートコンポーネント
• ブートストラップ File
• コンポーネントライフサイクルフック
• 元ampライフサイクルフック
• CSS スタイル
コンポーネントテンプレート
• テンプレート
• テンプレートの場所
• 口ひげ {{ }} 構文
• DOM要素のプロパティの設定
• 要素本文テキストの設定
• イベントバインディング
• 式イベントハンドラー
• デフォルト処理の防止
• 属性ディレクティブ
• CSSクラスを変更してスタイルを適用する
• 元ample: ngClass
• スタイルを直接適用する
• 構造指令
• 条件付きでテンプレートを実行する
• 元ample: ngIf
• ngFor を使用したループ
• ngFor ローカル変数
• コレクションの操作
• 元ample – アイテムの削除
• ngFor によるアイテム追跡
• ngSwitch による要素の入れ替え
• 要素のグループ化
• テンプレート参照変数

コンポーネント間通信
• コミュニケーションの基礎
• データフローアーキテクチャ
• 子どもがデータを受け取る準備をする
• 親からデータを送信
• プロパティ設定の詳細
• コンポーネントからのイベントの発火
• @Output() 例ample – 子コンポーネント
• @Output() 例ample – 親コンポーネント
• 完全な双方向バインディング
• 親で双方向データバインディングを設定する
テンプレート駆動型フォーム
• テンプレート駆動型フォーム
• フォームモジュールのインポート
• 基本的なアプローチ
• フォームの設定
• ユーザー入力の取得
• ngForm属性の省略
• フォームを初期化する
• 双方向データバインディング
• フォーム検証
• Angular バリデーター
• クラスを使用して検証状態を表示する
• 追加の入力タイプ
• チェックボックス
• フィールドを選択（ドロップダウン）
• 選択（ドロップダウン）のレンダリングオプション
• 日付フィールド
• ラジオボタン

リアクティブフォーム
• 反応型フォーム終了view
• ビルディングブロック
• Reactive FormsModuleをインポートする
• フォームを作成する
• テンプレートをデザインする
• 入力値の取得
• 入力フィールドの初期化
• フォーム値の設定
• 入力変更の購読
• 検証
• 組み込みバリデータ
• 検証エラーを表示
• カスタムバリデータ
• カスタムバリデータの使用
• カスタムバリデーターへの設定の提供
• FormArray – 入力を動的に追加
• FormArray – コンポーネントクラス
• FormArray – テンプレート
• FormArray – 値
• サブフォームグループ – コンポーネントクラス
• サブフォームグループ – HTML テンプレート
• サブフォームグループを使用する理由
サービスと依存性注入
• サービスとは何ですか?
• 基本的なサービスの作成
• サービスクラス
• 依存性注入とは何ですか?
• サービスインスタンスの注入
• インジェクター
• インジェクター階層
• ルートインジェクターでサービスを登録する
• コンポーネントのインジェクタを使用してサービスを登録する
• 機能モジュールインジェクターを使用してサービスを登録する
• サービスを登録する場所はどこですか?
• 他の成果物への依存性注入
• 代替実装の提供
• 依存性注入と@Host
• 依存性注入と@Optional

HTTP クライアント
• Angular HTTP クライアント
• HTTPクライアントの使用 – 以上view
• HttpClientModuleのインポート
• HttpClient を使用したサービス
• GETリクエストを行う
• Observable オブジェクトは何をするのでしょうか?
• コンポーネント内でのサービスの使用
• PeopleService クライアントコンポーネント
• エラー処理
• エラーオブジェクトのカスタマイズ
• POSTリクエストの作成
• PUTリクエストを行う
• 削除リクエストの作成
パイプとデータのフォーマット
• パイプとは何ですか?
• 内蔵パイプ
• HTMLテンプレートでのパイプの使用
• パイプの連結
• 国際化パイプ (i18n)
• ロケールデータの読み込み
• 日付パイプ
• パイプ番号
• 通貨パイプ
• カスタムパイプを作成する
• カスタムパイプExample
• カスタムパイプの使用
• ngForでパイプを使用する
• フィルターパイプ
• パイプカテゴリー: 純粋および不純
• ピュアパイプエクスample
• 不純なパイプExample

シングルページアプリケーションの紹介
• シングルページアプリケーション（SPA）とは
• 伝統的 Web 応用
• SPAワークフロー
• シングルページアプリケーションアドバンtages
• HTML5 履歴 API
• SPAの課題
• Angularを使用したSPAの実装
Angular コンポーネントルーター
• コンポーネントルーター
• View ナビゲーション
• Angular ルーター API
• ルーター対応アプリケーションの作成
• ルーティングされたコンポーネントのホスティング
• リンクとボタンを使ったナビゲーション
• プログラムによるナビゲーション
• ルートパラメータの受け渡し
• ルートパラメータを使ったナビゲーション
• ルートパラメータ値の取得
• ルートパラメータを同期的に取得する
• ルートパラメータを非同期的に取得する
• クエリパラメータ
• クエリパラメータの指定
• クエリパラメータを非同期的に取得する
• マニュアルの問題 URL エントリーとブックマーク

高度な HTTP クライアント
• リクエストオプション
• HttpResponseオブジェクトを返す
• リクエストヘッダーの設定
• 新しいオブザーバブルの作成
• シンプルな Observable の作成
• オブザーバブルコンストラクタメソッド
• 観測可能な演算子
• マップ演算子とフィルター演算子
• flatMap() 演算子
• tap() 演算子
• zip() コンビネータ
• HTTPレスポンスのキャッシュ
• 連続したHTTP呼び出しを行う
• 並列呼び出しを行う
• catchError() によるエラーオブジェクトのカスタマイズ
• パイプラインのエラー
• エラー回復
Angularモジュール
• なぜ Angular モジュールなのか?
• モジュールクラスの構造
• @NgModule プロパティ
• 機能モジュール
• 元ampモジュール構造
• ドメインモジュールを作成する
• ルーティング/ルーティングモジュールペアを作成する
• サービスモジュールを作成する
• 共通モジュールの作成
• あるモジュールから別のモジュールを使用する

高度なルーティング
• ルーティング対応機能モジュール
• 機能モジュールの使用
• 機能モジュールの遅延読み込み
• 機能モジュールコンポーネントへのリンクの作成
• 遅延読み込みについての詳細
• モジュールのプリロード
• routerLinkActiveバインディング
• デフォルトルート
• ワイルドカードルートパス
• リダイレクト先
• 子ルート
• 子ルートの子ルートの定義
• 子ルートへのリンク
• 航行ガード
• ガード実装の作成
• ルート内でガードを使用する
Angular アプリケーションのユニットテスト
• Angular 成果物のユニットテスト
• テストツール
• 一般的なテスト手順
• 試験結果
• Jasmine テストスイート
• Jasmine 仕様 (ユニットテスト)
• 期待（アサートイオン）
• マッチャー
• 元ampマッチャーの使用例
• notプロパティの使用
• ユニットテストスイートのセットアップとティアダウン
• 元ampbeforeEach と afterEach 関数の説明
• 角度テストモジュール
• 元ampAngular テストモジュール
• サービスのテスト
• サービスインスタンスの注入
• 同期メソッドをテストする
• 非同期メソッドをテストする
• モックHTTPクライアントの使用
• 定型文の返信の提供
• コンポーネントのテスト
• コンポーネントテストモジュール
• コンポーネントインスタンスの作成
• ComponentFixture クラス
• 基本コンポーネントテスト
• DebugElement クラス
• ユーザーインタラクションのシミュレーション

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

誰のためのコースですか?

このコースは、Angular 15開発の基礎を学び、それをすぐに作成に適用する必要があるすべての人を対象としています。 web アプリケーション。
大規模なグループ向けにこのトレーニングコースを提供およびカスタマイズすることもできます。これにより、組織の時間、費用、リソースを節約できます。詳細については、メールでお問い合わせください。 ph.training@lumifywork.com