Arquitectura de un Proyecto en Angular

Presentación para NgPanama, de creación de una aplicación en Angular, utilizando CoreModule y SharedModules.

Transcript

1. Arquitectura de un Proyecto en Angular @oidacra
2. Ing. Arcadio E. Quintero A. Senior Fullstack developer y socio fundador en Acciona Solutions, S.A., Empresa con mas de 12 años de experiencia de desarrollo de aplicaciones web/móvil @oidacra
3. Angular Creamos un app con Ng CLI @oidacra
4. Creamos un app Instalamos Webpack Bundle Analyzer 1 2 @oidacra
5. Creamos un nuevo script Corremos nuestro script 3 4 package.json @oidacra
6. Resultado de Webpack Bundle Analyzer 5 @oidacra
7. Corremos el Angular 6 @oidacra
8. Angular Arquitectura de un Proyecto en Angular @oidacra
9. https://medium.com/@tomastrajan/how-to-build-epic- angular-app-with-clean-architecture-91640ed1656 @oidacra
10. APP MODULE APP ROUTING MODULE APLICATION CORE MODULE SHARED MODULE LAZY LOADING ROUTING LAZY FEATURE A LAZY FEATURE B LAZY FEATURE C EAGER @oidacra
11. Creamos el Core Module app.module.ts @oidacra
12. Creamos Layout Agregamos al main-layout.component.html @oidacra
13. Instalamos Angular Material y modificamos core.module.ts Modificamos core.module.ts Utilizaremos Toolbar y Button @oidacra
14. Creamos con Ng CLI 4 módulos y sus rutas @oidacra
15. Creamos el Shared Module shared.module.ts @oidacra
16. ¿Qué debemos colocar en un Shared Module? Declarables (components, directives and pipes) que utilizaremos en multiples lazy load modules. Componentes de libraries (vendor / material / componentes propios reutilizables) Nota: NUNCA declarar servicios en un shared module. @oidacra
17. Caso 1 SHARED MODULE LAZY FEATURE A @angular/material/card Caso 2 LAZY FEATURE B @angular/material/card LAZY FEATURE C @angular/material/card SHARED MODULE LAZY FEATURE A LAZY FEATURE B LAZY FEATURE C @angular/material/card @oidacra
18. Resultado de Webpack Bundle Analyzer Caso 1 Caso 2 @oidacra
19. Gracias @oidacra