TT4168: Mastering Angular Essentials | Getting Started, Best Practices, Unit Testing, Forms, RXJS, NgRX, RES

About this Course

Updated for Angular 16 and geared for experienced web developers, our Mastering Angular 16 Boot Camp provides you with hands-on experience working with the latest features and benefits Angular has to offer. It provides you with the practical “real-world” foundational and advanced Angular skills required to solve the usual challenges you might face when developing modern web applications with JavaScript. You’ll leave the course equipped to construct robust, scalable, and feature-rich web applications using Angular 16, able to implement seamless user experiences, integrate with various data sources through REST APIs, and employ best practices in unit testing for sustainable, high-quality code.

The course starts off with a solid introduction to the core features of the Angular CLI and TypeScript. You’ll then jump right into component-driven development with Angular components, covering data-binding, directives, services, SPA routing, the RxJS library, forms, unit testing, and HTTP/REST. You’ll also learn how to add authentication, use the Material library, and make custom directives.

By the end of this course, you’ll have developed a streamlined yet feature-rich application. This application will include components to structure your website, directives for dynamic interactivity, and custom pipes for content formatting and filtering. You’ll also implement reactive forms for user engagement, SPA routing for seamless navigation, and services to optimize data management and speed. The course emphasizes the importance of unit testing in a Test-Driven Development environment and teaches you how to interact efficiently with web servers using REST APIs. Finally, you’ll integrate the Material library to give your web pages a modern, professional aesthetic.

Please note that this course is available for other earlier editions of Angular (Angular 15, etc). Please inquire for details and options.

Audience Profile

The content is appropriate for experienced web developers new to Angular. In order to be successful in the course, you should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.

At Course Completion

The lab intensive course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with Angular right away. The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects.

Guided by our engaging, highly-experienced instructor, you’ll explore:

· What Angular is and why should you use it

· How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages

· What TypeScript is, why it is useful, and how to use it with Angular

· How to facilitate development and deployment using Angular CLI

· How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces

· How Routers can support navigation within a Single Page Application

· What the best practices are for using Angular so that it works unobtrusively and performs well

· How to use Angular with HTTP to support JSON, REST, and other services

· How to manage routing decisions based on pre-defined criteria such as a successful authentication

· How to meet huge data requirements by processing asynchronous data streams with RxJS

· How to facilitate unit testing

· Optimize Angular applications with various tools and techniques

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

Outline

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We’ll work with you to tune this course and level of coverage to target the skills you need most. Topics, agenda and labs are subject to change, and may adjust during live delivery based on audience skill level, interests and participation.

Getting Started with Angular

1. Overview of Angular Architecture

· Angular Versioning

· Data Binding

· Components and Dependency Injection

· Services and Events

· Common Component Lifecycles and Hooks

2. TypeScript

· Angular, ES6 and TypeScript

· Typing and Classes

· Abstract Classes and Interfaces

· Annotations

· Generics

· Optional Chaining

· Nullish coalescing

· Decorators

· Partial, Record, Union types

3. Bootstrapping with Angular CLI

· Angular CLI Overview

· New Projects with CLI

· Testing and Generating with CLI

· Angular Console – NX Console

4. Angular Basics

· Configuration Files

· Working with angular.json

· Top-Level Directories

· Contents of app folder

· Angular DevTools

· Lab: Creating Projects with Angular CLI

Session: Working with Angular

5. Components and Events

· Data Binding and Components

· Event Binding

· Custom Events

· Parent/Child Events

· EventEmitter/emit()

· Lab: Nested Components

6. Third Party Libraries

· Angular and the Need for Libraries

· Options for adding Libraries

· Working with npm install

· Lab: Third-Party Libraries

7. Dynamic Views - Directives

§ View Encapsulation

§ Structural/Attribute Directives

§ Conditional Styling

· Lab: Working with Directives

8. Pipes

· Overview of Pipes

· Built-in Pipes

· Formatting and Conversions

· Parameterizing Pipes

· Pure vs. Impure Pipes

· Customizing Pipes

· Lab: Built-in and Custom Pipes

Angular Forms

9. Forms and the Forms API

· Forms and NgModel

· NG Form Groups

· NG Form Validation

· Model-Driven Reactive Forms

· FormBuilder API

· Reactive Form Validation

· Lab: Template-Driven Forms

· Lab: Reactive Forms

Single Page Applications and Routes

10. Single Page Applications - Routing

· Overview of the SPA Concept

· Routing for Page Display

· Working with ActivatedRoute

· Location Strategies

· Nested Routes

· Lab: Routing

11. Services(Dependency Injection)

· Angular’s DI Framework

· Components and Injectables

· Tree-shakeable providers

· Service Interfaces and DI

· Constructor Injection

· Lab: Services

12. Modules

· Overview of Modules

· Feature Modules

· Feature Module Routing

· Shared Modules

· Lab: Modules

Using RESTful Services

13. Angular and REST

· REST in Angular

· Promises, Observables, Subject

· HttpClient and Observables

· async Pipes and HttpClient Interceptors

Reactive Programming in Angular

14. In depth - Working with RxJS

· Working with RxJS in Angular

· RxJS Operators

· Creation Operators

· Pipeable Operators

· Filtering, Combining, and Mathematical Operators

· Lab: Working with a REST API and RxJS

15. Testing and Angular

· Testing Dependencies

· Options for Testing in Angular

· Karma

· Jasmine

· Lab: Unit Testing

Enhancing the Angular App

16. Advanced Routing - Route Guards –Overview of Route Guards

· Route Guard CanActivate

· Using in a Service

· Lab: Route Protection

17. Angular Material (Design)

· Gesture Support

· Material Icons and Components

· Materials Themes

· Custom Themes

· Lab: Angular Material

Deployment, Errors, and Debugging

18. Angular Deployment

· Deployment options

· Server Configurations

· Production Optimizations

19. Angular Error Handling and Debugging

· With Chrome DevTools

· With VS Code

· Http client request errors

· Lab: Debugging Angular

Bonus Content / Time Permitting

Angular Style Guide

· Recent Angular Improvements

· Upgrading Angular

· Single Responsibility Principle

· Naming Conventions

· Coding Conventions

· Application Structure

· Routing

Prerequisites

Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

· TT4003 Introduction to HTML5, CSS3 & JavaScript (3 days)