Description

Introduction

This training is focused on developing modern web applications using Angular 9, a popular framework for building single-page applications, in combination with TypeScript, a powerful and strongly typed superset of JavaScript. Angular 9 brings enhanced performance and features such as the Ivy compiler, while TypeScript ensures code maintainability, scalability, and error detection at compile time.

By the end of this training, participants will be proficient in using Angular 9 to build robust web applications and will have a strong understanding of TypeScript’s role in enhancing Angular development.

Prerequisites

Before attending this training, participants should have the following knowledge and skills:

1. Basic JavaScript Knowledge:
   • Understanding of JavaScript syntax, functions, loops, and arrays.
   • Familiarity with modern JavaScript (ES6+) features like arrow functions, template literals, and promises.
2. HTML and CSS Proficiency:
   • Knowledge of structuring and styling web pages using HTML and CSS.
3. Basic Understanding of Node.js and npm:
   • Familiarity with Node.js for running JavaScript outside the browser.
   • Experience with npm (Node Package Manager) for managing packages and dependencies.
4. Command Line Basics:
   • Experience with using the command line for navigating directories and running commands.

Table of Contents

1. Introduction to TypeScript and Angular 9
   • Overview of Angular and why it is used for modern web development.
   • Introduction to TypeScript: What is it and why use it with Angular?
   • Setting up the development environment with Angular CLI.
2. TypeScript Fundamentals
   • TypeScript syntax and features.
   • Static types in TypeScript: Primitives, arrays, objects, and functions.
   • Type inference and type annotations.
   • Interfaces, classes, and inheritance in TypeScript.
   • Modules and namespaces for organizing code.
3. Angular 9 Core Concepts
   • Angular components: Creating and organizing components.
   • Angular module system and NgModules.
   • Data binding: Interpolation, property binding, event binding.
   • Angular directives: Structural directives (ngIf, ngFor) and attribute directives.
   • Using pipes to transform data in the template.
4. Services and Dependency Injection in Angular
   • Introduction to services in Angular and why they are important.
   • Creating services and using Dependency Injection (DI).
   • Injectable decorators and lifecycle hooks in Angular.
5. Angular 9’s Ivy Compiler
   • Introduction to the new Ivy rendering engine.
   • Benefits of Ivy: Faster build times, smaller bundle sizes, and better debugging.
   • How to migrate or enable Ivy in existing Angular projects.
6. Working with Angular Routing
   • Setting up routing in Angular 9 applications.
   • Navigating between different views and routes.
   • Lazy loading for performance optimization.
   • Protecting routes with route guards.
7. Forms and Input Handling in Angular
   • Introduction to template-driven forms.
   • Creating reactive forms and handling form controls programmatically.
   • Form validation: Built-in validators and custom validators.
   • Handling user input and form submission.
8. HttpClient and API Communication
   • Making HTTP requests with Angular’s HttpClient module.
   • Sending GET, POST, PUT, and DELETE requests.
   • Working with Observables and RxJS for handling asynchronous data.
   • Error handling in HTTP requests.
9. Component Interaction and State Management
   • Sharing data between parent and child components using Input and Output.
   • Using services to share data across multiple components.
   • Introduction to state management with NgRx (optional).
10. Advanced TypeScript Features in Angular
    • Generic types and their usage in Angular services.
    • TypeScript decorators and how they are utilized in Angular.
    • Handling complex types and union types.
    • Type guards and type assertions.
11. Unit Testing and Debugging Angular Applications
    • Introduction to unit testing in Angular using Jasmine and Karma.
    • Writing test cases for components and services.
    • Debugging Angular applications using browser developer tools.
    • Best practices for testing Angular applications.
12. Angular 9 Performance Optimization
    • Change detection strategies in Angular.
    • Optimizing performance with the OnPush change detection strategy.
    • Lazy loading modules and code splitting.
    • Tips for reducing bundle size and improving application performance.
13. Building and Deploying Angular 9 Applications
    • Building Angular applications for production.
    • Code optimization and minification.
    • Deploying Angular applications on popular platforms (Firebase, Netlify, or custom servers).
14. Hands-On Project: Developing an Angular 9 Application
    • Building a real-world CRUD (Create, Read, Update, Delete) application.
    • Integrating the application with a RESTful API.
    • Implementing routing, forms, and service layers.
15. Conclusion and Next Steps
    • Recap of Angular 9 and TypeScript integration.
    • Future learning paths and resources (e.g., Angular Universal, Server-Side Rendering).
    • Continuous learning and staying updated with Angular and TypeScript.