Building the main app component - lennartdeknikker/frontend-applications GitHub Wiki

Setting up the app module.

By doing the tutorial provided by Angular.io, I learned to work with the cli to create components like this one. I actually used the product created when following the tutorial as a boilerplate. First I created the index.html file, where the angular application gets injected into. This file then looked like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indonesian Ancestor Statues</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
  <app-root></app-root>
</body>
</html>

To be able to deploy the application on netlify, I had to add a _redirects file, containing this line:

/*    /index.html    200

Working with Angular, all components need to be imported in a main app.module.ts file. this file then makes all components available throughout the application. With these first two lines, the necessary modules are imported:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';

Then all of my components are imported with these lines:

import { AppComponent } from './app.component';
import { StatueDetailComponent } from './statue-detail/statue-detail.component';
import { StatueListComponent } from './statue-list/statue-list.component';
import { LocationsMapComponent } from './locations-map/locations-map.component';
import { HttpClientModule } from '@angular/common/http';

Then I needed to add all these components and other imports as declarations like this:

@NgModule({
  declarations: [
    AppComponent,
    StatueDetailComponent,
    StatueListComponent,
    LocationsMapComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Lastly, the whole module is exported with this last line:

export class AppModule { }

Creating the main component and obtaining the necessary data

importing the necessary modules

To get the main component working and get it to obtain the data, there's two imports needed:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

Binding the template and styling

Then this main component needs to be bound to a selector, an html template seperated in a different file and a file containing the css styling. These are declared as shown below. Angular then automatically makes that work:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

Obtaining the data

To obtain the data and make it available for all the components, the data is obtained in the main app component. The http module needs the url containing the SPARQL query which is provided in a variable shown below:

export class AppComponent {
    locations = [];
    title = "Indonesian Ancestor Figurines"
    url = `https://api.data.netwerkdigitaalerfgoed.nl/datasets/ivo/NMVW/services/NMVW-29/sparql?default-graph-uri=&query=PREFIX+dc%3A+%3Chttp%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%3E%0D%0APREFIX+dct%3A+%3Chttp%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%3E%0D%0APREFIX+skos%3A+%3Chttp%3A%2F%2Fwww.w3.org%2F2004%2F02%2Fskos%2Fcore%23%3E%0D%0APREFIX+edm%3A+%3Chttp%3A%2F%2Fwww.europeana.eu%2Fschemas%2Fedm%2F%3E%0D%0A%0D%0ASELECT+%3Flocation+%28COUNT%28%3Flocation%29+AS+%3FamountOfStatues%29+WHERE+%7B%0D%0A+++%09%3Chttps%3A%2F%2Fhdl.handle.net%2F20.500.11840%2Ftermmaster7745%3E+skos%3Anarrower*+%3Fplace+.%0D%0A+++%09%3Fplace+skos%3AprefLabel+%3Flocation+.%0D%0A%0D%0A++VALUES+%3Ftype+%7B+%22Voorouderbeelden%22+%22Voorouderbeeld%22+%22voorouderbeelden%22+%22voorouderbeeld%22+%7D%0D%0A++%0D%0A++%09%3Fcho+dct%3Aspatial+%3Fplace+%3B%0D%0A++++++++dc%3Atype+%3Ftype+%3B%0D%0A++++++++dc%3Atitle+%3Ftitle+%3B%0D%0A++++++++dc%3Adescription+%3Fdescription+%3B%0D%0A++++++++dct%3Aextent+%3Fextent+%3B%0D%0A++++++%09dct%3Acreated+%3FcreationDate+%3B%0D%0A++%09%09edm%3AisShownBy+%3FimageLink+.%0D%0AFILTER+langMatches%28lang%28%3Ftitle%29%2C+%22ned%22%29%0D%0A%7D%0D%0AORDER+BY+DESC%28%3FamountOfStatues%29%0D%0A%23+LIMIT+...%E2%80%83&format=application%2Fsparql-results%2Bjson&timeout=0&debug=on`

Then the data is obtained in the constructor class and saved in the locations variable:

    constructor(private http: HttpClient) {
        this.http.get(this.url).subscribe(response=> {
          let allData = []
          const responseData = response;
          allData.push(responseData);
          allData[0].results.bindings.forEach(object => {
            this.locations.push(object.location.value);            
          });
        })      
    }

}

This data is then passed on to the map component in the connected html template:

<header>
    <a href="http://www.volkenkunde.nl/"><img src="../assets/logo-volkenkunde.svg" alt="logo volkenkunde" class="logo"></a>
    <div class="header-message-block">
        <span class="message">{{title}}</span>
    </div>
</header>
<app-locations-map [locationsList]="locations"></app-locations-map>

Check out the application here

⚠️ **GitHub.com Fallback** ⚠️