Changement pour appeler l'API C# par Angular

+ récupération des datas et leur affichage

Back/skydiveLogs-api/Controllers/DropZoneController.cs

@@ -1,14 +1,14 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Http;
+using System.Collections.Generic;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Cors;
+
+using AutoMapper;
+
 using skydiveLogs_api.Business.Interface;
 using skydiveLogs_api.DataContract;
-using AutoMapper;
 using skydiveLogs_api.Model;
 
+
 namespace skydiveLogs_api.Controllers
 {
     [Route("api/[controller]")]
@@ -24,6 +24,7 @@ namespace skydiveLogs_api.Controllers
 
         // GET: api/DropZone
         [HttpGet]
+        [EnableCors]
         public IEnumerable<DropZoneResp> Get()
         {
             var result = _dropZoneService.GetAllDzs();

Back/skydiveLogs-api/Properties/launchSettings.json

@@ -1,13 +1,13 @@
-{
-  "$schema": "http://json.schemastore.org/launchsettings.json",
+{
   "iisSettings": {
-    "windowsAuthentication": false, 
-    "anonymousAuthentication": true, 
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
     "iisExpress": {
       "applicationUrl": "http://localhost:51376",
-      "sslPort": 44344
+      "sslPort": 0
     }
   },
+  "$schema": "http://json.schemastore.org/launchsettings.json",
   "profiles": {
     "IIS Express": {
       "commandName": "IISExpress",
@@ -21,10 +21,10 @@
       "commandName": "Project",
       "launchBrowser": true,
       "launchUrl": "api/values",
-      "applicationUrl": "https://localhost:5001;http://localhost:5000",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      }
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
     }
   }
 }

Back/skydiveLogs-api/Startup.cs

@@ -17,13 +17,24 @@ namespace skydiveLogs_api
             Configuration = configuration;
         }
 
-        public IConfiguration Configuration { get; }
-
         // This method gets called by the runtime. Use this method to add services to the container.
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
 
+            // CORS
+            services.AddCors(options =>
+            {
+                //options.AddPolicy(MyAllowSpecificOrigins,
+                options.AddDefaultPolicy(
+                builder => 
+                {
+                    builder.WithOrigins("http://localhost:4200")
+                           .AllowAnyHeader()
+                           .AllowAnyMethod();
+                });
+            });
+
             // IoC
             var iocService = new IocService(services);
             iocService.Configure();
@@ -44,8 +55,14 @@ namespace skydiveLogs_api
                 app.UseHsts();
             }
 
-            app.UseHttpsRedirection();
+            app.UseCors(); // (MyAllowSpecificOrigins);
+
+            //app.UseHttpsRedirection();
             app.UseMvc();
         }
+
+        public IConfiguration Configuration { get; }
+
+        readonly string MyAllowSpecificOrigins = "_allowSpecificOrigins";
     }
 }

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -3,9 +3,8 @@
 </p>
 
 <table>
-  <tr *ngFor="let dropZone of userObservable | async as listOfDropZones; index as i;">
-    <td>{{ dropZone.Id }}</td>
-    <td>{{ dropZone.Name }}</td>
+  <tr *ngFor="let dropZone of this.listOfDropZones; index as i;">
+    <td>{{ dropZone.id }}</td>
+    <td>{{ dropZone.name }}</td>
   </tr>
-
 </table>

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -10,7 +10,7 @@ import { ServiceApi } from '../../services/serviceApi';
 
 
 export class ListOfDzsComponent implements OnInit {
-  public listOfDropZones: Array<DropZoneResp>;
+  public listOfDropZones: Array<DropZoneResp> = new Array<DropZoneResp>();
 
   constructor(private serviceApi: ServiceApi) {
   }
@@ -21,6 +21,6 @@ export class ListOfDzsComponent implements OnInit {
 
   getListOfDropZones() {
     this.serviceApi.getListOfDropZones()
-      .subscribe((data: Array<DropZoneResp>) => this.listOfDropZones = data);
+      .subscribe(data => this.listOfDropZones = data);
   }
 }

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -1,3 +1,10 @@
 <p>
   list-of-jumps works!
 </p>
+
+
+<table>
+  <tr *ngFor="let jump of this.listOfJumps | async; index as i;">
+    <td>{{ jump.id }}</td>
+  </tr>
+</table>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { JumpResp } from '../../models/jump';
+import { ServiceApi } from '../../services/serviceApi';
 
 @Component({
   selector: 'app-list-of-jumps',
@@ -6,10 +9,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list-of-jumps.component.css']
 })
 export class ListOfJumpsComponent implements OnInit {
+  public listOfJumps: Observable<Array<JumpResp>>;
 
-  constructor() { }
+  constructor(private serviceApi: ServiceApi) {
+  }
 
   ngOnInit() {
+    this.getListOfJumps();
+  }
+
+  getListOfJumps() {
+    this.listOfJumps = this.serviceApi.getListOfJumps();
   }
 
 }

Front/skydivelogs-app/src/services/serviceApi.ts

@@ -1,16 +1,32 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DropZoneResp } from '../models/dropzone';
+import { JumpResp } from '../models/jump';
+import { Observable } from 'rxjs/Observable';
+import { tap, map } from 'rxjs/operators';
 
 @Injectable()
 export class ServiceApi {
   constructor(private http: HttpClient) { }
 
-  public getListOfDropZones() {
+  public getListOfDropZones(): Observable<Array<DropZoneResp>> {
     const headers = new HttpHeaders({
-      'Access-Control-Allow-Origin': 'https://localhost:44344',
+      'Access-Control-Allow-Origin': 'http://localhost:5000',
     });
 
-    return this.http.get<Array<DropZoneResp>>('https://localhost:44344/api/DropZone', { headers: headers });
+    return this.http.get<Array<DropZoneResp>>('http://localhost:5000/api/DropZone', { headers: headers })
+      .pipe(
+        map(x => x.map(data => new DropZoneResp(data))),
+        // tap(event => console.log(`fetched coinrankings`)),
+        // catchError(this.handleError('getCoinrankings', []))
+      );
+  }
+
+  public getListOfJumps(): Observable<Array<JumpResp>> {
+    const headers = new HttpHeaders({
+      'Access-Control-Allow-Origin': 'http://localhost:5000',
+    });
+
+    return this.http.get<Array<JumpResp>>('http://localhost:5000/api/Jump', { headers: headers });
   }
 }