Angular2 sample

samples/angular2/README.MD

@@ -0,0 +1,14 @@
+# ANGULAR2 DEMO README 
+
+- Install firebirdsql (http://www.firebirdsql.org)
+- Install nodejs (https://nodejs.org)
+- Open command prompt with admin rights
+- ```npm install -g angular-cli```
+- go to into ```samples\angular2\webapp```
+- ```npm install``` 
+- go to into ```samples\angular2```
+- ```create_dist_link.bat```
+- ```cd webapp```
+- ```ng build```
+- Open project ```samples\angular2\dmvcframeworkserver\Angular2SampleServer.dproj``` and run it.
+- You should see the angular2 project 

samples/angular2/create_dist_link.bat

@@ -0,0 +1,2 @@
+mkdir www
+mklink /J webapp\dist .\www

samples/angular2/dmvcframeworkserver/Angular2SampleServer.dpr

@@ -0,0 +1,66 @@
+program Angular2SampleServer;
+
+ {$APPTYPE CONSOLE}
+
+uses
+  System.SysUtils,
+  Winapi.Windows,
+  Winapi.ShellAPI,
+  Web.WebReq,
+  Web.WebBroker,
+  IdHTTPWebBrokerBridge,
+  CustomersControllerU in 'CustomersControllerU.pas',
+  WebModuleU in 'WebModuleU.pas' {MyWebModule: TWebModule},
+  CustomersTDGU in 'CustomersTDGU.pas' {CustomersTDG: TDataModule};
+
+{$R *.res}
+
+procedure RunServer(APort: Integer);
+var
+  LInputRecord: TInputRecord;
+  LEvent: DWord;
+  LHandle: THandle;
+  LServer: TIdHTTPWebBrokerBridge;
+begin
+  Writeln('** DMVCFramework Server **');
+  Writeln(Format('Starting HTTP Server on port %d', [APort]));
+  LServer := TIdHTTPWebBrokerBridge.Create(nil);
+  try
+    LServer.DefaultPort := APort;
+    LServer.Active := True;
+    { more info about MaxConnections
+      http://www.indyproject.org/docsite/html/frames.html?frmname=topic&frmfile=TIdCustomTCPServer_MaxConnections.html}
+    LServer.MaxConnections := 0;
+    { more info about ListenQueue
+      http://www.indyproject.org/docsite/html/frames.html?frmname=topic&frmfile=TIdCustomTCPServer_ListenQueue.html}
+    LServer.ListenQueue := 200;
+    { Comment the next line to avoid the default browser startup }
+    ShellExecute(0, 'open', PChar('http://localhost:' + inttostr(APort)), nil, nil, SW_SHOWMAXIMIZED);
+    Writeln('Press ESC to stop the server');
+    LHandle := GetStdHandle(STD_INPUT_HANDLE);
+    while True do
+    begin
+      Win32Check(ReadConsoleInput(LHandle, LInputRecord, 1, LEvent));
+      if (LInputRecord.EventType = KEY_EVENT) and
+        LInputRecord.Event.KeyEvent.bKeyDown and
+        (LInputRecord.Event.KeyEvent.wVirtualKeyCode = VK_ESCAPE) then
+        break;
+    end;
+  finally
+    LServer.Free;
+  end;
+end;
+
+begin
+  SetupFireDACConnection;
+  ReportMemoryLeaksOnShutdown := True;
+  try
+    if WebRequestHandler <> nil then
+      WebRequestHandler.WebModuleClass := WebModuleClass;
+    WebRequestHandlerProc.MaxConnections := 1024;
+    RunServer(8080);
+  except
+    on E: Exception do
+      Writeln(E.ClassName, ': ', E.Message);
+  end;
+end.

samples/angular2/dmvcframeworkserver/CustomersControllerU.pas

@@ -0,0 +1,72 @@
+unit CustomersControllerU;
+
+interface
+
+uses
+  MVCFramework, CustomersTDGU;
+
+type
+
+  [MVCPath('/api')]
+  TCustomersController = class(TMVCController)
+  private
+    FCustomersTDG: TCustomersTDG;
+  protected
+    function GetDAL: TCustomersTDG;
+    procedure MVCControllerBeforeDestroy; override;
+  public
+    [MVCPath('/customers')]
+    [MVCHTTPMethod([httpGET])]
+    procedure GetCustomers;
+
+    [MVCPath('/customers/($ID)')]
+    [MVCHTTPMethod([httpGET])]
+    procedure GetCustomer(const ID: UInt64);
+
+    procedure OnBeforeAction(Context: TWebContext; const AActionName: string;
+      var Handled: Boolean); override;
+    procedure OnAfterAction(Context: TWebContext; const AActionName: string); override;
+
+  end;
+
+implementation
+
+procedure TCustomersController.GetCustomer(const ID: UInt64);
+begin
+  Render(GetDAL.GetCustomerById(ID), true, true);
+end;
+
+procedure TCustomersController.GetCustomers;
+begin
+  Render(GetDAL.GetCustomers, true);
+end;
+
+function TCustomersController.GetDAL: TCustomersTDG;
+begin
+  if not Assigned(FCustomersTDG) then
+    FCustomersTDG := TCustomersTDG.Create(nil);
+  Result := FCustomersTDG;
+end;
+
+procedure TCustomersController.MVCControllerBeforeDestroy;
+begin
+  inherited;
+  FCustomersTDG.Free;
+end;
+
+procedure TCustomersController.OnAfterAction(Context: TWebContext; const AActionName: string);
+begin
+  { Executed after each action }
+  inherited;
+end;
+
+procedure TCustomersController.OnBeforeAction(Context: TWebContext; const AActionName: string;
+  var Handled: Boolean);
+begin
+  { Executed before each action
+    if handled is true (or an exception is raised) the actual
+    action will not be called }
+  inherited;
+end;
+
+end.

samples/angular2/dmvcframeworkserver/CustomersTDGU.dfm

@@ -0,0 +1,13 @@
+object CustomersTDG: TCustomersTDG
+  OldCreateOrder = False
+  OnCreate = DataModuleCreate
+  Height = 150
+  Width = 215
+  object FDConnection1: TFDConnection
+    Params.Strings = (
+      'ConnectionDef=CUSTOMERSITDEVCON')
+    LoginPrompt = False
+    Left = 80
+    Top = 48
+  end
+end

samples/angular2/dmvcframeworkserver/CustomersTDGU.pas

@@ -0,0 +1,82 @@
+unit CustomersTDGU;
+
+interface
+
+uses
+  System.SysUtils, System.Classes, FireDAC.Stan.Intf, FireDAC.Stan.Option,
+  FireDAC.Stan.Error, FireDAC.UI.Intf, FireDAC.Phys.Intf, FireDAC.Stan.Def,
+  FireDAC.Stan.Pool, FireDAC.Stan.Async, FireDAC.Phys, FireDAC.VCLUI.Wait,
+  Data.DB, FireDAC.Comp.Client, FireDAC.Comp.UI, FireDAC.Phys.FBDef,
+  FireDAC.Phys.IBBase, FireDAC.Phys.FB, FireDAC.DApt;
+
+type
+  TCustomersTDG = class(TDataModule)
+    FDConnection1: TFDConnection;
+    procedure DataModuleCreate(Sender: TObject);
+  private
+    { Private declarations }
+  public
+    function GetCustomers: TDataSet;
+    function GetCustomerById(const ID: UInt64): TDataSet;
+  end;
+
+procedure SetupFireDACConnection;
+
+implementation
+
+uses
+  FireDAC.Stan.Param;
+
+const
+  PRIVATE_CONN_DEF_NAME = 'MYCONNECTION';
+
+  { %CLASSGROUP 'Vcl.Controls.TControl' }
+
+{$R *.dfm}
+  { TDataModule1 }
+
+procedure TCustomersTDG.DataModuleCreate(Sender: TObject);
+begin
+  FDConnection1.ConnectionDefName := PRIVATE_CONN_DEF_NAME;
+  FDConnection1.Connected := True;
+end;
+
+function TCustomersTDG.GetCustomerById(const ID: UInt64): TDataSet;
+var
+  lParams: TFDParams;
+  lParam: TFDParam;
+begin
+  lParams := TFDParams.Create;
+  try
+    lParam := lParams.Add;
+    lParam.AsLargeInt := ID;
+    lParam.Name := 'ID';
+    FDConnection1.ExecSQL('SELECT * FROM CUSTOMERS WHERE ID = :ID', lParams, Result);
+  finally
+    lParams.Free;
+  end;
+end;
+
+function TCustomersTDG.GetCustomers: TDataSet;
+begin
+  FDConnection1.ExecSQL('SELECT * FROM CUSTOMERS ORDER BY ID', Result);
+end;
+
+procedure SetupFireDACConnection;
+var
+  lParams: TStrings;
+begin
+  lParams := TStringList.Create;
+  try
+    lParams.Add('Database=' + ExtractFilePath(GetModuleName(HInstance)) + '\CUSTOMERS.FDB');
+    lParams.Add('Protocol=TCPIP');
+    lParams.Add('Server=localhost');
+    lParams.Add('User_Name=sysdba');
+    lParams.Add('Password=masterkey');
+    FDManager.AddConnectionDef(PRIVATE_CONN_DEF_NAME, 'FB', lParams);
+  finally
+    lParams.Free;
+  end;
+end;
+
+end.

samples/angular2/dmvcframeworkserver/TransactionScriptU.dfm

@@ -0,0 +1,5 @@
+object DataModule1: TDataModule1
+  OldCreateOrder = False
+  Height = 150
+  Width = 215
+end

samples/angular2/dmvcframeworkserver/TransactionScriptU.pas

@@ -0,0 +1,25 @@
+unit TransactionScriptU;
+
+interface
+
+uses
+  System.SysUtils, System.Classes;
+
+type
+  TDataModule1 = class(TDataModule)
+  private
+    { Private declarations }
+  public
+    { Public declarations }
+  end;
+
+var
+  DataModule1: TDataModule1;
+
+implementation
+
+{%CLASSGROUP 'Vcl.Controls.TControl'}
+
+{$R *.dfm}
+
+end.

samples/angular2/dmvcframeworkserver/WebModuleU.dfm

@@ -0,0 +1,8 @@
+object MyWebModule: TMyWebModule
+  OldCreateOrder = False
+  OnCreate = WebModuleCreate
+  OnDestroy = WebModuleDestroy
+  Actions = <>
+  Height = 230
+  Width = 415
+end

samples/angular2/dmvcframeworkserver/WebModuleU.pas

@@ -0,0 +1,64 @@
+unit WebModuleU;
+
+interface
+
+uses System.SysUtils,
+  System.Classes,
+  Web.HTTPApp,
+  MVCFramework,
+  MVCFramework.Middleware.CORS;
+
+type
+  TMyWebModule = class(TWebModule)
+    procedure WebModuleCreate(Sender: TObject);
+    procedure WebModuleDestroy(Sender: TObject);
+  private
+    FMVC: TMVCEngine;
+  public
+    { Public declarations }
+  end;
+
+var
+  WebModuleClass: TComponentClass = TMyWebModule;
+
+implementation
+
+{$R *.dfm}
+
+
+uses CustomersControllerU, MVCFramework.Commons;
+
+procedure TMyWebModule.WebModuleCreate(Sender: TObject);
+begin
+  FMVC := TMVCEngine.Create(Self,
+    procedure(Config: TMVCConfig)
+    begin
+      // enable static files
+      Config[TMVCConfigKey.DocumentRoot] := ExtractFilePath(GetModuleName(HInstance)) + '\www';
+      // session timeout (0 means session cookie)
+      Config[TMVCConfigKey.SessionTimeout] := '0';
+      // default content-type
+      Config[TMVCConfigKey.DefaultContentType] := TMVCConstants.DEFAULT_CONTENT_TYPE;
+      // default content charset
+      Config[TMVCConfigKey.DefaultContentCharset] := TMVCConstants.DEFAULT_CONTENT_CHARSET;
+      // unhandled actions are permitted?
+      Config[TMVCConfigKey.AllowUnhandledAction] := 'false';
+      // default view file extension
+      Config[TMVCConfigKey.DefaultViewFileExtension] := 'html';
+      // view path
+      Config[TMVCConfigKey.ViewPath] := 'templates';
+      // Enable STOMP messaging controller
+      Config[TMVCConfigKey.Messaging] := 'false';
+      // Enable Server Signature in response
+      Config[TMVCConfigKey.ExposeServerSignature] := 'true';
+    end);
+  FMVC.AddController(TCustomersController);
+  FMVC.AddMiddleware(TCORSMiddleware.Create);
+end;
+
+procedure TMyWebModule.WebModuleDestroy(Sender: TObject);
+begin
+  FMVC.Free;
+end;
+
+end.

samples/angular2/webapp/.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

samples/angular2/webapp/.gitignore

@@ -0,0 +1,33 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db

samples/angular2/webapp/README.md

@@ -0,0 +1,31 @@
+# Myproj40
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.16.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

samples/angular2/webapp/angular-cli.json

@@ -0,0 +1,45 @@
+{
+  "project": {
+    "version": "1.0.0",
+    "name": "angular2dmvcframework"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "../www",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css",
+				"../node_modules/bootstrap/dist/css/bootstrap.min.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false
+  }
+}

samples/angular2/webapp/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { Myproj40Page } from './app.po';
+
+describe('myproj40 App', function() {
+  let page: Myproj40Page;
+
+  beforeEach(() => {
+    page = new Myproj40Page();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

samples/angular2/webapp/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class Myproj40Page {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

samples/angular2/webapp/e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

samples/angular2/webapp/karma.conf.js

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: ['progress', 'karma-remap-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

samples/angular2/webapp/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "myproj40",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "lint": "tslint \"src/**/*.ts\"",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/router": "3.0.0",
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.0-beta.12",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@types/jasmine": "^2.2.30",
+    "angular-cli": "1.0.0-beta.16",
+    "codelyzer": "~0.0.26",
+    "jasmine-core": "2.4.1",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
+    "ts-node": "1.2.1",
+    "tslint": "3.13.0",
+    "typescript": "2.0.2"
+  }
+}

samples/angular2/webapp/protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

samples/angular2/webapp/src/app/app-routing.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import {HomeComponent} from './home/home.component';
+import {CustomersComponent} from './customers/customers.component';
+import {CustomerComponent} from './customer/customer.component';
+
+const routes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent
+  },
+  {
+    path: 'customers',
+    component: CustomersComponent
+  },
+  {
+    path: 'customers/:id',
+    component: CustomerComponent
+  },
+  {
+    path: '**',
+    redirectTo: 'home'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class Myproj40RoutingModule { }

samples/angular2/webapp/src/app/app.component.css

@@ -0,0 +1 @@
+.top-buffer { margin-top:20px; }

samples/angular2/webapp/src/app/app.component.html

@@ -0,0 +1,12 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1>Angular2 + DelphiMVCFramework DEMO</h1>
+      <a routerLink="home" class="btn btn-success">Home</a>
+      <a routerLink="customers" class="btn btn-success">Customers</a>
+    </div>
+  </div>
+  <div class="row top-buffer">
+    <router-outlet></router-outlet>
+  </div>
+</div>

samples/angular2/webapp/src/app/app.component.spec.ts

@@ -0,0 +1,33 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('App: Myproj40', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+  });
+
+  it('should create the app', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    let compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

samples/angular2/webapp/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}

samples/angular2/webapp/src/app/app.module.ts

@@ -0,0 +1,29 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { CustomersComponent } from './customers/customers.component';
+import { CustomerComponent } from './customer/customer.component';
+import { CustomersService } from './customers.service';
+import { Myproj40RoutingModule } from './app-routing.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    CustomersComponent,
+    CustomerComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    Myproj40RoutingModule
+  ],
+  providers: [CustomersService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

samples/angular2/webapp/src/app/customer.ts

@@ -0,0 +1,6 @@
+export interface Customer {
+  id: Number;
+  first_name: String;
+  last_name: String;
+  age: Number;
+}

samples/angular2/webapp/src/app/customer/customer.component.html

@@ -0,0 +1,19 @@
+<div class="col-md-12">
+  <form>
+    <div class="form-group">
+      <label for="first_name">First Name:</label>
+      <input type="text" name="first_name" [(ngModel)]="customer.first_name" class="form-control">
+    </div>
+
+    <div class="form-group">
+      <label for="last_name">Last Name:</label>
+      <input type="text" name="last_name" [(ngModel)]="customer.last_name" class="form-control">
+    </div>
+
+    <div class="form-group">
+      <label for="age">Age:</label>
+      <input type="number" name="age" [(ngModel)]="customer.age" class="form-control">
+    </div>
+  </form>
+  <a class="btn btn-info" [routerLink]="['/customers']">Back to the list</a>
+</div>

samples/angular2/webapp/src/app/customer/customer.component.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { CustomerComponent } from './customer.component';
+
+describe('Component: Customer', () => {
+  it('should create an instance', () => {
+    let component = new CustomerComponent();
+    expect(component).toBeTruthy();
+  });
+});

samples/angular2/webapp/src/app/customer/customer.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {CustomersService} from '../customers.service';
+import {Customer} from '../customer';
+
+@Component({
+  selector: 'app-customer',
+  templateUrl: './customer.component.html',
+  styleUrls: ['./customer.component.css']
+})
+export class CustomerComponent implements OnInit {
+  customer: Customer  = { id: null, first_name: '', last_name: '', age: null };
+
+  constructor(
+    private customersService: CustomersService,
+    private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit() {
+    let id = this.activatedRoute.snapshot.params['id'];
+    this.customersService
+      .getCustomerById(id)
+      .subscribe((customer: Customer) => {
+        this.customer = customer;
+        console.log(customer);
+      });
+  }
+}

samples/angular2/webapp/src/app/customers.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CustomersService } from './customers.service';
+
+describe('Service: Customers', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CustomersService]
+    });
+  });
+
+  it('should ...', inject([CustomersService], (service: CustomersService) => {
+    expect(service).toBeTruthy();
+  }));
+});

samples/angular2/webapp/src/app/customers.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+import 'rxjs/add/operator/map';
+import {Customer} from './customer';
+
+@Injectable()
+export class CustomersService {
+  BASEURL = 'http://localhost:8080';
+
+  constructor(private http: Http) { }
+
+  getCustomers(): Observable<Customer[]> {
+    return this.http
+      .get(this.BASEURL + '/api/customers')
+      .map((response) => <Customer[]>response.json());
+  }
+
+  getCustomerById(id: Number): Observable<Customer> {
+    return this.http
+      .get(this.BASEURL + '/api/customers/' + id)
+      .map((response) => <Customer>response.json());
+  }
+}

samples/angular2/webapp/src/app/customers/customers.component.html

@@ -0,0 +1,19 @@
+<div class="col-md-12">
+  <h2>Customers</h2>
+  <table class="table table-striped">
+    <thead>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Age</th>
+      <th> </th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let customer of customers">
+        <td>{{customer.first_name}}</td>
+        <td>{{customer.last_name}}</td>
+        <td>{{customer.age}}</td>
+        <td class="text-right"><a [routerLink]="['/customers', customer.id]" class="btn btn-default">View</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

samples/angular2/webapp/src/app/customers/customers.component.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { CustomersComponent } from './customers.component';
+
+describe('Component: Customers', () => {
+  it('should create an instance', () => {
+    let component = new CustomersComponent();
+    expect(component).toBeTruthy();
+  });
+});

samples/angular2/webapp/src/app/customers/customers.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import {CustomersService} from '../customers.service';
+import {Customer} from '../customer';
+
+
+@Component({
+  selector: 'app-customers',
+  templateUrl: './customers.component.html',
+  styleUrls: ['./customers.component.css']
+})
+export class CustomersComponent implements OnInit {
+
+  customers: Customer[];
+  constructor(private customersService: CustomersService) { }
+
+  ngOnInit() {
+    this.customersService
+      .getCustomers()
+      .subscribe((customers: Customer[]) => {
+        this.customers = customers;
+      });
+  }
+}

samples/angular2/webapp/src/app/home/home.component.html

@@ -0,0 +1,6 @@
+<div class="col-md-12">
+  <div class="jumbotron">
+    <h1>Angular2 + DelphiMVCFramework </h1>
+    <p>This demo uses Angular2, Typescript and DelphiMVCFramework.</p>
+  </div>
+</div>

samples/angular2/webapp/src/app/home/home.component.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+  it('should create an instance', () => {
+    let component = new HomeComponent();
+    expect(component).toBeTruthy();
+  });
+});

samples/angular2/webapp/src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

samples/angular2/webapp/src/app/index.ts

@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';

samples/angular2/webapp/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

samples/angular2/webapp/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};

samples/angular2/webapp/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angular2 + DelphiMVCFramework</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

samples/angular2/webapp/src/main.ts

@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

samples/angular2/webapp/src/polyfills.ts

@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

samples/angular2/webapp/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

samples/angular2/webapp/src/test.ts

@@ -0,0 +1,34 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+
+Promise.all([
+  System.import('@angular/core/testing'),
+  System.import('@angular/platform-browser-dynamic/testing')
+])
+  // First, initialize the Angular testing environment.
+  .then(([testing, testingBrowser]) => {
+    testing.getTestBed().initTestEnvironment(
+      testingBrowser.BrowserDynamicTestingModule,
+      testingBrowser.platformBrowserDynamicTesting()
+    );
+  })
+  // Then we find all the tests.
+  .then(() => require.context('./', true, /\.spec\.ts/))
+  // And load the modules.
+  .then(context => context.keys().map(context))
+  // Finally, start Karma to run the tests.
+  .then(__karma__.start, __karma__.error);

samples/angular2/webapp/src/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

samples/angular2/webapp/src/typings.d.ts

@@ -0,0 +1,5 @@
+// Typings reference file, see links for more information
+// https://github.com/typings/typings
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+
+declare var System: any;

samples/angular2/webapp/tslint.json

@@ -0,0 +1,112 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector-prefix": [true, "app"],
+    "component-selector-prefix": [true, "app"],
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}