course
Angular: Building professional Single Page Applications
Are you a developer who wants to learn how to build a real-world Angular application, including TypeScript and testing? Then, this is the training for you.
Description
You will learn the ins and outs of an Angular application, including TypeScript, Angular Modules, Components, Pipes, Services, and Directives.
Building a real-life Angular application also comes with your fair share of challenges. That's why this training comes with batteries included. You will:
- Develop an actual application from the ground up.
- Learn strategies to improve type-safety using TypeScript.
- Develop unit, integration, and End To End (e2e) tests.
- Learn techniques to manage state in your Angular application.
- Learn the current Angular best practices.
This training is split into core and advanced. During the first 2 days you will get to know the basics, including the basics of TypeScript, Pipes, basics of testing, forms and components. During the next 2 days you will learn more advanced concepts such as Angular modules, advanced TypeScript, reactive programming, end-to-end testing and change detection. Both "core" and "advanced" can be booked as a separate incompany training
Prior Knowledge
Knowledge of JavaScript and HTML.
Subjects
| 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 ngIf and ngFor
- 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 ngIf and ngFor
- 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.
Schedule
| Start date | Duration | Location | |
|---|---|---|---|
January 6, 2025January 7, 2025January 8, 2025January 9, 2025 | 4 days | Veenendaal / Remote This is a hybrid training and can be followed remotely. More information Veenendaal / Remote This is a hybrid training and can be followed remotely. More information Veenendaal / Remote This is a hybrid training and can be followed remotely. More information Veenendaal / Remote This is a hybrid training and can be followed remotely. More information | Sign up |
February 10, 2025February 11, 2025February 12, 2025February 13, 2025 | 4 days | Mechelen / Remote This is a hybrid training and can be followed remotely. More information Mechelen / Remote This is a hybrid training and can be followed remotely. More information Mechelen / Remote This is a hybrid training and can be followed remotely. More information Mechelen / Remote This is a hybrid training and can be followed remotely. More information | Sign up |
February 24, 2025February 25, 2025February 26, 2025February 27, 2025 | 4 days | Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information | Sign up |
April 14, 2025April 15, 2025April 16, 2025April 17, 2025 | 4 days | Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information Utrecht / Remote This is a hybrid training and can be followed remotely. More information | Sign up |
All courses can also be conducted within your organization as customized or incompany training.
Our training advisors are happy to help you provide personal advice or find Incompany training within your organization.
Trainers
Prior knowledge courses
"The instructor was clearly very experienced and had a lot of knowledge about the subject."Mika
-
Hoge waardering
-
Praktijkgerichte trainingen
-
Gecertificeerde trainers
-
Eigen docenten