<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>restheart angular example</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>
    
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
    
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>
/* Styles go here */

### Simple Angular application using RESTHeart
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);
//our root app component
import { Component, NgModule, OnInit, OnDestroy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Service } from './service.ts';

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html'
})
export class App implements OnInit {
  data: Observable<any>;
  page: number = 1;
  
  newMessage = { from: 'your nickname', message: 'RESTHeart rocks' };
  
  constructor(private service: Service) { 
  }
  
  load() {
     this.data = this.service.get(this.page);
  }
  
  ngOnInit() {
    this.load();
  }
  
  postMessage() {
    this.service.post(this.newMessage)
    .subscribe(resp => this.load());
  }
  
  pageUp() {
    this.page++;
    this.load();
  }
  
  pageDown() {
    this.page--;
    this.load();
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule, FormsModule ],
  providers: [ Service ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule { }

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

@Injectable()
export class Service {
  private static url 'http://dbapi.io/db/coll';
  
  static PAGE_SIZE = 5;
 
  constructor(private http: Http) {
    console.log('http service initialized');
  }

  public get(page: number = 1): Observable<any> {
    return this.http.get(Service.url + `?count&pagesize=${Service.PAGE_SIZE}&page=${page}`)
      .map(response => response.json());
  }
  
  public delete(id: string): Observable<Response> {
    return this.http
      .delete(`${Service.url}/${id}`);
  }
  
  public post(data: any): Observable<Response> {
    let _data = { message: data.message, from: data.from, $currentDate: {"timestamp": true} };
    
    return this.http.post(Service.url, _data);
  }
}
<div class="container" *ngIf="(data|async) as _data">
    <h1>restheart @ dbapi.io/db/coll</h1>
    
    <table class="table table-striped table-sm table-hover">
      <thead class="thead-inverse">
        <tr>
          <th>{{_data._size}} messages</th>
          <th>from</th>
          <th>message</th>
          <th>raw data</th>
        </tr>
      </thead>
      <tbody >
        <tr>
          <td><button type="button" class="btn btn-primary btn-sm" (click)="postMessage()">Post message</button></td>
          <td><input [(ngModel)]="newMessage.from"></td>
          <td><input [(ngModel)]="newMessage.message"></td>
          <td class="small">{{newMessage|json}}</td>
        </tr>
        
        <tr *ngFor="let doc of _data._embedded; let idx = index;">
          <th scope="row">{{(idx+1)+(page-1)*5}}</th>
          <td *ngIf="doc.message else missingField">{{doc.from}}</td>
          <td *ngIf="doc.message else missingField">{{doc.message}}</td>
          <ng-template #missingField>
            <td class="table-danger">missing field</td>
          </ng-template>
          <td class="small">{{doc|json}}</td>
        </tr>
      </tbody>
    </table>
    <nav>
      <ul class="pagination justify-content-center">
        <li class="page-item" [class.disabled]="page<2">
          <a class="page-link" href="#" tabindex="-1" (click)="pageDown()">Previous</a>
        </li>
        <li class="page-item active">
          <a class="page-link" href="#">{{page}} <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item" [class.disabled]="page*5>=_data._size">
          <a class="page-link" href="#" (click)="pageUp()">Next</a>
        </li>
      </ul>
    </nav>
    
  </div>