Skip to content

Ejemplo de Tour of heroes con Web API en .NET y base de datos en un contenedor de Docker

Notifications You must be signed in to change notification settings

0GiS0/tour-of-heroes-angular

Repository files navigation

Aplicación de ejemplo en Angular: Tour Of Heroes

Este proyecto es una aplicación en AngularJS que muestra un listado de heroes. Proviene del tutorial de AngularJS. Sin embargo, se han llevado a cabo ciertas modificaciones para que este utilice una API en .NET Core que puedes encontrar aquí.

Para ello, se ha modificado el archivo app/app.module.ts para comentar los archivos que referencian a la API en memoria del tutorial.

//In memory web api
// import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
// import { InMemoryDataService } from './in-memory-data.service';

Y el que se referencia en el apartado imports:

  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    // HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false })
  ],

Por otro lado, se ha modificado el archivo app/hero.service.ts para utilizar una variable que referencie a la API real:

export class HeroService {

  // private heroesUrl = 'api/heroes';
  private heroesUrl = environment.apiUrl; //URL to the web api

Los valores de enviroment se encuentran en los archivos src/environments/enviroment.ts y src/environments/environment.prod.ts. Dependiendo de cómo se compile el proyecto se utilizará uno u otro (environment.ts para desarrollo y environment.prod.ts para producción).

y un cambio mínimo en el método update:

  /** PUT: update the hero on the server */
  updateHero(hero: Hero): Observable<any> {

    // Create the route - getting 405 Method not allowed errors
    const url = `${this.heroesUrl}/${hero.id}`;

    return this.http.put(url, hero, this.httpOptions).pipe(
      tap(_ => this.log(`updated hero id=${hero.id}`)),
      catchError(this.handleError<any>('updateHero'))
    );
  }

Cómo lo ejecuto

IMPORTANTE: Antes de ejecutar este proyecto necesitas tener la API en .NET ejecutándose. Más información aquí

Lo primero que debes hacer es descargarte el proyecto en local:

git clone https://github.com/0GiS0/tour-of-heroes-dotnet-api.git

Instalar las dependencias con npm:

npm install

y por último ejecutarlo con start:

npm start

El proceso arrancará y estará disponible en esta dirección: http://localhost:4200/