Angular 9

Course Description

Course Overview:

This course will introduce you to the capabilities of the Apigee edge in a way to implement and secure your APIs. You will learn to design, build, and deploy your APIs using Google’s Apigee platform using hands-on labs.

Course Objectives:

Understand why and how can Angular be used as a web development tool
Enable how to build an Angular project from scratch, including environment setup, development, and deployment
Understand how and when to utilize the different components or features of the framework
To be able to understand how NPM works and how to install modules written by other people in the open-source community
To be able to build a simple yet complete web application at the end of the course

Requirements:

Requirements:

Intermediate knowledge of HTML, JavaScript, and CSS
Basic understanding of command-line interface tools

Good to Have:

Experience with TypeScript or other OOP/Typed languages
Experience working with other high-level languages like Java, Python or PHP
Experience working with other web frameworks like React or PHP

Target Audience:

Anyone who wants to get started with building web or web-based applications
Professionals seeking to further their knowledge about Angular 9+
Teams getting started on migrating from Angular 1.0 or from other frameworks to Angular 9+

Course Duration:

3 Days

Course Content:

Getting Started
1. Installation
  1. Node.JS
  2. NPM

Angular CLI
- Project Environment Setup
  - Creating a workspace and initial application
  - Running the application

Angular Concepts
1. Basics
  1. Overview
  2. Architecture

Where Angular sits is in a typical Information System
- Project File Structure
  - Modules
  - Components
  - Templates, Directives and Data Binding
  - Services & Dependency Injection
  - Change history between Angular 1, 2, 3, …, 9+

Directives
1. Components
  1. Creating components using the Angular CLI
  2. Parts of a component

Binding data within a component
- Applying logic inside a component
- Applying styles inside a component
- Structural
  - Conditionally load components
  - Using structural loops to repeat components
- Using a structural switch to dynamically load components
  - Attributes
    - Creating custom attribute directives
    - Event handling within custom attribute directive
  - Using standard built-in attribute directives to customize components

Pipes
1. Creating custom pipes
2. Using custom pipes
3. Allowing single and multiple inputs within a pipe
4. Setting default values for a pipe
5. Using built-in standard pipes and when to use them
Lifecycle Hooks
1. Understanding the lifecycle of a component
2. Inserting hooks for a lifecycle event and why we might want to insert one
Routing & Navigation
1. Building component pages and setting up the router
2. Trigger route change via component click
3. Trigger route change via script
4. Passing and receiving data when executing route change
Data Binding
1. Interpolation
2. Property Binding
3. Event Binding
4. Two-way Data Binding
Forms
1. Template Driven Forms
  1. Creating a form component
  2. Creating form HTML template

Binding form inputs to a model class
- Validation
- Reactive Forms
  - The difference between Template Driven Forms
  - Creating basic form controls
- Grouping form controls
  - Validation

Observables & RxJS
1. Observables
  1. Observers and Subscribers
  2. Error handling
2. Practical Usage
  1. Transmitting data between components
  2. Models response in HTTP Client

Usage in Async Pipe
- Usage in Routing

Dependency Injection
1. Services
  1. Creating injectable services
  2. Injecting services
2. HTTP Services
  1. Building an HTTP service to interface with backend API
3. Third-Party Modules
  1. Installing a CSS framework like Bootstrap
  2. Using vanilla JS frameworks
  3. Using Angularized version of vanilla JS frameworks
  4. Using Angular libraries integrated with CSS frameworks
4. Project
  1. Building a TODO application