Feature/sample backend communication

{{cookiecutter.slug}}/frontend.angular/package.overwrite.json

@@ -8,12 +8,12 @@
         "build:{{code}}": "ng build --configuration=production-{{code}}",
 {%- endfor %}
         "i18n": "ng xi18n --output-path locale",
-        "serve": "ng serve --liveReload=false --proxy-config ../proxy.conf.json",
+        "serve": "ng serve --proxy-config ../proxy.conf.json",
         "start": "yarn serve",
 {% set localizations = cookiecutter.localizations.split(',') %}
 {%- for loc in localizations %}
 {%- set code, name = loc.split(':') %}
-        "serve:{{code}}": "ng serve --liveReload=false --proxy-config ../proxy.conf.json --configuration={{code}}",
+        "serve:{{code}}": "ng serve --proxy-config ../proxy.conf.json --configuration={{code}}",
 {%- endfor %}
         "test": "ng test --watch=true",
         "test-once": "ng test --watch=false",

{{cookiecutter.slug}}/frontend.angular/src/app/home/home.component.html

@@ -1,5 +1,7 @@
 <h1 class="title">Home</h1>
 <p>NOICE! It works!</p>
 <figure class="image" style="width: 480px;height: 401px;">
-    <img src="https://media.giphy.com/media/yoJC2GnSClbPOkV0eA/source.gif" />
+    {% raw -%}
+    <img src="{{hooray}}" alt="Although? If you are seeing this (and not a happy GIF), something is wrong... :("/>
+    {%- endraw %}
 </figure>

{{cookiecutter.slug}}/frontend.angular/src/app/home/home.component.ts

@@ -1,15 +1,25 @@
 import { Component, OnInit } from '@angular/core';
+import { BackendService } from './../services/backend.service';
 
 @Component({
   selector: '{{cookiecutter.app_prefix}}-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
+    hooray: string;
 
-  constructor() { }
+    constructor(private backend: BackendService) { }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+        // This is just an example call to /api/whatever
+        // Note that the backend service doesn't call the backend yet
+        // and simply returns some mock data
+        this.backend.get('whatever').then(hoorays => {
+            if (hoorays.length) {
+                this.hooray = hoorays[0].message;
+            }
+        });
+    }
 
 }

{{cookiecutter.slug}}/frontend.angular/src/app/services/backend.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BackendService } from './backend.service';
+
+describe('BackendService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: BackendService = TestBed.get(BackendService);
+    expect(service).toBeTruthy();
+  });
+});

{{cookiecutter.slug}}/frontend.angular/src/app/services/backend.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ConfigService } from './config.service';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BackendService {
+    private apiUrl: Promise<string> | null = null;
+
+    constructor(private config: ConfigService, private http: HttpClient) { }
+
+    /**
+     * Collect JSON from an specific url.
+     * @param objectUrl The part of the URL after the backendUrl from config.json.
+     * (i.e. whatever comes after, for example, '/api/')
+     */
+    get(objectUrl: string): Promise<any> {
+        return this.getApiUrl().then(baseUrl => {
+            if (!objectUrl.endsWith('/')) { objectUrl = `${objectUrl}/`; }
+            const url: string = encodeURI(baseUrl + objectUrl);
+
+            // TODO: remove this part and enable below to actually contact the backend
+            return Promise.resolve([{
+               message: 'https://media.giphy.com/media/yoJC2GnSClbPOkV0eA/source.gif'
+            }]);
+
+            // return this.http.get(url)
+            //     .toPromise()
+            //     .then(response => {
+            //         return response;
+            //     })
+            //     .catch(this.handleError);
+        });
+    }
+
+    getApiUrl(): Promise<string> {
+        if (!this.apiUrl) {
+            return this.config.get().then(config => config.backendUrl);
+        } else {
+            return Promise.resolve(this.apiUrl);
+        }
+    }
+
+    private handleError(error: any): Promise<any> {
+        console.error('An error occurred', error);
+        return Promise.reject(error.message || error);
+    }
+}

{{cookiecutter.slug}}/frontend.angular/src/app/services/config.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ConfigService = TestBed.get(ConfigService);
+    expect(service).toBeTruthy();
+  });
+});

{{cookiecutter.slug}}/frontend.angular/src/app/services/config.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export interface Config {
+    backendUrl: string;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ConfigService {
+    private config: Promise<any>;
+
+    constructor(private http: HttpClient) { }
+
+    public get(): Promise<Config> {
+        if (!this.config) {
+            this.config = new Promise<Config>((resolve, reject) =>
+                this.http.get('/assets/config.json').subscribe(response => {
+                    resolve(response as Config);
+                }));
+        }
+
+        return this.config;
+    }
+}

{{cookiecutter.slug}}/frontend.angular/src/assets/config.json

@@ -0,0 +1,3 @@
+{
+    "backendUrl": "/api/"
+}