Refresh Data without Refreshing the Page with Angular and RxJS
In this short video, we review how to refresh data on our @Angular web application without refreshing the browser using RxJS.
Our existing code will report the health status of our back-end server each time the browser is refreshed, but that's a pretty lame user experience. To automatically refresh the data for our users, we use RxJS Observables, a fixed interval timer, and a switchMap to keep our Angular web application data fresh.
Requires: Git, Node, NPM, and the Angular CLI
------------------------------------------------------------------------
Steps to run the web app locally:
1. Clone the full-stack-auth-repo: $ git clone https://github.com/pjl-software/full-... and change directories into full-stack-auth-repo: $ cd full-stack-auth-repo
2. Checkout the 04-angular-spring-local-integration branch: $ git checkout 04-angular-spring-local-integration
3. Start the back-end server in one terminal by running $ ./spring-back-end/bin/local-startup-scripts/build-and-run
4. Start the front-end server in another terminal by running $ ./spring-back-end/bin/local-startup-scripts/build-and-run
5. Navigate to https://localhost:4200
------------------------------------------------------------------------
Chapters
0:00 - Running our Legacy Web Application
1:00 - Implement Auto-Polling Code
2:01 - Demo of the Updated Web Application