training
Angular: Building Professional Web Applications
Ben jij een developer die wil leren hoe je een echte Angular-applicatie bouwt, inclusief TypeScript en testen? Dan is deze training voor jou.
Beschrijving
Je leert de ins en outs van een Angular-applicatie kennen, inclusief TypeScript, Angular Modules, Components, Pipes, Services en Directives.
Het bouwen van een echte Angular-applicatie brengt ook heel wat uitdagingen met zich mee. Daarom leer je in deze training meer aspecten kennen. Je:
- Ontwikkelt een echte applicatie van de grond af aan.
- Leert strategieën kennen om type-safety te verhogen met behulp van TypeScript.
- Ontwikkelt unit-, integratie- en End To End (e2e) tests.
- Leert technieken om de state in je Angular-applicatie te managen.
- Leert de huidige best practices op het gebied van Angular.
Deze training is opgesplitst in basis en advanced. Tijdens de eerste 2 dagen leer je de basis kennen, met onder andere de basis van TypeScript, Pipes, basis van testen, formulieren en componenten. Tijdens de 2 volgende dagen leer je geavanceerdere concepten zoals Angular modules, advanced TypeScript, reactive programming, end-to-end testing en change detection. Zowel 'core' en 'advanced' zijn ook los af te nemen als incompany training.
Leerdoelen
 Recall the purpose of Angular as an opinionated front-end framework and its main advantages over competitors | Remember  |
| Identify the role of the Angular CLI and list commonly used commands | Remember |
| Recognize core Angular building blocks such as components, templates, services, pipes, and directives | Remember |
| Recall essential TypeScript language features used in Angular (types, interfaces, classes, decorators, generics) | Remember |
| List the different testing levels in Angular (unit, integration, UI/e2e) and their purpose in the testing pyramid | Remember |
| Identify the three supported form approaches in Angular (template-driven, reactive, signal-based) | Remember |
| Explain how data binding works in Angular, including interpolation, property binding, event binding, and two-way binding | Understand  |
| Explain the relationship between components, templates, and styles, and how Angular implements component-based development | Understand |
| Describe how TypeScript's static typing improves maintainability and safety in Angular applications | Understand |
| Explain the concept of dependency injection | Understand |
| Describe reactivity in Angular with signals and observables | Understand |
| Explain the difference between signals and observables and why signals are the preferred reactive primitive | Understand |
| Explain how Angular routing enables navigation between multiple views in a single-page application | Understand |
| Explain how Angular handles change detection and performs DOM updates | Understand |
| Construct a new Angular application using the Angular CLI and run it locally | Apply  |
| Implement components with inputs and outputs to enable communication between parent and child components | Apply |
| Construct reusable pipes and use them in templates to format displayed data consistently | Apply |
| Implement signal-based state management to update and derive UI state reactively | Apply |
| Construct forms using signal-based forms, including field-level and cross-field validation | Apply |
| Write unit and integration tests for components, pipes, and services using Vitest and Angular testing tools | Apply |
Implement communication between frontend and backend using the HttpClient | Apply |
| Implement RxJS operators to transform and control data streams | Apply |
| Apply Angular routing to structure an application with multiple pages and navigation | Apply |
Benodigde voorkennis
Kennis van JavaScript en HTML.
Onderwerpen
| Core | Advanced |
|---|---|
| Getting started | Angular modules |
| Core TypeScript | Advanced TypeScript |
| Pipes | Reactive forms |
| Testing | End-to-end testing |
| Template-driven forms | Directives |
| Components | Reactive programming |
| Integration testing | Advanced testing |
| Dependency injection | Advanced routing |
| Backend communication | Change detection |
| Routing |
Getting started
In this chapter, you will learn how to create an Angular application and do some basic tasks.
Goals:
- Learn the basics of a NodeJS project.
- Learn the basics of the Angular CLI
- Know the basic template syntax with
@ifand@for - Learn the data-binding syntax using the different kinds of brackets.
Core TypeScript
In this chapter, you will learn JS and TypeScript features to perform tasks and improve the maintainability of your code.
Goals:
- Learn how to use the following language features:
- Modules
- Arrow functions
- Types
- Classes
- Interfaces
- Learn how strictness works in TypeScript and Angular.
Pipes
In this chapter, you will learn how to create and use a Pipe in Angular to format your data.
Goals:
- Learn what problem we're solving with Pipes.
- Learn what a Pipe is and how to use it.
- Know what the build-in Pipes are.
- Learn to create your own Pipe.
- Learn how to localize Pipes with the Intl API.
Testing
In this chapter, you will learn the basics of testing a Single Page Application and how to write unit tests.
Goals:
- Contextualize testing a SPA using the Testing Pyramid
- Know the levels of testing in Angular: unit, integration, and e2e.
- Be able to write a unit test using the Jasmine or Jest framework.
- Learn how to implement unit tests for a Pipe.
Template-driven forms
In this chapter, you will learn how to use Angular to implement template-driven forms.
Goals:
- Know the two ways to implement forms: template-driven vs. reactive forms.
- Learn how Angular applies CSS classes to style form components.
- Learn how to validate form controls and how to show a validation message.
Components
In this chapter, you will learn about the core building block of our application: the Angular Component.
Goals:
- Know how to create components.
- Learn how to communicate between components using data binding and event emitters.
- Learn what the Angular naming convention is and how to use it.
- Know the component lifecycle hooks and how to use them.
Integration testing
Goals:
- Learn how to create a testing module using the TestBed
- Learn how to test the rendered HTML.
- Learn to create components using the ComponentFixture API.
Dependency injection
In this chapter, you will learn about one of Angular's core concepts: Dependency Injection (DI).
Goals:
- Know why we want to use DI.
- Learn how to create and use a Service.
- Learn how to configure DI.
- Know how to control the scope of dependencies.
Backend communication
In this chapter, you will learn to perform HTTP calls.
Goals:
- Learn how to inject and use Angular's HTTP client.
- Learn how to test a Service using an HTTP client.
- Learn how to create and use an HTTP Interceptor.
Routing
In this chapter, you will learn what "routing" means in an SPA, how to implement routing, configure routes, and pass data via routes.
Goals:
- Learn to use the RouterModule to create routes.
- Learn how to choose the dynamic location in our application.
- Learn to create a navigation bar.
- Learn how we can pass data via routes.
Angular Modules
In this chapter, you will learn to build up your application with multiple modules.
Goals:
- Know what an Angular module is and when to use them.
- Learn to split up your application in multiple modules.
- Learn how to use an third-party module.
- Understand when to use
forRootandforChildfactory methods.
Advanced TypeScript
In this chapter, you will learn more advanced TypeScript features to perform tasks and improve the maintainability of your code.
Goals:
- Learn how to use the following language features:
- Union types
- Mapped types
- Learn how to implement a type-safe factory method.
Reactive forms
In this chapter, you will learn how to use the other way of developing forms: Reactive forms.
Goals:
- Learn how Angular applies CSS classes to style form components.
- Learn how to maintain type safety in the context of forms.
- Learn to create dynamic form elements.
- Learn to create a custom validator.
End-to-end testing
In this chapter, you will learn how to test our UI with an e2e testing framework.
Goals:
- Learn some of the libraries for browser automation and testing with some of the pros and cons for each.
- Learn to implement e2e tests in Cypress or Playwright.
- Learn to improve code quality using the Page Object Model.
Directives
In this chapter, you will learn about Directives in Angular.
Goals:
- Know what Directives are and identify when you would want to use them.
- Know the difference between a Structural Directive and an Attribute Directive
- Learn how to create your own directives.
- Learn to add application behavior using
ElementRef,HostListener,Input,Output, andTemplateRef. - Know how two-way data-binding works and how to implement it yourself.
Advanced testing practices
In this chapter, you will learn advanced testing practices.
Goals:
- Learn how to mock away dependencies
- Learn to trigger change detection manually.
- Learn how to test async code.
- Learn how to simulate events.
- Use mutation testing to validate your tests.
Reactive programming
In this chapter, you will learn reactive programming with RxJS, and strategies to manage the application state.
Goals:
- Learn what an
Observableis, what problem it is trying to solve, and the difference with aPromise. - Know where Observables are used in an Angular application.
- Learn how to work with Observables to
transform,filter, or combine data. - Learn what state management with Subjects.
- Implement a Store pattern using a
BehaviorSubject
Child routing
In this chapter, you will learn how to split up your routing across multiple modules as well as how to lazy load parts of your application.
Goals:
- Know how to split up routing across multiple modules.
- Learn to protect routes using "Guards".
- Know what 'lazy loading' is and how to use it to speed up our application.
Change detection
In this chapter, you will perform a deep dive into the inner workings of Angular, including ZoneJS and change detection.
Goals:
- Know what ZoneJS is and why Angular uses it.
- Learn the difference between Pure and Impure pipes.
- Know what change detection strategies are and configure them for a component or directive.
- Know how to mark a component for change detection manually.
Getting started
In this chapter, you will learn how to create an Angular application and do some basic tasks.
Goals:
- Learn the basics of a NodeJS project.
- Learn the basics of the Angular CLI
- Learn how to create an Angular Component
- Know the basic template syntax with
@ifand@for - Learn the data-binding syntax using the different kinds of brackets.
TypeScript
In this chapter, you will learn advanced JS and TypeScript features to perform tasks and improve the maintainability of your code.
Goals:
- Learn how to use the following language features: ** Modules ** Arrow functions ** Types ** Classes ** Interfaces ** Union types ** Mapped types
- Learn how to implement a type-safe factory method.
- Learn how strictness works in TypeScript and Angular.
Pipes
In this chapter, you will learn how to create and use a Pipe in Angular to format your data.
Goals:
- Learn what problem we're solving with Pipes.
- Learn what a Pipe is and how to use it.
- Know what the build-in Pipes are.
- Learn how to localize Pipes with the Intl API.
- Learn to create your own Pipe.
- Learn the difference between Pure and Impure pipes.
Testing
In this chapter, you will learn the basics of testing a Single Page Application and how to write unit tests.
Goals:
- Contextualize testing a SPA using the Testing Pyramid
- Know the levels of testing in Angular: unit, integration, and e2e.
- Be able to write a unit test using the jasmine framework.
- Learn how to implement unit tests for a Pipe.
- Use mutation testing to validate our test.
Forms
In this chapter, you will learn how to use Angular to implement forms.
Goals:
- Know the two ways to implement forms: template-driven vs. reactive forms.
- Learn how to validate form controls and how to show validation messages.
- Learn how Angular applies CSS classes to style form components.
- Learn how to maintain type safety in the context of forms.
E2E Testing
In this chapter, you will learn how to test our UI with an e2e testing framework. Goals:
- Learn some of the libraries for browser automation and testing with some of the pros and cons for each.
- Learn to implement e2e tests in Cypress or Playwright.
- Learn to improve code quality using the Page Object Model.
Components
In this chapter, you will learn about the core building block of our application: the Angular Component.
Goals:
- Know how to create components
- Learn how to communicate between components using data binding and event emitters.
- Learn what the Angular naming convention is and how to use it.
- Know the component lifecycle hooks and how to use them.
Integration test
In this chapter, you will learn how to write and maintain integration tests in Jasmine using Angular's abstraction.
Goals:
- Learn how to create a testing module using the TestBed
- Learn how to mock away dependencies
- Learn how to test the actual HTML.
- Learn to create components using the ComponentFixture API.
- Learn to trigger change detection manually.
- Learn how to test async code.
- Learn to use mutation testing to validate our tests.
Dependency injection
In this chapter, you will learn about one of Angular's core concepts: Dependency Injection (DI).
Goals:
- Know why we want to use DI.
- Learn how to create and use a Service.
- Learn how to configure DI.
- Know how to control the scope of dependencies.
Directives
In this chapter, you will learn about Directives in Angular.
Goals:
- Know what Directives are and identify when you would want to use them.
- Know the difference between a Structural Directive and an Attribute Directive
- Learn how to create your own directives.
- Learn to add application behavior using ElementRef, HostListener, Input, Output, and TemplateRef.
- Know how two-way data-binding works and how to implement it yourself.
Reactive programming
In this chapter, you will learn about reactivity, observables and strategies to manage the application state. Goals:
- Learn what an Observable is, what problem it is trying to solve, and the difference with a Promise.
- Know where Observables are used in an Angular application.
- Learn how to work with Observables to transform, filter, or combine data.
- Learn how to inject and use Angular's HTTP client.
- Learn how to test a Service using an HTTP client.
- Learn how to create and use an HTTP Interceptor.
Routing
In this chapter, you will learn what "routing" means in an SPA, how to implement routing, configure routes, pass data via routes, and guard for route changes. Goals:
- Learn to use the RouterModule to create routes.
- Learn how to choose the dynamic location in our application.
- Learn to create a navigation bar.
- Learn how we can pass data via routes.
- Learn to protect routes via "Guards".
- Know what 'lazy loading' is and how to use it to speed up our application.
Internals
In this chapter, you will perform a deep dive into the inner workings of Angular, including ZoneJS and change detection. Goals:
- Know what ZoneJS is and why Angular uses it.
- Know what change detection strategies are and configure them for a component or directive.
- Know how to mark a component for change detection manually.
Planning
| Startdatum | Duur | Locatie | |
|---|---|---|---|
13 april 202614 april 202615 april 202616 april 2026 | 4 dagen | Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie | Inschrijven |
Incompany of persoonlijk advies nodig?
Onze opleidingsadviseurs denken graag met je mee om een persoonlijk advies te geven of een incompany training binnen jouw organisatie te vinden.
Trainers
Voorkennis trainingen
"Deze training was direct toepasbaar op het project"Cursist
-
Hoge waardering
-
Praktijkgerichte trainingen
-
Gecertificeerde trainers
-
Eigen docenten