Integrando angular con asp.net core

1. Conectando dos potencias
Angular + asp.net core
Leandro Tuttini
Developer Sr - Lagash - Microsoft MVP Developer Technologies
ltuttini@Lagash.com
Leandro Seoane
Developer Sr - Emerios
lleandro.seoane@emerios.com

2. Embrace the challengelagash.com
Agenda
Angular
Asp.net Core

3. Asp.net Core

4. Embrace the challengelagash.com
Asp.net Core – Por donde empezar

5. Embrace the challengelagash.com
Asp.net Core –Armando la estructura

6. Embrace the challengelagash.com
Asp.net Core – Program

7. Embrace the challengelagash.com
Asp.net Core – Startup
Transient
Transient lifetime services are
created each time they're
requested.
Scoped
Scoped lifetime services are
created once per request.
Singleton
Singleton lifetime services are
created the first time they're
requested. Every subsequent
request uses the same instance.

8. Embrace the challengelagash.com
Asp.net Core – Startup

9. Embrace the challengelagash.com
Asp.net Core –API
Opcion recomendada

10. Embrace the challengelagash.com
Asp.net Core –API

11. Embrace the challengelagash.com
Entity Framework Core - Estructura
Necesario para Migrations
Necesario para asp.net core
Migrations leera el connection string
del config del Proyecto web

12. Embrace the challengelagash.com
Entity Framework Core - Migrations
Recordar agregar la referencia
Proyecto donde se define el DbContext
Sera donde se agreguen el código generado

13. Embrace the challengelagash.com
Entity Framework Core –Acceso configuración
Microsoft.Extensions.Configuration.FileExtensions
Microsoft.Extensions.Configuration.Json
Para accede a la configuracion seran necesario dos librerias:

14. Embrace the challengelagash.com
Automapper
Startup.cs
Utilizacion

15. Angular

16. Embrace the challengelagash.com
HttpClientModule

17. Embrace the challengelagash.com
Model

18. Embrace the challengelagash.com
Service – Definicion

19. Embrace the challengelagash.com
Service – Invocando la web api

20. Embrace the challengelagash.com
Service – Inyectando en el Componente

21. Embrace the challengelagash.com
Service – Como Utilizarlos
comic.service.ts

22. Embrace the challengelagash.com
Transformando datos con RxJs

23. Embrace the challengelagash.com
Headers

24. Embrace the challengelagash.com
Interceptors
 Desde el punto de vista de Angular son un Servicio que implementa la interface HttpInterceptor
 Permite manipular la solicitud http antes que sea enviada al servidor
 Permite manipular respuestas http antes que retorne a la applicacion

25. Embrace the challengelagash.com
Interceptors - Header
El request se clona porque es inmutable

26. Embrace the challengelagash.com
Interceptors - Log

27. Embrace the challengelagash.com
Interceptors – Como registrarlo

28. Argentina | Buenos Aires
+54 (11) 4982 4185
info@lagash.com
Chile | Santiago de Chile
+56 (2) 2231 9428
info_chile@lagash.com
Colombia | Bogotá
+57 (1) 750 5276
info_colombia@lagash.com
México | México DF
+52 (55) 6394 0617
info_mexico@lagash.com
USA | Seattle - US
+1 844 4 Lagash
infousa@lagash.com
Uruguay | Montevideo
+598 2623 2546
info_uy@lagash.com
Let’s keep in touch