Interaction with Servers

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.window.AngularVersionForThisPlunker = 'latest'
    </script>
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

import 'rxjs/add/operator/do'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/concatMap'

//our root app component
import {Component, NgModule, Injectable} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule, ActivatedRoute}  from '@angular/router';
import {HttpModule, Http} from '@angular/http';

class ListedEntity {
  id : number;
  name : string;
  
  constructor(id : number, name : string) {
    this.id = id;
    this.name = name;
  }
}

class Entity extends ListedEntity {
  author : string;
  
  constructor(id : number, name : string, author : string) {
    super(id, name);
    this.author = author;
  }
}

@Injectable()
class EntityProvider {
  private _entities : ListedEntity[] = [];
  private _http : Http;
  
  constructor(http: Http) {
    this._http = http;
    console.log("Started Entity Provider", this._http);
    this.refreshEntities();
  }
  
  get entities() {
    return (this._entities);
  }
  
  entityById(id : number) {
    return (
      this._http
        .get(`https://webanwendungen.fh-wedel.de/interactive/api/entity/${0}`)
        .do(res => console.log(`1 - Detail Response:`, res))
        .map(res => res.json())
        .do(res => console.log(`2 - Detail response as JSON:`, res))
        .map(res => new Entity(res.id, res.name, res.author)))
        .do(res => console.log(`3 - Detail response as Entity:`, res))
    );
  }
  
  private refreshEntities() {
    this._http
      .get(`https://webanwendungen.fh-wedel.de/interactive/api/entity/`)
      .do(res => console.log(`1 - List Response:`, res))
      .map(res => res.json())
      .do(res => console.log(`2 - List response as JSON:`, res))
      .map(res => res.map(e => new ListedEntity(e.id, e.name)))
      .do(res => console.log(`3 - List response as ListedEntity[]:`, res))
      .subscribe(res => this._entities = res)
  }
}

@Component({
  selector: 'entity-list',
  templateUrl : 'src/entity-list.html'
})
class EntityListComponent {
  private _ep : EntityProvider;
  
  constructor(ep : EntityProvider) {
    this._ep = ep;
  }
  
  get entities() {
    return this._ep.entities;
  }
}

@Component({
  selector: 'entity-show',
  templateUrl : 'src/entity-show.html'
})
class EntityShowComponent {
  private _entity : Entity;
  
  constructor(ep : EntityProvider,
              route: ActivatedRoute) {
    route.paramMap.subscribe(
      p => this._entity = ep.entityById(+p.params['entityId'])
    )
  }
  
  get entity() {
    return this._entity;
  }
}

@Component({
  selector: 'my-app',
  templateUrl : 'src/about.html'
})
export class AboutComponent {
  
}

@Component({
  selector: 'my-app',
  templateUrl : 'src/app.html'
})
export class App {
  
}

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      {
        path: 'entities',
        component: EntityListComponent
      },
      {
        path: 'entity/:entityId',
        component: EntityShowComponent
      },
      {
        path: 'about',
        component: AboutComponent
      }
    ])
  ],
  declarations: [ App, 
                  EntityListComponent,
                  EntityShowComponent,
                  AboutComponent ],
  bootstrap: [ App ],
  providers: [ EntityProvider ]
})
export class AppModule {}

<h1>💖 Meine liebsten Wesenheiten 💖</h1>

<a routerLink="about">Über mich</a>
<a routerLink="entities">Wesenheiten</a>

<router-outlet></router-outlet>

<div *ngFor="let entity of entities">
  <a [routerLink]="['/entity', entity.id]">
    <h2>{{ entity.name }}</h2>
  </a>
</div>

<p>
  Meine Hobbies sind Lesen 📕, Schwimmen 🏊, Reiten 🏇
  und das Studium des Necronomicons 💗. *winky-face*
</p>

<!-- This is not best practise! The entity will be requested twice -->
<h3>Alles über {{ (entity | async)?.name }}</h3>
<p>Autor: {{ (entity | async)?.author }}</p>