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/

Uso de Datos de Muestra para Pruebas

Para facilitar las pruebas en el entorno de desarrollo, se ha incluido un conjunto de datos de muestra en la base de datos del contenedor de desarrollo. Estos datos permiten probar la aplicación sin necesidad de configurar una base de datos externa o realizar inserciones manuales de datos.

Para utilizar estos datos de muestra, asegúrate de que el contenedor de desarrollo esté en ejecución y sigue estos pasos:

1. Accede al contenedor de la base de datos utilizando tu herramienta de gestión de bases de datos preferida.
2. Verifica que los datos de muestra se han insertado correctamente ejecutando consultas de selección en las tablas relevantes.
3. Utiliza estos datos para realizar pruebas de funcionalidad en la aplicación.

Estos datos de muestra están diseñados para cubrir casos de uso comunes y facilitar el proceso de desarrollo y pruebas.