Ng2-Restangular Demo Plunk (Hero)

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    
    
    <!--<script src="https://unpkg.com/zone.js/dist/zone.js"></script>-->
  
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></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="http://code.2muchcoffee.com/ng2-restangular/0.1.22/esm/src/index.js"></script> -->
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/',
    'ng2-restangular': 'http://code.2muchcoffee.com/ng2-restangular/0.1.22/esm/src'
  },
  //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',
    
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
    
    'ng2-restangular':                      'ng2-restangular',
    'rxjs':                      'npm:rxjs',
    'lodash':                    'npm:lodash'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      main: "./Rx.js",
      defaultExtension: 'js'
    },
    lodash: {
      main: './index.js',
      defaultExtension: 'js'
    },
    "ng2-restangular": {
      main: './index',
      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 } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, BaseRequestOptions, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { MockBackend } from '@angular/http/testing';
import { RestangularModule, RestangularHttp, Restangular } from 'ng2-restangular';

import { App } from './app.component.ts';
import { routes } from './app.routes.ts';
import { HeroAppModule } from './heroapp/heroApp.module.ts';

@NgModule({
  declarations: [App],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    HeroAppModule,
    RestangularModule.forRoot((RestangularProvider) => {
      RestangularProvider.setBaseUrl('http://hero-backend.2muchcoffee.com/api/');
      RestangularProvider.setRestangularFields({
        id: "_id"
      });
    }),
  ],
  providers: [],
  bootstrap: [App]
})
export class AppModule {}

import { Component, NgModule } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Restangular } from 'ng2-restangular';


@Component({
  selector: 'my-app',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class App {
  constructor(private restangular: Restangular) {
  }
  
  request(){
    this.restangular.all("heroes").getList().subscribe(
    res => {
      console.log(res);
    },
    err => {
      console.log(err);
    });
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';


import { HeroAppComponent } from './heroApp.component';
import { HeroDashboardModule } from './hero-dashboard/hero-dashboard.module';
import { RouterModule } from '@angular/router';
import { HeroListModule } from './hero-list/hero-list.module';
import { HeroDetailModule } from './hero-detail/hero-detail.module';
import { HeroAddModule } from './add-hero/add-hero.module';

@NgModule({
  declarations: [
    HeroAppComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    HeroDetailModule,
    RouterModule,
    HeroListModule,
    HeroDashboardModule,
    HeroAddModule
  ],
  exports: [HeroAppComponent]
})
export class HeroAppModule {
}

import { Routes } from '@angular/router';

import { HeroAppComponent } from './heroApp.component';
import { HeroDashboardComponent } from './hero-dashboard/hero-dashboard.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroAddComponent } from './add-hero/add-hero.component';


export const heroAppRoutes: Routes = [
  {
    path: '',
    component: HeroAppComponent,
    children: [
      {path: 'herolist', component: HeroListComponent},
      {path: 'herodashboard', component: HeroDashboardComponent},
      {path: 'herodetail/:id', component: HeroDetailComponent},
      {path: 'addhero', component: HeroAddComponent},
      {path: '', redirectTo: '/herolist', pathMatch: "full"}
    ]
  },
];

import { Component } from '@angular/core';
import 'rxjs/Rx';



@Component({
  selector: 'hero-app',
  styleUrls: ['./src/heroapp/heroApp.style.css'],
  templateUrl: './src/heroapp/heroApp.template.html'
})
export class HeroAppComponent {

  public heroList;

}

.wrapper {
    text-align: center;
    position: relative;
}
.side-bar {

}
.button-head {
    margin-bottom: 20px;
}

<div class=wrapper>
    <h3>HeroApp</h3>
    <div class="btn-group button-head" role="group" aria-label="...">
        <a  class="btn btn-default" [routerLink]="['/herolist']">Hero List</a>
        <a  class="btn btn-default" [routerLink]="['/herodashboard']">Hero Dashboard</a>
        <a  class="btn btn-default" [routerLink]="['/addhero']">AddHero</a>
    </div>
    <router-outlet></router-outlet>
</div>

import { Routes } from '@angular/router';
import { App } from './app.component.ts';
import { heroAppRoutes } from './heroapp/heroApp.routes.ts';

export const routes: Routes = [
  {
    path: '',
    children: heroAppRoutes
  }
];

.btn:focus {
    outline: none;
}

<div class=row>
    <div class="col-sm-6 col-sm-offset-3">
        <ul class="list-group" *ngIf="heroList">
            <li *ngFor="let hero of heroList;" class="list-group-item clearfix">
                <a [routerLink]="['/herodetail/', hero._id]">{{hero.name}}</a>
            </li>
        </ul>
    </div>
</div>

import { Component } from '@angular/core';
import { Restangular } from 'ng2-restangular';
import 'rxjs/Rx';


@Component({
  selector: 'hero-list',
  styleUrls: ['./src/heroapp/hero-list/hero-list.style.css'],
  templateUrl: './src/heroapp/hero-list/hero-list.template.html'
})
export class HeroListComponent {

  private heroes;
  private subscribers;

  public heroList;

  constructor(public restangular: Restangular) {
    this.heroes = restangular.all("heroes");
  }

  ngOnInit() {
    this.subscribers = this.heroes.getList().subscribe(heroes => {
      this.heroList = heroes;
    });
  }
  
  ngOnDestroy() {
    
    this.subscribers.unsubscribe();
  }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HeroListComponent } from './hero-list.component';


@NgModule({
  declarations: [HeroListComponent],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,
  ],
  exports: [HeroListComponent]
})
export class HeroListModule {


}

<h4>Dashboard</h4>
<ul *ngIf="heroList" class=row>
    <li *ngFor="let hero of heroList;" class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-body">
                <a [routerLink]="['/herodetail/', hero._id]">{{hero.name}}</a>
            </div>
        </div>
    </li>
</ul>

ul {
    list-style-type: none;
    padding:0;
}
a:hover {
    cursor: pointer;
}

import { Component } from '@angular/core';
import { Restangular } from 'ng2-restangular';
import 'rxjs/Rx';


@Component({
  selector: 'hero-dashboard',
  styleUrls: ['./src/heroapp/hero-dashboard/hero-dashboard.style.css'],
  templateUrl: './src/heroapp/hero-dashboard/hero-dashboard.template.html'
})
export class HeroDashboardComponent {

  public heroList;

  constructor(public restangular: Restangular) {
  }

  ngOnInit() {
    this.restangular.all("heroes").getList({number:4}).subscribe(heroes => {
      this.heroList = heroes;
    });
  }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HeroDashboardComponent } from './hero-dashboard.component';

@NgModule({
  declarations: [HeroDashboardComponent],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  exports: [HeroDashboardComponent]
})
export class HeroDashboardModule {


}

<div class=row>
    <div class="col-sm-6 col-sm-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading relative">
                <h3 class="panel-title">Detail</h3>
                <button class="btn btn-link btn-right close" (click)="deleteHero()"><span
                        class="glyphicon glyphicon-trash"></span></button>
            </div>
            <div class="panel-body relative">
                <h4 *ngIf="hero && !editable">Name: {{hero.name}}</h4>
                <div class="col-xs-10">
                    <input type=text class="form-control col-xs-5" [(ngModel)]="hero.name" *ngIf="editable">
                </div>
                <button class="btn btn-link pull-right btn-right close" (click)="editHero()" *ngIf="!editable">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
                <button class="btn btn-link pull-right btn-right close btn-ok" (click)="editHero()" *ngIf="editable">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
            </div>
            <div class="panel-footer"><a [routerLink]="['/']" class="btn btn-default">Back</a></div>
        </div>
    </div>
</div>

.wrapper {
    background-color: #cccccc;
    color: #000;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    text-align: left;
    padding: 10px;
}

.wrapper h3 {
    text-align: center;
}

.relative {
    position: relative;
}

.btn-right {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%,25%);
}
.btn-ok {
    color: green;
    opacity: 0.8;
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HeroDetailComponent } from './hero-detail.component';


@NgModule({
  declarations: [HeroDetailComponent],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  exports: [HeroDetailComponent]
})
export class HeroDetailModule {


}

import { Component } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Restangular } from 'ng2-restangular';
import 'rxjs/Rx';

@Component({
  selector: 'hero-detail',
  styleUrls: ['./src/heroapp/hero-detail/hero-detail.style.css'],
  templateUrl: './src/heroapp/hero-detail/hero-detail.template.html'
})
export class HeroDetailComponent {

  private heroes;
  private id: number;

  public hero: Restangular;
  public editable: boolean;

  constructor(private route: ActivatedRoute, private restangular: Restangular, private router: Router) {
    this.heroes = restangular.all("heroes");
  }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.id = params['id'];
      console.log(this.id)
    });
    this.restangular.one("heroes", this.id).get().subscribe(res => {
      this.hero = res;
    });
  }

  deleteHero() {
    this.hero.remove().subscribe(heroes => {
      this.router.navigate(["/herolist"]);
    })
  }

  editHero() {
    if (this.editable) {
      this.hero.put();
      this.editable = false;
    }
    else {
      this.editable = true;}
  }

}

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Restangular } from 'ng2-restangular';
import 'rxjs/Rx';


@Component({
  selector: 'hero-dashboard',
  templateUrl: './src/heroapp/add-hero/add-hero.template.html'
})
export class HeroAddComponent {

  constructor(public restangular: Restangular, private router: Router) {
  }

  ngOnInit() {
  }

  submitForm (form){
    this.restangular.all('heroes').post(form.value);
    this.router.navigate(["/herolist"]);
  }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HeroAddComponent } from './add-hero.component';

@NgModule({
  declarations: [HeroAddComponent],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  exports: [HeroAddComponent]
})
export class HeroAddModule {


}

<h4>Add</h4>
<div class="col-sm-6 col-sm-offset-3">
    <form #form="ngForm">
        <div class=form-group>
            <label for=name>Name:</label>
            <input type=text name="name" id="name" ngModel class=form-control>
        </div>
    </form>
    <button (click)="submitForm(form)" class="btn btn-default">Submit</button>
</div>