1. Home
  2. Angular 14: Fundamentals to Advanced

Angular 14: Fundamentals to Advanced ( ang14b | 28 hours )

Prerequisites:
  • Familiarity with basic HTML, CSS, and JavaScript

Audience

  • Familiarity with basic HTML, CSS, and JavaScript
Overview:

Angular is a JavaScript framework for building web applications. Angular 14 is a major release that emphasizes performance improvements, language services, the new Ivy compiler, form validation, and more.

In this instructor-led, live training (online or onsite), participants will learn how to create, test and deploy an Angular application using the latest features in Angular 14.

By the end of this training, participants will be able to:

  • Develop Angular 14 applications using TypeScript and the Angular CLI.
  • Create loosely coupled web components that can be used in any web application or HTML page.
  • Test, debug and deploy an Angular 14 applications.
  • Organize Angular 14 projects using best practices.
Course Outline:

Introduction

  • What is Angular?
  • What's new in Angular 14?

Overview of Typescript and ES6 JavaScript

  • TypeScript Syntax
  • Using the TypeScript transpiler
  • Setting up Angular 14 and Typescript

Overview of Angular 14's Parts

  • Angular CLI
  • Components
  • Directives
  • Inputs and Outputs
  • Data Binding and Interpolation
  • Event Binding
  • Data Modelling
  • Bootstrapping
  • Experimental Webpack

Creating Your First Angular Application

  • Planning the Application
  • Setting Up an Angular Project
  • Creating a mobile friendly UI using Bootstrap 4 and Sass

Creating a Component

  • Understanding the Component Lifecycle
  • Data Flow
  • Using Templates and Styles
  • Projecting Content
  • Working with AppModule
  • Working with Custom Components
  • Using View Encapsulation
  • Implementing Lifecycle Hooks
  • Using ViewChildren and ContentChildren

Data Binding in Angular 14

  • Understanding Property and Event Binding
  • Binding and Assigning Aliases to Custom Properties
  • Binding and Assigning Aliases to Custom Events

Working with Directives

  • Built-in Directives
  • Custom Directives

Angular 14 Services

  • Creating a Logging Service
  • Creating a Data Service

Using Dependency Injection and Providers

  • Injectors, Provider, and Tokens
  • Configuring Dependency Injection
  • Configuring Your Provider
  • Injecting Services into Components, Directives, and Services

Switching Pages with Routing

  • Understanding the Different Navigation Methods
  • Routing Strategies
  • Setting Up Routes
  • Configuring and Loading Routes
  • Using Parameters in Routes
  • Creating Nested Routes
  • Using Redirect and Wildcard Routes
  • Understanding Route Guards

Using RxJS to Create and Work with Observables in Angular

  • Overview of Observables
  • Overview of RxJS
  • Building & Using Observables in Angular

Generating Forms for User Input

  • Using the Template Driven Forms
  • Using the Reactive Forms
  • Creating custom validation
  • Validating, filtering, and sanitizing form data

Using Pipes

  • Transforming output
  • Built-in Pipes
  • Async Pipe
  • Custom Pipes

Making Calls to External HTTP APIs

  • Sending requests

Testing the Angular 14 Application

  • Using Jasmine for unit testing
  • Exploring Protractor alternatives for end-to-end testing

Debugging the Application

  • Understanding Error Messages in Angular
  • Using Sourcemaps to Debug Code in the Browser
  • Reading TypeScript Compilor diagnostics
  • Using Augury to debug inside a browser

Optimizing the Angular 14 Application

  • Reworking the code
  • Reducing bundle size and eliminating dead-code

Angular 14 Security

  • How authentication works
  • Using JWT authentication
  • What should and shouldn't be written in Angular

Deploying an Angular 14 Application to Production

  • Deploying to IIS, Apache, Nginx, etc.

Angular 14 Best Practices

Troubleshooting

Summary and Conclusion