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

<!DOCTYPE html>
<html>
  <head>
    <base href="." />
    <title>Preview C – Angular 2 – First component </title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <notes-app>
         loading Angular2 app...
    </notes-app>

    <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>
  </body>
</html>

/* Styles go here */

### Sample C - Angular 2 Dependecy Injection / injectable
Settings class

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',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.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 {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {NotesComponent} from './note.component'
import {Configuration} from './app.constants'

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

export class AppModule {}

import { Component, NgModule } from '@angular/core'
import { NoteItem } from './note.model'
import { Configuration } from './app.constants'

@Component({
  selector: 'notes-app',
  template: `
  <h2>Sample C - NotebookApp - Angular 2 injectable (Dependency Injection)</h2>
  <h4>Details: </h4>
  <ul>
    <li *ngFor="let note of noteItems">
      {{note.Body}}
    </li>
  </ul>
  
  <h4>
     Configuration setting (DI): <a href={{_settings.ApiServer}}  target="_blank"> 
                 {{_settings.ServerWithApiUrl}} 
              </a>
  </h4>
  
  More details to: <br/>
    <a href="{{link}}" target="_blank">
       {{article}}
    </a>
  `
})

export class NotesComponent {
  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';
  
  constructor(private _settings: Configuration) {
  }

  noteItems: NoteItem[] = [
    {Id:'1', Body: 'First note'
           , UpdatedOn: '2016-11-21 10:20:23', CreatedOn: '2016-11-21 10:20:23', UserId: 1},
    {Id:'2', Body: 'Second note with more details'
           , UpdatedOn: '2016-11-21 10:20:23', CreatedOn: '2016-11-21 10:20:23', UserId: 1},
    {Id:'3', Body: 'Third note, and the last sample'
           , UpdatedOn: '2016-11-21 10:20:23', CreatedOn: '2016-11-21 10:20:23', UserId: 1},
  ];
}

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 = "http://localhost:6001/";
    public ApiUrl: string = "api/notes";
    public ServerWithApiUrl: string = this.ApiServer + this.ApiUrl;
}