Angular and NgRx
  • Introduction
  • Setup
  • 1. Create an application
  • 2. Create a home component
  • 3. Test HomeComponent
  • 4. Create event feature module
  • 5.Create AddAttendeeComponent
  • 6. Test AddAttendeeComponent
  • 7. Listen to child component events
  • 8. Add test for the event emitter
  • 9. Create EventListComponent
  • 10. Test EventListComponent
  • 11. Create EventService
  • 12. Test EventService
  • 13. Add simple NgRx spinner
  • 14. Test reducer
  • 15. Strongly type our store
  • 16. Update reducer tests
  • 17. Store dev tools
  • 18. Create selectors
  • 19. Create feature state
  • 20. Create effect
  • 21. Test an effect
  • 22. Use Entity Adapter
  • 23. Add attendee logic
  • 24. Router store
  • 25. Fix EventComponent tests
Powered by GitBook
On this page
  • Slides for this section
  • Introduction
  • Repository for the Demo App
  • Repository for the gitbook

Introduction

In this section we will introduce the course and section slides.

NextSetup

Last updated 6 years ago

Introduction

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

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

  • Node.js (version 8 or later)

  • Angular CLI (latest version)

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

Repository for the Demo App

Repository for the gitbook

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 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.

Slides for this section
angular.io
GitHub - duncanhunter/angular-and-ngrx-demo-appGitHub
GitHub - duncanhunter/angular-and-ngrx-gitbook: Angular and NgRx Workshop Gitbook RepoGitHub
Logo
Logo