- Clone the repository:
git clone https://github.com/VicAv99/http-interceptors.git
- cd into your cloned directory:
cd http-interceptors
- Install dependencies:
npm install
- Start the application:
npm start
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface HttpInterceptor { | |
/** | |
* * **req**: The outgoing request to handle | |
* * **next**: The next interceptor in the chain, or the backend if no interceptors in the chain. | |
* | |
*/ | |
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// src/core/interceptors/blocker.interceptor.ts | |
import { Injectable } from ‘@angular/core’; | |
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’; | |
import { MatSnackBar } from ‘@angular/material’; | |
import { Observable } from ‘rxjs’; | |
@Injectable({ | |
providedIn: ‘root’ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app.module.ts | |
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’; | |
import { BlockerInterceptor } from ‘./core/interceptors/blocker.interceptor’; | |
… | |
providers: [ | |
{ provide: HTTP_INTERCEPTORS, useClass: BlockerInterceptor, multi: true } | |
], | |
… |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// src/core/interceptors/pizza.interceptor.ts | |
import { Injectable } from ‘@angular/core’; | |
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’; | |
import { Observable } from ‘rxjs’; | |
@Injectable({ | |
providedIn: ‘root’ | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app.module.ts | |
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’; | |
import { BlockerInterceptor } from ‘./core/interceptors / blocker.interceptor’; | |
import { PizzaInterceptor } from ‘./core/interceptors / pizza.interceptor’; | |
… | |
providers: [ | |
{ provide: HTTP_INTERCEPTORS, useClass: BlockerInterceptor, multi: true }, | |
{ provide: HTTP_INTERCEPTORS, useClass: PizzaInterceptor, multi: true } | |
], |
This documentation is meant to notate the build process starting from simply generating a project directory all the way to finishing with a full master detail application. This application is using the “Sparkle Stack”, which is best used in cases where a full application environment is needed (database to server to frontend). Before each step of the project below, a quick overview of technologies used will be described along with and links and references.
The root level of the application is meant as a container for our Frontend (client) and Backend (server) applications, however we also take advantage of this directory to define any workspace rules based on languages. More importantly, we compose Docker at this level.
- Makefile
- Docker
- editorconfig/prettier
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import '~@angular/material/theming'; | |
@include mat-core(); | |
$mat-primary: ( | |
50: #e8f8fd, | |
100: #b9eaf9, | |
200: #0e81a4, | |
300: #0c6f8d, | |
400: #0a5d76, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { NgModule } from '@angular/core'; | |
import { MatButtonModule } from '@angular/material/button'; | |
import { MatCardModule } from '@angular/material/card'; | |
import { MatCheckboxModule } from '@angular/material/checkbox'; | |
import { MatFormFieldModule } from '@angular/material/form-field'; | |
import { MatGridListModule } from '@angular/material/grid-list'; | |
import { MatIconModule } from '@angular/material/icon'; | |
import { MatInputModule } from '@angular/material/input'; | |
import { MatListModule } from '@angular/material/list'; | |
import { MatMenuModule } from '@angular/material/menu'; |