Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

Angular 13

This Angular 13 - Fundamentals training course covers all the core concepts and guides needed to build a full Angular data-centric business application, including the role of TypeScript, project setup, code structure, style guide, using the Angular CLI, data binding, async requests to a REST API through services, observables, and routing. Angular Academy is the ideal starting point to understand and use Angular 13 effectively now. You will experience several demos and "code along" activities and be provided with the code throughout the workshop, as you learn how to build apps using Angular 13, with plenty of interactivity with the instructor.

This Angular 13 - Advanced training course covers advanced topics dedicated to people who are already familiar with Angular and TypeScript! This workshop is very hands-on and you will have the chance to work on an Angular data-centric business application with plenty of interactivity with the instructor.

  • Knowledge of HTML, CSS, Bootstrap and JavaScript
The Angular 13 workshop is ideal for:
  • Software Developers

COURSE AGENDA

Angular 13 - Fundamentals
(Duration : 3 Days)

1

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
2

Day 2 & 3

  • 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)
  • Final QnA
Angular 13 - Advanced
(Duration : 2 Days)

1

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)
2

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)
  • Final QnA

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X