This lab is a complete guide to building scalable web applications using Google’s popular Angular framework, leveraging the power of TypeScript to build type-safe applications.

An overview of the framework is given and then each of the 8 building blocks (Modules, Components, Directives, Metadata, Templates, Services, Data Binding, and Dependency Injection) are covered in deep dives including testing. RxJS observables are covered as both discrete JavaScript and how they are integrated into Angular. Template-Driven and Reactive forms implementation applications are compared and examined. Creating a single page application through the use of routing is also on the outline of the lab which can be seen below.

Learning Objectives

Upon completion of this lab you will be able to:

• Explain what Angular is
• Set up an Angular project
• Create Angular components, directives, pipes, services and more
• Use state and props in components
• Use forms in both Template and Reactive driven styles
• Make asynchronous requests for data to remote services
• Use the Angular Router to create Single Page Applications
• Use Test-Driven Development (TDD) tools and techniques to build better applications

Intended Audience

This lab is intended for:

• Frontend and full-stack engineers
• Developers who need to use Angular in real-world projects
• Individuals who want to improve their Angular skills

Prerequisites

It is essential you understand the face of contemporary web development to complete this lab. You must have JavaScript experience equivalent to the skills covered in Web Development Fundamentals - JavaScript along with good HTML and CSS skills comparable to those covered in Web Development Fundamentals - HTML and CSS.

This lab uses TypeScript for all exercises and so it is essential that you have experience equivalent to the skills covered in Programming with TypeScript.

Updates

July 23rd, 2021 - Updated to the latest version of QuickLab exercises

July 8th, 2020 - Enabled direct browser RDP connection for a streamlined experience