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

<!DOCTYPE html>
<html>
  <head>
    <base href="." />
    <title>angular2 playground</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>
        loading Angular2 app...
    </notes>
  </body>
</html>

### Sample A - Intro to Angular 2
Just a Hello world

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',

    '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)

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

// Angular component
@Component({
  selector: 'notes',
  template:`<div>
              <h2>Sample A - Intro to {{name}}</h2>
              <h4>This application is running on {{name}} framework
              and it is just a starter setup.</h4>
              More details to:
              <br/><br/>
                <a href="{{link}}" target="_blank">
                  {{article}}
                </a>
            </div>`, 
})

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

// Angular module
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})

export class AppModule {}