Visual studio code (vscode) es el editor de código creado por Microsoft. Su funcionalidad multi-plataforma, variedad de plugins y sus constantes actualizaciones hacen que se convierta en uno de los mejores editores de código que existen hoy en día para los programadores.

Si no lo conoces, te invito a probarlo:

https://code.visualstudio.com/

Angular 6

Existen varias maneras de crear una aplicación en Angular 6. En este caso utilizaremos vscode como editor de código y el CLI de Angular. 

Creamos un directorio para nuestra solución y a través de la consola de comandos (cmd) navegamos hasta él

Instalar el CLI de Angular

En el caso de no tener instalado el CLI de Angular utilizaremos npm para la instalación del mismo a traves del comando npm install -g @angular/cli

Con el comando ng version podemos ver la información referida al CLI recién instalado

ng-version-angular-cli
ng-version-angular-cli

Creando nuestro proyecto con el CLI de Angular

Una vez instalado el CLI de Angular, utilizaremos el comando ng new <project-name> para crear el proyecto. Por defecto, el proyecto se crea en el directorio actual

ng-new-angular6-cli
ng-new-angular6-cli

Web API Core

Utilizaremos las herramientas del CLI de .NET Core para crear nuestro proyecto web api a través de la consola de comandos.

Dentro de nuestro directorio raiz creamos un directorio llamado api y navegamos hasta él.

Para crear nuestro proyecto de web api debemos ejecutar el comando dotnet new webapi

ng-new-angular6-cli-dotnet-new
ng-new-angular6-cli-dotnet-new

Ya tenemos nuestros dos proyectos instalados de manera correcta.

La estructura de nuestra solución es la siguiente

vscode-solution-explorer
vscode-solution-explorer

Iniciamos ambos proyectos

  • El proyecto web api iniciamos con F5
    • Por defecto la url es http://localhost:5000/api/values
  • El proyecto de angular navegamos hacia la ruta del front y ejecutamos el comando ng serve del CLI de Angular

 

ng-serve-angular-cli
ng-serve-angular-cli

Por defecto la url es http://localhost:4200/

angular-home
angular-home

Conectando el Frontend con el Backend

Lo primero que debemos hacer es habilitar en nuestro backend para que pueda recibir peticiones desde otro origen, como lo es el proyecto de Angular que hemos creado (http://localhost:4200). 

En nuestra clase Startup agregamos el origen a través del middleware (CORS) que trae por defecto core.

De esta forma configuramos nuestro proyecto de web api para que pueda recibir peticiones desde el origen http://locahost:4200

El proyecto web api core nos crea por defecto un controlador llamado ValuesController. Lo vamos a modificar para que devuelva una pequeña lista de objetos para conectar desde angular estos datos

 

Terminada ya la parte de backend, es el momento de nuestro Front.

Para hacer peticiones a nuestra web api es necesario utilizar las funcionalidades que nos provee el paquete @angular/http.

Debemos importar el modulo HttpClientModule en app.module.ts

Al importar el modulo, es posible inyectar HttpClient en el constructor de nuestro componente app.component.ts

Implementamos la interfaz OnInit y realizamos nuestra petición al controlador ValuesController. La respuesta la asignamos a una propiedad de tipo array usuarioModel

Dentro del html del component iteramos nuestro modelo e imprimimos la lista de usuarios en el front

El resultado

angular-usuarios-front
angular-usuarios-front
¡Si te gusto el articulo, compártelo con tus contactos en las redes sociales!

Escribe una respuesta a este comentario

avatar
500
  Subscribe  
Notificar de