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

@@ -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"
             }
           }
         },

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"

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));
+  }
+
 }

src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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);
+    }
+
+}

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'
+        });
+    }
+
+}

src/environments/environment.dev.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  envName: 'dev',
+  baseURL: 'replaceMe'
+};

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'
+};

src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  production: true,
+  envName: 'production',
+  baseURL: 'replaceMe'
 };

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'
 };
 
 /*