Upgrade to Angular 2.0 Final Release

gulpfile.js

@@ -146,9 +146,6 @@ gulp.task('copy:libs', function() {
   gulp.src(['node_modules/rxjs/**/*'])
     .pipe(gulp.dest('public/lib/js/rxjs'));
 
-  gulp.src(['node_modules/angular2-in-memory-web-api/**/*'])
-    .pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api'));
-
   // concatenate non-angular2 libs, shims & systemjs-config
   gulp.src([
     'node_modules/jquery/dist/jquery.min.js',

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "Tour of Heroes demo",
   "engines": {
-    "node": "4.4.4"
+    "node": "6.5.0"
   },
   "main": "server.js",
   "scripts": {
@@ -12,15 +12,16 @@
     "test": "gulp test & live-server --open=tests/unit-tests.html --port=9999"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/forms": "0.1.1",
-    "@angular/http": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/router": "3.0.0-alpha.7",
-    "@angular/upgrade": "2.0.0-rc.3",
+    "@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",
+    "@angular/upgrade": "2.0.0",
+    "body-parser": "^1.15.2",
     "bootstrap": "3.3.6",
     "colors": "1.1.2",
     "del": "2.2.0",
@@ -40,16 +41,17 @@
     "gulp-uglify": "1.5.3",
     "jquery": "2.2.3",
     "live-server": "1.0.0",
+    "lodash": "^4.16.4",
     "reflect-metadata": "0.1.2",
     "run-sequence": "1.2.0",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",
-    "systemjs-builder": "0.15.16",
+    "systemjs-builder": "0.15.33",
     "tsconfig-glob": "0.4.3",
     "tslint": "3.10.1",
     "typescript": "1.8.10",
     "typings": "1.3.0",
-    "zone.js": "0.6.12"
+    "zone.js": "0.6.23"
   },
   "devDependencies": {
     "jasmine-core": "2.4.1"

server.js

@@ -1,23 +1,74 @@
-var express = require('express');
+const _ = require('lodash');
+const express = require('express');
+const bodyParser = require('body-parser');
 var app = express();
 
 app.set('port', (process.env.PORT || 8080));
-
+app.use(bodyParser.json()); // for parsing application/json
 app.use(express.static(__dirname + '/public'));
 
+var heroes = [
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'},
+];
+
 app.get('/app/heroes', function(req, res) {
-  res.json([
-    {id: 11, name: 'Mr. Nice'},
-    {id: 12, name: 'Narco'},
-    {id: 13, name: 'Bombasto'},
-    {id: 14, name: 'Celeritas'},
-    {id: 15, name: 'Magneta'},
-    {id: 16, name: 'RubberMan'},
-    {id: 17, name: 'Dynama'},
-    {id: 18, name: 'Dr IQ'},
-    {id: 19, name: 'Magma'},
-    {id: 20, name: 'Tornado'},
-  ]);
+  const name = req.query.name;
+  if (name) {
+    var result = _.find(heroes, function(hero) { return hero.name.toLowerCase() === name.toLowerCase() });
+    res.json(result ? [result] : []);
+  } else {
+    res.json(heroes);
+  }
+});
+
+app.post('/app/heroes', function(req, res) {
+  var hero = req.body;
+  if (typeof hero.name === "string") {
+    var newId = 1;
+    _.forEach(heroes, function(result) {
+      newId = Math.max(newId, result.id);
+    });
+    res.json({ id: newId, name: hero.name });
+  } else {
+    res.sendStatus(400);
+  }
+});
+
+app.put('/app/heroes/:id', function(req, res) {
+  const heroId = +req.params.id;
+  var hero = _.find(heroes, function(hero) { return hero.id === heroId; });
+  if (hero) {
+    hero.name = req.body.name;
+    res.json(heroes);
+  } else {
+    res.sendStatus(404);
+  }
+});
+
+app.delete('/app/heroes/:id', function(req, res) {
+  const heroId = +req.params.id;
+  var hero = _.find(heroes, function(hero) { return hero.id === heroId; });
+  if (hero) {
+    for(var i = 0; i < heroes.length; i++) {
+      var hero = heroes[i];
+      if (hero.id === heroId) {
+        heroes.splice(i, 1);
+        break;
+      }
+    }
+    res.json(heroes);
+  } else {
+    res.sendStatus(404);
+  }
 });
 
 app.get('*', function(req, res) {

src/css/component/app.component.scss

@@ -23,6 +23,6 @@ nav a:hover {
   color: #039be5;
   background-color: #CFD8DC;
 }
-nav a.router-link-active {
+nav a.active {
   color: #039be5;
-}
+}

src/css/component/heroes.component.scss → src/css/component/hero-list.component.scss

@@ -57,10 +57,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/
+button.delete {
+  float:right;
+  margin-top: 2px;
+  margin-right: .8em;
+  background-color: gray !important;
+  color:white;
+}

src/css/component/hero-search.component.scss

@@ -0,0 +1,15 @@
+.search-result{
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  height: 20px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+}
+
+#search-box{
+  width: 200px;
+  height: 20px;
+}

src/js/app-routing.module.ts

@@ -0,0 +1,33 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './components/dashboard.component';
+import { HeroesListComponent }  from './components/hero-list.component';
+import { HeroDetailComponent }  from './components/hero-detail.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: '/dashboard',
+  },
+  {
+    component: DashboardComponent,
+    path: 'dashboard',
+  },
+  {
+    component: HeroDetailComponent,
+    path: 'detail/:id',
+  },
+  {
+    component: HeroesListComponent,
+    path: 'heroes',
+  },
+];
+
+@NgModule({
+  exports: [ RouterModule ],
+  imports: [ RouterModule.forRoot(routes) ],
+})
+export class AppRoutingModule {}

src/js/app.module.ts

@@ -0,0 +1,35 @@
+import './rxjs-extensions';
+
+import { NgModule }            from '@angular/core';
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+import { HttpModule }          from '@angular/http';
+
+import { AppRoutingModule }    from './app-routing.module';
+import { AppComponent }        from './components/app.component';
+import { DashboardComponent }  from './components/dashboard.component';
+import { HeroDetailComponent } from './components/hero-detail.component';
+import { HeroesListComponent } from './components/hero-list.component';
+import { HeroSearchComponent } from './components/hero-search.component';
+import { HeroService }         from './services/hero.service';
+
+@NgModule({
+    bootstrap: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        DashboardComponent,
+        HeroDetailComponent,
+        HeroesListComponent,
+        HeroSearchComponent,
+    ],
+  imports: [
+      BrowserModule,
+      FormsModule,
+      HttpModule,
+      AppRoutingModule,
+  ],
+  providers: [
+      HeroService,
+  ],
+})
+export class AppModule { }

src/js/components/app.component.ts

@@ -1,21 +1,13 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { HeroService } from '../services/hero.service';
 
 @Component({
-    directives: [ROUTER_DIRECTIVES],
-    providers: [
-        HeroService,
-    ],
     selector: 'my-app',
     styleUrls: ['dist/css/component/app.component.css'],
     template: `
         <h1>{{title}}</h1>
         <nav>
-            <!--<a [routerLink]="['/crisis-center']">Crisis Center</a>-->
-            <!--<a [routerLink]="['/dashboard']">Dashboard</a>-->
-            <a [routerLink]="['/heroes']">Heroes</a>
+            <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+            <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
         </nav>
         <router-outlet></router-outlet>
     `,

src/js/components/dashboard.component.ts

@@ -16,7 +16,9 @@ export class DashboardComponent implements OnInit {
 
     constructor(
         private router: Router,
-        private heroService: HeroService) {
+        private heroService: HeroService
+    ) {
+        console.log('DashboardComponent');
     }
 
     getHeroes() {
@@ -26,8 +28,9 @@ export class DashboardComponent implements OnInit {
             });
     }
 
-    gotoDetail(hero: Hero) {
-        this.router.navigate(['/detail/:id', { id: hero.id }]);
+    gotoDetail(hero: Hero): void {
+        let link = ['/detail', hero.id];
+        this.router.navigate(link);
     }
 
     ngOnInit() {