Application & Web Development Category Banner Image

Mastering Angular 18 Boot Camp

Length 5 days
Version 18

Course overview

View dates &
book now

Course locations >>

Why study this course

COMING SOON! Due for release in September.

Learn how to construct robust, scalable, and feature-rich web applications using Angular in this comprehensive course, with plenty of hands-on labs designed to immerse you in the skills required to get up and running with Angular right away.

Geared for experienced web developers, this Mastering Angular 18 Boot Camp is a five-day, comprehensive hands-on program that explores the latest features and benefits Angular has to offer. Throughout the course, you’ll learn 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. The course is rich with hands-on activities, challenge labs, knowledge checks, discussions, and focused projects.

Kicking off with an in-depth introduction to Angular CLI and TypeScript, the course propels you into the world of component-driven development, touching on vital topics like data-binding, directives, and services. As you advance through the curriculum, you'll explore SPA routing, the RxJS library, forms, and unit testing, along with HTTP/REST protocols for server interaction.

By the end of this course, you’ll have built a comprehensive application that brings together all these elements: website structuring through components, dynamic interactivity via directives, and custom pipes for content refinement. You'll know how to employ reactive forms for active user engagement and SPA routing for fluid navigation, fortified by efficient data management through services. All of this is underscored by a strong emphasis on unit testing, as well as practical REST API interactions for modern server communication.

You’ll leave the course equipped to construct robust, scalable, and feature-rich web applications using Angular 18, 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.

Request Course Information

What you’ll learn

On successful completion of this course, you'll have the knowledge to:

Build Powerful Components: Master creating and organising Angular components, leveraging dependency injection and lifecycle hooks for scalable apps.
Harness TypeScript's Power: Become proficient in TypeScript, using its advanced features like classes, interfaces, and decorators to supercharge your Angular development.
Create Dynamic, Reactive Forms: Learn to build complex forms with Angular's reactive approach, ensuring seamless validation and user interaction.
Connect with RESTful Services: Integrate Angular apps with RESTful services using HttpClient, and handle asynchronous data streams with RxJS for efficient server communication.
Optimise with CLI and DevTools: Use Angular CLI for easy project setup and deployment, and harness DevTools for debugging and optimising your applications.
Master SPA Navigation: Implement smooth and efficient Single Page Application (SPA) routing with nested routes and route guards for a top-notch user experience.
Utilise Third-Party Libraries: Learn to effectively integrate and manage third-party libraries within Angular to extend functionality and streamline development.
Implement Effective Testing: Gain skills in using tools like Jest and Web Test Runner for unit testing, ensuring your Angular applications are robust and error-free.

Angular at Lumify Work

Lumify Work offers courses in Angular, a complete JavaScript framework for creating dynamic and interactive applications in HTML. Developers use Angular for building web, desktop, and mobile applications.

View all Angular courses

Who is the course for?

This course is designed for experienced web developers new to Angular. You should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.

Course subjects

GETTING STARTED WITH ANGULAR

1. Overview of Angular Architecture

Angular Versioning
Data Binding
Component Architecture
- Show concepts: how to render the content in the browser
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
Interface patterns
Annotations
Generics
Optional Chaining
Nullish coalescing
Decorators
Functional vs Procedural JavaScript
Functional Approach
Lab: Angular and TypeScript - Enhanced lab

3. Bootstrapping with Angular CLI

Angular CLI Overview
New Projects with CLI
Testing and Generating with CLI

4. Angular Basics

Configuration Files
Working with angular.json
Top-Level Directories
Contents of app folder
Angular DevTools
ng build
Lab: Creating Projects with Angular CLI

WORKING WITH ANGULAR

5. Components and Events

Data Binding and Components
Event Binding
Custom Events
Parent/Child Events
EventEmitter/emit()
New Input/Output function
Lab: Nested Components

6. Standalone Components

Project Setup and Configuration
Folder Structure
Components
Services
Routing
Versus non-standalone components
Versus modules

7. Third Party Libraries

Angular and the Need for Libraries
Options for adding Libraries
Working with npm install
Lab: Third-Party Libraries

8. Dynamic Views - Directives

View Encapsulation
Structural/Attribute Directives
Conditional Styling
@if/@else
@for
@defer
Lab: Working with Directives

9. Pipes

Overview of Pipes
Built-in Pipes
Formatting and Conversions
Parameterising Pipes
Pure vs Impure Pipes
Customising Pipes
Lab: Built-in and Custom Pipes

10. Signals and State

What are Signals?
How to read the value of a signal
How to modify the value of a signal
The update signal API
Read-only signals
The computed() Signal API
How to subscribe to a signal
Using effects

ANGULAR FORMS

11. Forms and the Forms API - focus on Reactive Forms

Template Forms - Overview
User Input/Interactions
Model-Driven Reactive Forms
FormBuilder API
Reactive Form Validation
Form’s new control state change events
Lab: Reactive Forms

SINGLE PAGE APPLICATIONS AND ROUTES

12. SPA - Routing

Overview of the SPA Concept
Routing for Page Display
Working with ActivatedRoute
Location Strategies
Nested Routes
Route redirects as functions
Lab: Routing

13. Services (Dependency Injection)

Angular’s DI Framework
Components and Injectables
Tree-shakeable providers
Services Architecture
Service Interfaces and DI
Constructor Injection
Inject function
Scenarios for use
Lab: Services

14. Modules

Overview of Modules
Feature Modules
Feature Module Routing
Shared Modules
Lab: Modules

USING RESTful SERVICES

15. Angular and REST

REST in Angular
Promises, Observables, Subject
HttpClient and Observables
Deprecation of HttpClientModule
async Pipes and HttpClient Interceptors
Angular working with axios
Lab: Rest with axios

REACTIVE PROGRAMMING IN ANGULAR

16. Working with RxJS

Working with RxJS in Angular
RxJS Operators
- switchMap, tap, map, forkJoin, combineLatest, …
- Most used operators
asynchronous operations
Manipulate stream
Lab: Working with RxJS

17. Testing and Angular

Testing Dependencies
Options for Testing in Angular
Using Jest in Angular
Using the Web Test Runner
Lab: Unit Testing

18. Zoneless

The Need for Zoneless Angular
- Performance considerations
Zone Change Detection
Advantages and Trade-offs

BONUS CONTENT / TIME PERMITTING

19. Angular Error Handling and Debugging

With Chrome DevTools
With VS Code
Http client request errors
Lab: Debugging Angular

20. Angular Coding Style Guide and Best Practices

Prerequisites

Attendees should have web development experience using HTML, CSS, and JavaScript to get the most out of this course.

No prior experience of Angular or AngularJS is required.

Terms & Conditions

The supply of this course by Lumify Work is governed by the booking terms and conditions. Please read the terms and conditions carefully before enrolling in this course, as enrolment in the course is conditional on acceptance of these terms and conditions.