From ebb9315d98eac48bc7b65396359322c8662c9ec5 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Mon, 10 Feb 2020 17:04:57 -0500 Subject: [PATCH 1/2] Add API service to connect to backend. Added environment files, to launch locally do: npm run start:local Added example usage of resource service. --- angular.json | 22 +++++++++++++ package.json | 6 ++++ src/app/app.component.ts | 26 +++++++++++++-- src/app/app.module.ts | 4 ++- src/app/services/api/api.service.ts | 24 ++++++++++++++ src/app/services/api/resource.service.ts | 40 ++++++++++++++++++++++++ src/environments/environment.dev.ts | 5 +++ src/environments/environment.local.ts | 9 ++++++ src/environments/environment.prod.ts | 4 ++- src/environments/environment.ts | 4 ++- 10 files changed, 139 insertions(+), 5 deletions(-) create mode 100644 src/app/services/api/api.service.ts create mode 100644 src/app/services/api/resource.service.ts create mode 100644 src/environments/environment.dev.ts create mode 100644 src/environments/environment.local.ts diff --git a/angular.json b/angular.json index 394993c..b1dda10 100644 --- a/angular.json +++ b/angular.json @@ -60,6 +60,22 @@ "maximumError": "10kb" } ] + }, + "local": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.local.ts" + } + ] + }, + "dev": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.dev.ts" + } + ] } } }, @@ -71,6 +87,12 @@ "configurations": { "production": { "browserTarget": "SystemNavigationFrontend:build:production" + }, + "local": { + "browserTarget": "SystemNavigationFrontend:build:local" + }, + "dev": { + "browserTarget": "SystemNavigationFrontend:build:dev" } } }, diff --git a/package.json b/package.json index 5c2ccb5..1ff5177 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,12 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "start:local": "ng serve -c=local", + "build:local": "ng build -c=local", + "start:dev": "ng serve -c=dev", + "build:dev": "ng build -c=dev", + "start:prod": "ng serve -c=prod", + "build:prod": "ng build -c=prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c0318e3..311d503 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,32 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ResourceService } from './services/api/resource.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent { +export class AppComponent implements OnInit { + title = 'SystemNavigationFrontend'; + + constructor( + private resourceService: ResourceService + ) {} + + ngOnInit() { + // Example usage of resource service. + this.resourceService.getResourceStandard('test.txt', 'text').toPromise().then(val => console.log('Test file', val)) + .catch(err => console.log(err)); + this.resourceService.getResourcePDF('radar.pdf').toPromise().then(val => { + console.log('Radar pdf', val); + const file = new Blob([val], { type: 'application/pdf' }); + const url = URL.createObjectURL(file); + console.log('PDF Viewable at', url); + console.log('Adblock prevents it from opening'); + // window.open(url); + }) + .catch(err => console.log(err)); + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..c6494bc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ @@ -10,7 +11,8 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/services/api/api.service.ts b/src/app/services/api/api.service.ts new file mode 100644 index 0000000..accc39c --- /dev/null +++ b/src/app/services/api/api.service.ts @@ -0,0 +1,24 @@ +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; +import { environment } from 'src/environments/environment'; + +export class APIService { + + protected baseURL = environment.baseURL + '/api'; + + constructor( + private http: HttpClient + ) {} + + _get(endpoint: string, options?: any) { + return this.http.get(`${this.baseURL}/${endpoint}`, options); + } + + _post(endpoint: string, body: any) { + return this.http.post(`${this.baseURL}/${endpoint}`, body); + } + + _put(endpoint: string, body: any) { + return this.http.put(`${this.baseURL}/${endpoint}`, body); + } + +} diff --git a/src/app/services/api/resource.service.ts b/src/app/services/api/resource.service.ts new file mode 100644 index 0000000..1bbfcf0 --- /dev/null +++ b/src/app/services/api/resource.service.ts @@ -0,0 +1,40 @@ +import { APIService } from './api.service'; +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) +export class ResourceService extends APIService { + + baseEndpoint = 'resources'; + + constructor( + http: HttpClient + ) { + super(http); + } + + get(endpoint: string, options?: any) { + return super._get(`${this.baseEndpoint}/${endpoint}`, options); + } + + post(endpoint: string, body: any) { + return super._post(`${this.baseEndpoint}/${endpoint}`, body); + } + + put(endpoint: string, body: any) { + return super._put(`${this.baseEndpoint}/${endpoint}`, body); + } + + getResourceStandard(key: string, responseType: string) { + return this.get(key, { responseType }); + } + + getResourcePDF(key: string) { + return this.get(`pdf/${key}`, { + responseType: 'arraybuffer' + }); + } + +} diff --git a/src/environments/environment.dev.ts b/src/environments/environment.dev.ts new file mode 100644 index 0000000..fc2b648 --- /dev/null +++ b/src/environments/environment.dev.ts @@ -0,0 +1,5 @@ +export const environment = { + production: false, + envName: 'dev', + baseURL: 'replaceMe' +}; diff --git a/src/environments/environment.local.ts b/src/environments/environment.local.ts new file mode 100644 index 0000000..a61e16f --- /dev/null +++ b/src/environments/environment.local.ts @@ -0,0 +1,9 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, + envName: 'local', + baseURL: 'http://localhost:8080/3dsysnavbackend' +}; diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..2fc0d5d 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,5 @@ export const environment = { - production: true + production: true, + envName: 'production', + baseURL: 'replaceMe' }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817..f2307aa 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,9 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + envName: 'default', + baseURL: 'http://localhost:8080/3dsysnavbackend' }; /* From 714b4e1d99923ef68fd39dcaf78a8de01abee193 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Mon, 10 Feb 2020 17:07:25 -0500 Subject: [PATCH 2/2] Update run instructions. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fbc2aba..40e1945 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,9 @@ * `npm i -g @angular/cli` Install angular cli * `npm i` Install dependencies -### Run +### Run With Local Backend -* `npm start` +* `npm run start:local` Project server is now live at `localhost:4200`