Angular: Building professional Single Page Applications

Onderwerpen

Core

1. Getting started
2. Core TypeScript
3. Pipes
4. Testing
5. Template-driven forms
6. Components
7. Integration testing
8. Dependency injection
9. Backend communication
10. Routing

Advanced 11. Angular modules 12. Advanced TypeScript 13. Reactive forms 14. End-to-end testing 15. Directives 16. Reactive programming 17. Advanced testing 18. Advanced routing 19. Change detection

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 forRoot and forChild factory 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, and TemplateRef.
• 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 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 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.