The main aim of this course is to familiarise participants with the Angular framework and how to use it to develop modern web applications. On completion, participants should be able to set up Angular projects, create components, manage data, apply routing, and work effectively with web APIs.

‍

Knowledge and skills acquired on completion; the participant will be able to

Set up and manage Angular projects.

Create and use components effectively.

Manage data using data binding and data interpolation.

Apply routing in Angular applications.

Use services for IoC and HttpClient for asynchronous HTTP requests.

Create and use model classes.

Exchange data between different components.

Manage environment variables correctly.

‍

This course is intended for people who want an introduction to using the Angular JavaScript framework to develop web applications. It is specifically aimed at participants who already have some prior knowledge of Java, REST, web services and web technologies.

The course is delivered through a combination of instructor-led sessions and self-study. Participants will work through practical exercises and assignments to practise their skills. The focus is on hands-on learning, with participants actively writing code and solving programming challenges.

Hardware requirements: participants must have access to a computer or laptop with an internet connection and administrator rights. A reasonably modern machine is recommended (at least a quad-core CPU and at least 8 GB RAM).

Software requirements: participants must install Node.js, NPM and the Angular CLI. They also need a text editor or integrated development environment (IDE) for writing TypeScript code. Git must be installed as well, and participants should have a GitLab and a GitHub account.

‍

‍

Angular in the world of web

1. Introduction to JS frameworks

• Summary of static websites vs. dynamic full-stack web apps and overview of JS frameworks.
• Introduction to Angular
• Interactive quiz.

2. TypeScript

• What is TypeScript.
• Hands-on: Installing Node, NPM and the TypeScript compiler.
• Hands-on: Building and running a first ‘Hello World’ TypeScript project.
• Practical demo: Basic TypeScript syntax (variables, data types, modules, OOP, error handling) via the ‘Hello World’ project.
• Exercise bundle: 5 TypeScript exercises (calculator, days of the week, BMI, students, text analysis, web shop).

3. Up & running with Angular

• Summary of “Angular features” and “the value of a JS framework”.
• Hands-on: Installing the Angular CLI.
• Hands-on: Building and running a first “Hello World” Angular project.
• Overview and interactive walkthrough: the structure of an Angular project.
• Hands-on: Building and running your own “Hello Angular” project (with Bootstrap).

4. Angular components and routing

• Overview and interactive walkthrough: what Angular components are (with an example of creating a component and examining its parts).
• Overview and interactive walkthrough: Router, Routes and Router Outlet, with additional SPA explanation.

• Hands-on: Creating a homepage, “About” page and “Contact” page using components and routing.
• Assignment: The Planets (navbar, footer, homepage, blog, sign-up).

5. Data binding, directives & pipes

• Demo: What text interpolation is and how we use it.
• Hands-on: Footer with text interpolation, and planet objects in the Planets project.
• Demo: What property binding is and how we use it.
• Hands-on: href Wikipedia URL for the planet objects, interactive password field on the sign-up page.
• Demo: What event binding is and how we use it.
• Hands-on: Event-driven password field, fun-fact loader.
• Demo: Structural and attribute directives.
• Hands-on: Cookie banner with ngIf “accepted”.
• Hands-on: Array of planet objects with ngFor.
• Overview and interactive walkthrough: Pipes — what and how.
• Assignment: Blog posts (with interactive Like buttons) in The Planets.

6. Robustness with models

• Overview and interactive walkthrough: Type safety and robustness via model classes and via interfaces.
• Hands-on: Type-safety overhaul for The Planets.

7. Services & DI

• Overview and interactive walkthrough: Dependency injection and services.
• Hands-on: Creating and examining a PlanetService, then using it to manage and inject planets where needed.

• Assignment: BlogService to manage and inject blog posts dynamically.
• Assignment: Pizzeria web shop with an interactive menu and shopping cart.

8. Communication between parent and child components

• Overview and interactive walkthrough: Talking to child components using @Input.
• Hands-on: Replacing planet rows and blog posts with child components.
• Overview and interactive walkthrough: Talking to parent components using @Output.

9. Communicating with an API via HttpClient

• Overview and interactive walkthrough: A recap of the role of APIs in full-stack web apps, HttpClient and Observables, sending HTTP requests and handling HTTP responses.
• Hands-on: Stranger Things quote generator.
• Assignment: Weather app.
• Assignment: Pokémon app.
• Overview and interactive walkthrough: Storing and using environment variables correctly.
• Hands-on: Replacing hard-coded URLs with environment variables.

10. Forms and validation

• Overview and interactive walkthrough: Forms in Angular (template-driven vs. reactive).
• Hands-on: Sign-up page in The Planets.
• Assignment: Interactive shopping list.
• Assignment: Quiz app.

Objectives

By the end of the training, participants should be able to:

• Distinguish between static websites and dynamic full-stack web applications and give an overview of various JavaScript frameworks.
• Understand and use TypeScript, including the installation of Node, NPM and the TypeScript compiler.
• Understand and use basic TypeScript syntax, variables, data types, modules, OOP and error handling to build applications.
• Set up, install and run an Angular project using the Angular CLI.
• Understand the structure of an Angular project and create a simple Angular project with Bootstrap.
• Understand Angular components and routing, including creating different pages using components and routing.
• Use data binding, directives and pipes in Angular, such as text interpolation, property binding, event binding, structural and attribute directives, and pipes.
• Use model classes and interfaces for type safety and robustness in Angular.
• Understand and use dependency injection and services to manage and inject data.
• Understand and implement communication between parent and child components in Angular using @Input and @Output.
• Understand communication with an external API via HttpClient in Angular and send and handle HTTP requests.
• Store and use environment variables correctly in Angular applications.
• Understand forms in Angular — both template-driven and reactive — and apply validation.