#12 Adapted first version of Angulars own Tour of Heroes sample, REST…

…ful way

package.json

@@ -7,7 +7,7 @@
     "bootstrap": "npm link dist/angular-resource-router && npm link angular-resource-router",
     "postbootstrap": "rimraf dist/",
     "ng": "ng",
-    "start": "ng serve --proxy-config=proxy.conf.js",
+    "start": "ng serve",
     "prebuild": "ng lint && ng test --watch=false",
     "build": "ng-packagr -p src/lib/ng-package.json && cpr README.md dist/angular-resource-router/README.md && cpr LICENSE dist/angular-resource-router/LICENSE",
     "buildapp": "ng build --target=production --env=prod --sourcemaps",
@@ -21,22 +21,24 @@
     "ng-packagr": "ng-packagr"
   },
   "dependencies": {
-    "@angular/animations": "^5.1.2",
-    "@angular/common": "^5.1.2",
-    "@angular/compiler": "^5.1.2",
-    "@angular/core": "^5.1.2",
-    "@angular/forms": "^5.1.2",
-    "@angular/platform-browser": "^5.1.2",
-    "@angular/platform-browser-dynamic": "^5.1.2",
+    "@angular/animations": "^5.2.5",
+    "@angular/common": "^5.2.5",
+    "@angular/compiler": "^5.2.5",
+    "@angular/core": "^5.2.5",
+    "@angular/forms": "^5.2.5",
+    "@angular/http": "^5.2.5",
+    "@angular/platform-browser": "^5.2.5",
+    "@angular/platform-browser-dynamic": "^5.2.5",
+    "angular-in-memory-web-api": "~0.5.1",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.20"
   },
   "devDependencies": {
     "@angular/cli": "1.6.8",
-    "@angular/compiler-cli": "^5.1.2",
-    "@angular/language-service": "^5.1.2",
-    "@angular/router": "^5.1.2",
+    "@angular/compiler-cli": "^5.2.5",
+    "@angular/language-service": "^5.2.5",
+    "@angular/router": "^5.2.5",
     "@compodoc/compodoc": "1.0.5",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",

src/app/app-routing.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { ResourceRouterModule } from 'angular-resource-router';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+
+@NgModule({
+  imports: [
+    ResourceRouterModule.forTypes([
+      {
+        type: 'application/x.dashboard',
+        component: DashboardComponent
+      },
+      {
+        type: 'application/x.heroes',
+        component: HeroesComponent
+      },
+      {
+        type: 'application/x.hero',
+        component: HeroDetailComponent
+      }
+    ])
+  ],
+  exports: [
+    ResourceRouterModule
+  ],
+})
+export class AppRoutingModule {
+}

src/app/app.component.css

@@ -0,0 +1,34 @@
+/* AppComponent's private CSS styles */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+
+nav a:visited, a:link {
+  color: #607D8B;
+}
+
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+
+nav a.active {
+  color: #039be5;
+}

src/app/app.component.html

@@ -1,24 +1,11 @@
-<p>See <a href="http://docs.resourcerouterexample.apiary.io/#">API definition</a></p>
-
-<ng-container [resourceContext]="resource">
-  <div>
-    <a [resourceLink]="resource.url + '/a'" [target]="resource">+A</a>
-    <a [resourceLink]="resource.url + '/..'" [target]="resource">-A</a>
-  </div>
-
-  <h1>ROOT</h1>
-  <h2>{{resource.url}}</h2>
-  <p>{{resource.loading ? 'Loading...' : 'Loaded!'}}</p>
-  <resource-view [data]="resource.data"></resource-view>
+<h1>{{title}}</h1>
+<ng-container *resourceData="let data of apiLocation" [resourceContext]="data">
+  <nav>
+    <!-- TODO -->
+    <a [resourceLink]="'/api/dashboard'">Dashboard</a>
+    <a [resourceLink]="'/api/heroes'">Heroes</a>
+  </nav>
+
+  <resource-view [data]="data"></resource-view>
 </ng-container>
-
-<!--<h1>*resourceData</h1>-->
-<!--<p>apiLocation.url={{apiLocation.url}}</p>-->
-<!--<div *resourceData="let data of apiLocation; let loading = loading" [resourceContext]="data">-->
-<!--<h2>{{data.url}}</h2>-->
-<!--<p>{{loading ? 'Loading...' : 'Loaded!'}}</p>-->
-<!--<resource-view [data]="data"></resource-view>-->
-
-<!--<h2>Menu like</h2>-->
-<!--<resource-outlet [src]="data.url + '/246'"></resource-outlet>-->
-<!--</div>-->
+<app-messages></app-messages>

src/app/app.component.ts

@@ -1,28 +1,15 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ApiLocation, bindUrl, ResourceData } from '../lib/src';
-import { Subscription } from 'rxjs/Subscription';
-
-// TODO asi by to chtelo prejmenovat ResourceData, protoze to nepopisuje, co trida dela - drzi location a aktualni data,
-// TODO tedy takovy container - pak se da prejmenovat i ViewData.target
+import { Component } from '@angular/core';
+import { ApiLocation } from '../lib/src';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  providers: [ResourceData]
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit, OnDestroy {
-
-  private urlSubscription = Subscription.EMPTY;
+export class AppComponent {
 
-  constructor(public apiLocation: ApiLocation,
-              public resource: ResourceData) {
-  }
-
-  ngOnInit() {
-    this.urlSubscription = bindUrl(this.apiLocation, this.resource);
-  }
+  title = 'Tour of Heroes';
 
-  ngOnDestroy() {
-    this.urlSubscription.unsubscribe();
+  constructor(public apiLocation: ApiLocation) {
   }
 }