Workshop: Angular and NgRx

Managing state when building robust and rich single page applications that are bug-free requires good patterns and practices.

In this workshop, we walk through a thorough introduction into using NgRx, a RxJS powered state management library for Angular applications, inspired by Redux.

We will look at how to use the Angular CLI to build, scaffold and deploy your angular applications to production.

We will be implementing NgRx actions, reducers, effects, entity adapters, router-store, onPush change detection and a single immutable data structure called the store.

We will look at common patterns for structuring your applications state by feature and how to deal with splitting up related data into multiple reducers. Then will we will look at how to create selectors to combine multiple slices of state from the store.

By the end of this workshop, you will have built a working Angular and NgRx application you can extend into your applications. You will also walk away with the source code and the course material. So join me and bring your laptops to this workshop where you will get to code along as we build and learn to make excellent Angular applications.

Agenda

  • Angular CLI
  • Component architecture with container and presentational components
  • Services and HTTP
  • Routing
  • Reactive forms
  • Redux principle
  • NgRx store
  • Store DevTools
  • NgRx effects
  • NgRx selectors
  • NgRx entity state adapter
  • NgRx router actions and effects
  • Building and deploying you angular applications
  • Unit and e2e testing

Prerequisites
This workshop is for developers with at least a basic understanding of JavaScript and HTML. You do not need angular v2+ experience to attend this course, but it is recommended to have done at least the beginner's tutorial on angular.io or equivalent. This course briefly covers the fundamentals of angular components, services, routing, and modules but moves onto talking about using them with ngrx for the majority of the workshop.

Computer Setup
You need to bring your laptop with the below software installed to follow this workshop:

  • Visual Studio Code
  • A command line Git client
  • NodeJS v8+
  • Angular CLI (At latest)

If you get stuck, we can help you on the day, but it helps to have this already installed.