Tour of Heroes - Angular Preload and Http Interceptors Demo
This project was created to help represent a fundamental app written with Angular that demonstrates preload strategies, guards, and http interceptors. The heroes and villains theme is used throughout the app.
by John Papa
Getting Started
-
Clone this repository
git clone https://github.com/johnpapa/angular-preload-and-interceptors.git tour cd tour -
Install the npm packages
npm run full-stack
What's in the App
Here is a list of the features in this app:
- Start from the official quick-start and CLI
- Client side routing
- Three main routes Heroes, Villains, About
- Handles an erroneous route, leading to a PageNotFound component
- Active route is highlighted in the nav menu
- Routing should use html5 mode, not hash routes
- Routing guards
- Preload strategies
- API
- JSON server as a backend
- App served on one port which can access API on another port proxy or CORS)
- HTTP - Uses most common client http libraries for each framework
- HTTP interceptors
- API routes are restricted to those who sign in except
movies - API route
moviesis readonly to all (no sign in required)
- Auth
- Sign in and sign out with json-server-auth
- Styling
- Bulma
- SASS
- Font Awesome
- Same exact css in every app
- Editing - Heroes and Villains will be editable (add, update, delete)
- State/Store - Uses a store for state management
- Web development server handles fallback routing
- Generic components
- Modal
- Button Tool
- Card
- Header bar
- List header
- Nav bar
- Props in and emit events out
- Environment variable for the API location
Why JSON Server?
The app uses a JSON server for a backend by default. This allows you to run the code without needing any database engines or cloud accounts. It also supports authorized routes, which this app takes advantage of. iEnjoy!
Interceptors
Sequence is super important with interceptors. The flow in sequence for requests, and then in the opposite order for responses.
export const httpInterceptorProviders = [
/**
* Log Http:
* This logs all HTTP traffic.
* Should be first-ish so it can log the Http call happening in and out (last).
*/
{ provide: HTTP_INTERCEPTORS, useClass: LogHttpInterceptor, multi: true },
/**
* ReadOnly:
* Do this before we add headers, get busy, or make the call.
*/
{ provide: HTTP_INTERCEPTORS, useClass: ReadOnlyInterceptor, multi: true },
/**
* SSL, Auth, CSRF:
* Now that it has passed the readonly test, we want to stuff headers and proceed.
*/
{ provide: HTTP_INTERCEPTORS, useClass: EnsureSSLInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true },
/**
* Log headers:
* Must come after the headers are stuffed.
*/
{ provide: HTTP_INTERCEPTORS, useClass: LogHeadersInterceptor, multi: true },
/**
* Busy:
* Should be first so it can turn on first, and off last.
*/
{ provide: HTTP_INTERCEPTORS, useClass: BusyInterceptor, multi: true },
/**
* Transform Response:
* this could happen anywhere in this particular stream,
* as long as it happens after the first Http log.
* Why? Because the interceptors are FIFO
*/
{ provide: HTTP_INTERCEPTORS, useClass: TransformResponseInterceptor, multi: true },
];