透過 proxy 呼叫遠端 API

front/package.json

@@ -5,7 +5,7 @@
   "angular-cli": {},
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

front/proxy.conf.json

@@ -0,0 +1,7 @@
+{
+  "/api": {
+    "target": "http://localhost:8080/SampleProject",
+    "secure": false
+  }
+}
+

front/src/app/app.component.html

@@ -1,3 +1,4 @@
-<h1>
-  {{title}}
-</h1>
+<pre>
+  {{ data | async | json }}
+</pre>
+

front/src/app/app.component.ts

@@ -1,10 +1,20 @@
 import { Component } from '@angular/core';
+import { Http, Response } from '@angular/http';
+
+import 'rxjs/Rx';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  data: any;
+
+  constructor(private http: Http) { }
+
+  ngOnInit() {
+    this.data = this.http.get('/api/cars/find')
+      .map((response: Response) => response.json());
+  }
 }