Mastering Angular 18 Boot Camp (TT4168)

Course Objectives

Learning Objectives

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 web development instructor, you will learn how to:

• Build Powerful Components: Master creating and organizing 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.
• Optimize with CLI and DevTools: Use Angular CLI for easy project setup and deployment, and harness DevTools for debugging and optimizing 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.
• Utilize 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.

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.

Course Prerequisites

Audience

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.  

Pre-Requisites

Take Before: 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)

Related Courses

The following is a small subset of related courses. We offer many additional courses and topics on modern web, mobile and full stack development. Please see the online catalog for a complete list of courses and learning paths.

• TT4002          Introduction to HTML5 / CSS3 - 2 days
• TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days
• TT4110          Introduction to Moden JavaScript – 3 days
• TT4165          Introduction to Angular Essentials - 3-day subset of this course
• TT4168          Mastering Angular Boot Camp - 5 days
• TT4190          Getting Started with React Essentials – 3 days
• TT4195          Mastering React Boot Camp |With Redux, Flux, Unit Testing, JSX & More – 5 days (TT4190 superset)
• TT4198          Getting Started with React Native

Enhanced Learning Services: Please also ask about our robust Learning Experience Platform (LXP), Skills Assessment & Skills Prep Services, Skills Immersion Programs & Camps, Coaching and Mentoring Services and Extended Learning Support programs.

Course Agenda

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 Directive

9. Pipes

• Overview of Pipes
• Built-in Pipes
• Formatting and Conversions
• Parameterizing Pipes
• Pure vs. Impure Pipes
• Customizing 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 do we 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

Errors,  Debugging and Standalone

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

Course Materials