Site Visits, an Angular 8 application with .NET Core 3 backend that displays tabular data in an Angular Material table. It's built with:
- Angular 8
- ngrx (state, store, effects, actions, reducers)
- Angular Material Table
- Angular Material Paginator with server-side pagination
- routed pagination, i. e. each page is accessible by a route <resource_collection>/<page_number>/size/<page_size>
The data this application displays is a log of website visits, collected by StatCounter, my favorite website statistics tracking application. For a long time I have been downloading visit statistics for my various websites from StatCounter as .csv files. I have imported those CSV files into a database (I wrote a separate program for that), and I wrote this application to read from the database and display that data in ways that are convenient and interesting to me.
The application is currently running at http://elzecode.com/visitsnc3ng/flat-visits . It is pretty barebones at this point, but I'm adding more features to it.
I wrote a couple of blog articles about the problems I overcome while building and deploying it:
SkillClusters with Angular 11, Angular Material Tree and @ngrx/data. The data this application displays doesn't make much sense at the moment. It's a work in progress. For now, its purpose is to demonstrate how to get Angular Material Tree to work with @ngrx/data. It uses Angular 11 and @ngrx/data 10.
One of the first challenges you encounter in working with
@ngrx/data is that it assumes what your backend API URLs are. It makes an assumption that your URLs use the singular version of the entity name for single entity routes, and plural version of entity names for collection routes. So, it will call
GET /user/1 if you want to get a single user, and
GET /users/ if you want to get all the users. It also appends a trailing slash. But your backend API routes could be named differently and that might be out of your control as a frontend developer. So as soon as you start working with
@ngrx/data you are likely to run into this problem.
There are a couple of similar ways to solve it, and this application shows one of them.