ASP Net Core y Angular 2 Facilmente

Pre requisitos:
Las herramientas que necesitamos tener instaladas en nuestra maquina antes de empezar el tutorial son:

Node: https://nodejs.org/en/  

ASP.net Core SDK (https://www.microsoft.com/net/download/core)
   OR 
Visual Studio 2017 (https://www.visualstudio.com/es/vs/whatsnew/) Esto instalara tambien las herramientas de ASP.NET Core. La version Community es de uso gratuito.

Podemos realizar todo el tutorial desde el simbolo de sistema, Pero prefiero mostrarles usando el 'Visual Studio Code' ya que me parece una herramienta excelente, gratuita y liviana, Asi que necesitaran bajarse el  'Visual Studio Code' si quieren hacerlo de esta manera.


Abrir el Visual Studio Code:

Abrir un directorio donde estara la aplicacion:

Para crear un nuevo directorio solo hacemos click en 'New Folder' ponemos un nombre al directorio y luego lo seleccionamos.

Ahora tenemos un folder vacio para trabajar:

Para abrir el simbolo de sistema integrado en el VS Code usa 'ctrl + `'

Ahora tendras un simbolo de sistema listo dentro del VS Code:

En la linea de comandos podemos instalar los  'asp.net templates' o sea plantillas de proyectos de asp.net, esos estaran disponibles para cualquier otra aplicacion que desarrollemos no solo esta. Para esto tecleamos:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 

Una vez terminada la instalacion podemos ver la lista de plantillas disponibles. Para esto tecleamos:

dotnet new -l

Vemos que tenemos el template de angular disponible asi que lo usaremos para nuestra aplicacion. Para esto tecleamos:

dot net new angular    

Esto creara los archivos y estructura del proyecto base en el folder en el cual estamos trabajando, una aplicacion asp.net core with angular 2 funcional. 

Vemos que tenemos un archivo CoreDemo.csproj que tiene las dependencias para el lado Servidor de la aplicacion, para bajar estas dependencias en nuestra App, tecleamos:

dotnet restore

Ahora tenemos que cargar nuestras dependencias  del lado cliente de la aplicacion las cuales estan listadas en el archivo package.json para eso usamos node, tecleamos:

npm install

Una vez que terminamos de cargar todas nuestras dependencias nuestra aplicacion esta lista para correr. La plantilla que instalamos incluye la libreria  Webpack que se encarga de poner nuestros componentes en Angular a disposicion en nuestro directorio raiz wwwroot folder. 

Asi que para correr la aplicacion simplemente tecleamos:

dotnet run

Abrimos nuestro navegador en la direccion 'http://localhost:5000' y podemos ver nuestra plantilla totalmente funcional con algunos ejemplos de uso (un contador en angular, obtener data desde un api de aspnet.core).

Ahora partiendo de esta base depende de nosotros modificarla a nuestro gusto o usar el codigo para estudiarlo y hacer nuestra propia aplicacion desde cero..

Y eso, amigos mios, es todo!