Getting started with Angular 2 with ASP.NET Core Web API – Build a simple Notebook app

<!DOCTYPE html>
<html>
  <head>
    <base href="." />
    <title>Preview D – Angular 2 – Connect to REST WebAPI</title>
    <link rel="stylesheet" href="style.css" />
    <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>
    <notes-app>
         loading Angular2 app...
    </notes-app>
  </body>
</html>

/* Styles go here */

### Sample D - Angular 2 connect to REST WebAPI
Angular 2 http service, simulate a REST access

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/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/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)
  .then(success => console.log(`Bootstrap success`))
  .catch(err => console.error(err));

//our root app component
import { NgModule } from "@angular/core";
import { HttpModule } from "@angular/http";
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser'
import { NotesComponent } from './note.component'
import { Configuration } from './app.constants'
import { NoteService } from "./note.service";

@NgModule({
  imports: [ BrowserModule, HttpModule, FormsModule ],
  declarations: [ NotesComponent ],
  providers: [ Configuration, NoteService ],
  bootstrap: [ NotesComponent ]
})

export class AppModule {}

import { Component, OnInit } from '@angular/core';
import { NoteService } from "./note.service";
import { NoteItem } from './note.model'
import { Configuration } from './app.constants'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Component({
  selector: 'notes-app',
  template: `
  <h2>Sample D - NotebookApp - Angular 2 Connect to a REST WebAPI</h2>
  <h4>Receive data using Angular2 http service (simulate the GET action, reading json file): </h4>
  HTTP opens next url: {{_settings.ServerWithApiUrl}}
  <ul>
    <li *ngFor="let note of noteItems">
      {{note.Body}}
    </li>
  </ul>
  
  More details to: <br/>
    <a href="{{link}}" target="_blank">
       {{article}}
    </a>
  `
})

export class NotesComponent implements OnInit {
    link : string = 'http://qappdesign.com/getting-started-with-angular2-with-aspnet-core-webapi-build-notebook-app';
    article : string = 'Getting started with Angular 2 with ASP.NET Core Web API - Build a simple Notebook app - Part 1';

    public noteItems: NoteItem[];
 
    constructor(private _dataService: NoteService,
                private _settings: Configuration) {
    }
    
    ngOnInit() {
        this._dataService
            .getAll()
            .subscribe((data: NoteItem[]) => this.noteItems = data,
            error => console.log(error),
            () => console.log("getAllItems() complete from init"));
    }
}

export interface NoteItem {
    Id: string,
    Body: string,
    UpdatedOn: string,
    CreatedOn: string,
    UserId: number
}

import { Injectable } from '@angular/core';
 
@Injectable()
export class Configuration {
    public ApiServer: string = "";
    public ApiUrl: string = "api/notes.json";
    public ServerWithApiUrl: string = this.ApiServer + this.ApiUrl;
}

[
  { 
    "Id" : "AB01", 
    "Body" : "First note", 
    "UpdatedOn" : "2016-11-16 10:50:23", 
    "CreatedOn" : "2016-11-16 10:50:23", 
    "UserId" : 1 
  },
  { 
    "Id" : "AB02", 
    "Body" : "Second note, received the same using http service", 
    "UpdatedOn" : "2016-11-16 10:50:23", 
    "CreatedOn" : "2016-11-16 10:50:23", 
    "UserId" : 2 
  },
  { 
    "Id" : "AB03", 
    "Body" : "Last note", 
    "UpdatedOn" : "2016-11-17 10:50:23", 
    "CreatedOn" : "2016-11-17 10:50:23", 
    "UserId" : 3 
  }
]

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import "rxjs/add/operator/map";
import { Observable } from "rxjs/Observable";

import { NoteItem } from "./note.model";
import { Configuration } from "./app.constants";

@Injectable()
export class NoteService {
    constructor(private _http: Http, 
                private _settings: Configuration) {
    }

    public getAll = (): Observable<NoteItem[]> => {
        return this._http.get(this._settings.ServerWithApiUrl) 
            .map(data => data.json());
    };
}