Angular Training Course (2-5 days, from Beginner to Advanced) 

Note: this outline is our proposal, but the training can be tailored to your specific requirements upon prior request ahead of the proposed course date.

Why Learn Angular?

Angular is an open-source front-end web application framework, primarily sustained by Google as well as an extended community of people and companies. It is fully extensible and also functions well with other libraries. Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or desktop.

Choose Angular if you want less coding, ease of integration, single page applications supported, a declarative user interface or modularity.

 

Requirements

  • experience in building web applications with HTML5 and JavaScript

  • No previous experience with AngularJS is required

 

Course details

The agenda covers both fundamentals and advanced topics, and is based on Angular 11. However, it can be adapted to any other version of Angular.

The final training outline will be designed depending on your particular requirements.

The practical exercises constitute a big part of the course time, besides demonstrations and theoretical presentations. Discussions and questions can be asked throughout the course.

 

Course Outline

 

1. Angular Fundamentals

DAY 1

  • TypeScript fundamentals

    • The TypeScript compiler

    • Type safety with type annotation

    • Classes and Interfaces

    • Generics

  • Setup and Tooling

  • Getting started with the Angular CLI

    • Popular commands and schematics

  • Introduction to Angular

  • Structure of an app

  • Components Model

    • Decorators, Templating Syntax, Data Binding, Directives, Input/Output, Events, Pipes, Encapsulation

  • Services and Dependency Injection

  • Reactive Programming with RxJS (Observables)

    • Understanding RxJS and its use with Angular

    • Subscribe() function

    • The async pipe

    • Pipe() function

    • Using popular RxJS operators

    • RxJS best practices

    • Handling errors in RxJS code

  • Async Requests to a REST API (HTTP)

    • The HttpClient service

    • A first async GET request

    • Consume an Observable response

  • Implementing a local cache with ShareReplay()

  • Debugging an application

  • Implementing pagination, sorting and filtering on a list

DAY 2

  • Modules

    • Organizing a modular app

    • Modules imports/exports

  • Deployment

    • Optimizations for production

    • ng build and ng deploy commands

  • Migrating a project to a new version of Angular

  • Navigation and Routing

    • Using the Angular Router

    • routerLink directive

    • The router-outlet placeholder

    • Router service

    • Nested routes

    • Route parameters

    • Handling routing errors

  • Lazy-loading

  • Forms and Validation

    • Reactive Forms

    • Validation API

    • POST request

  • Using HttpClient to Update or Delete data on the server

    • PUT and DELETE requests

  • Authentication

    • Login component

    • Authentication Service

    • Security with JSON Web Tokens (JWT)

    • Http Interceptors

    • Protecting access to components with Route Guards

  • Best Practices (Linting, Style Guide, …)

  • Summary and conclusion

Optional: Bootstrap, Material Design, Firebase, Unit testing, Ionic, NgRx, Progressive Web App (PWA), Jamstack, SEO etc.

2. Angular Advanced

DAY 1

  • Advanced Routing

    • Lazy Loading

    • Preloading Modules

    • Diagnostic with traces

    • Auxiliary routes

    • Routes Transitions

    • Protect routes access with Guards

    • Route Resolver

    • Setting metadata for SEO

    • Router events

  • Complex Error Handling

    • Global Error Handler

    • Managing different types of errors: Code, Navigation, Http

    • Error Service, offline mode and log to server

    • Http Errors Interceptor with auto retry for failed requests

    • Notification Service: using an RxJS Subject to stream messages and display toast notifications

  • Optimizing performance

    • Exploring different techniques to improve your apps and make them run fast and smooth:

    • Bundling, Minification, dead code elimination, enableProdMode()

    • Performance for Data Binding with OnPush

    • Profiling an app performance

    • Web Workers to improve responsiveness

    • Profiling runtime performance

    • Using bundle analyzer

    • Virtual Scrolling

    • Improve ngFor with trackBy

    • Caching with Service Worker

    • Progressive Web App (PWA)

DAY 2

  • Advanced RxJS

    • RxJS and Reactive Programming

    • Data Composition with Observables

    • Most important RxJS operators

    • Using Subjects (BehaviorSubject, ReplaySubject)

    • Introduction to Higher-order Mapping Operators (switchMap, flatMap, ...)

  • Modern State Management with Redux and ngrx

    • Why Redux ?

    • Introduction to the ngrx platform

    • Setting up ngrx store

    • Stateful vs stateless components

    • Immutability and performance

    • Ngrx error handling

    • Managing the router state in the store

    • Async actions with ngrx effects

    • Removing boilerplate with ngrx entity

    • Live debugging and time travelling with ngrx DevTools

    • NgRx Data

  • Angular Universal

    • Improving performances and SEO

    • Server-Side Rendering

    • Static Site Generation

    • Overview of Scully (Jamstack)

  • Summary and conclusions