hands-on lab

Developing Applications using Angular

Up to 8h
You can pause this lab for up to 240m
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.


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


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.


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

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

About the author

Ed Wright, opens in a new tab
Senior Learning Consultant
Learning paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered topics

Lab steps

Starting the Developing Applications using Angular Lab Exercises