Course Code: angdev5
Duration: 35 hours
Prerequisites:
  • An understanding of HTML, CSS, and JavaScript
  • Experience with TypeScript and RxJS
  • Web development experience
  • Understanding of Node.js
Overview:

Days 1-4

Angular 16 is the latest major release of the Angular framework, and it introduces new features and updates such as partial hydration, experimental Jest support, esbuild-based build system, standalone project support, and more.

This instructor-led, live training (online or onsite) is aimed at beginner-level to intermediate-level developers who wish to use the latest features of Angular 16 to build, test, and deploy web applications.

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

  • Set up a development environment that includes Node.js, Visual Studio Code, and Angular CLI.
  • Create a basic Angular 16 application that displays data and handles user interactions.
  • Use components, directives, pipes, services, and modules to organize and reuse code.
  • Use data binding, dependency injection, routing, forms, and HTTP client to communicate with backend services.
  • Debug and test Angular 16 applications using tools such as Chrome DevTools, Jest, Karma, and Protractor

Day 5

TypeScript is an open source language for building enterprise Javascript applications. It is a strict superset of JavaScript that compiles to plain Javascript and brings static typing and object-oriented development to the language.

  • This instructor-led, live training introduces TypeScript's key features and walks participants through the construction of a real-life JavaScript application.

    Format of the Course

  • Interactive lecture and discussion.
  • Lots of exercises and practice.
  • Hands-on implementation in a live-lab environment.
Course Outline:

Introduction

  • What is Angular?
  • Angular vs React vs Vue
  • Overview of Angular 16 features and architecture
  • Setting up the Development Environment

Getting Started

  • Creating a new Angular 16 project using Angular CLI
  • Exploring the project structure and files
  • Running and serving the application
  • Displaying data using interpolation and expressions

Components

  • Understanding the role of components in Angular 16
  • Creating and using components
  • Passing data between components using inputs and outputs
  • Using component lifecycle hooks

Directives

  • Understanding the difference between structural and attribute directives
  • Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
  • Creating and using custom directives

Pipes

  • Understanding the purpose of pipes in Angular 16
  • Creating and using built-in pipes such as date, currency, json, etc.
  • Creating and using custom pipes

Services

  • Understanding the role of services in Angular 16
  • Creating and using services
  • Injecting dependencies using providers

Modules

  • Understanding the role of modules in Angular 16
  • Creating and using modules
  • Importing and exporting modules

Data Binding

  • Understanding the difference between one-way and two-way data binding
  • Creating and using property binding, event binding, and banana-in-a-box syntax
  • Using template reference variables

Routing

  • Understanding the role of routing in Angular 16
  • Creating and configuring routes
  • Navigating between routes using routerLink and router.navigate
  • Using route parameters, query parameters, and fragments

Forms

  • Understanding the difference between template-driven and reactive forms
  • Creating and validating forms using form controls, form groups, form arrays, etc.
  • Using built-in validators such as required, minLength, maxLength, etc.
  • Creating and using custom validators

HTTP Client

  • Understanding the role of HTTP client in Angular 16
  • Creating and using HTTP requests to communicate with backend services
  • Using observables to handle asynchronous data streams
  • Using interceptors to modify or handle HTTP requests or responses

Debugging

  • Understanding the common errors and bugs in Angular 16 applications
  • Using Chrome DevTools to inspect elements, sources, network, console, etc.
  • Using breakpoints, watch expressions, call stack, etc. to debug code

Testing

  • Understanding the importance of testing in Angular 16 applications
  • Using Jest as an alternative testing framework
  • Using Karma as a test runner for unit tests
  • Using Protractor as an end-to-end testing tool

Typescript

  • Installing TypeScript
  • Preparing a TypeScript Project
  • Understanding Typing, Variables, and Functions
  • Working with Classes and Interfaces
  • Organizing Your Code with Namespaces
  • Reusing Code through Modules
  • Compiling, Testing and Running TypeScript
  • Debugging TypeScript
  • Launching Your Application

Summary and Conclusion