๏ Conceptos básicos de estructura de código

๏ Organización de un proyecto Angular

๏ Disposición de árbol de carpetas y archivos

๏ Pautas de nombrado

๏ Guía de estilos para cada elemento o herramienta que nos ofrece Angular

๏ Otra alternativa de esqueleto de carpetas

๏ Repaso de “buenas prácticas” extra, no contenidas en las guías oficiales de Angular

๏ Un ejemplo de aplicación MVC con Angular

Por qué debes aprender buenas prácticas con Angular

El curso de buenas prácticas en Angular está orientado a desarrolladores profesionales que ya conocen Angular de antemano y desean adquirir rápidamente conocimientos adicionales que les permitan elevar la calidad de su código y sus proyectos.

Angular se está convirtiendo en el framework más usado, sobre todo en proyectos de gran tamaño, por su robustez, versatilidad, y por la empresa que le da soporte (Google). Al usarse en proyectos de gran magnitud es muy importante hacer hincapié en la estructuración, tanto de carpetas como de código, y de su forma de programarlo, creando convenciones que deberían aplicarse por cada uno de los miembros del equipo de desarrolladores del proyecto.

Con este curso revisaremos las buenas prácticas para el desarrollo, con convenciones oficiales ofrecidas por el equipo de Angular en su “Guía de estilo”, aportando nuevas soluciones que añaden un contenido indispensable para la elaboración de grandes proyectos. Gracias al curso de buenas prácticas, en pocas horas, un desarrollador Angular podrá adquirir gran cantidad de conocimiento, que de otra manera requeriría años de experiencia para su obtención.

Índice del contenido del curso

A continuación puedes encontrar un resumen de los puntos que vamos a tratar en este curso.

1. John Papa

2. Única responsabilidad

   2.1. Regla de uno

   2.2. Funciones pequeñas

3. Nombrado

   3.1. Nombrado general

   3.2. Separar nombres de archivos con puntos y guiones

   3.3. Símbolos en nombres de archivos

   3.4. Nombrado de servicios

   3.5. Bootstrapping de Angular

   3.6. Selector de componentes

   3.7. Prefijo personalizado para componentes

   3.8. Selector en directivas

   3.9. Prefijo personalizado para directivas

   3.10. Nombres de pipes

   3.11. Nombrado de tests unitarios

   3.12. Nombrado de tests End‐to‐End (E2E)

   3.13. Nombres para Angular NgModule

4. Convenciones para el código

   4.1. Clases

   4.2. Constantes

   4.3. Interfaces

   4.4. Propiedades y métodos

   4.5. Espaciado de líneas en imports

5. Estructura de aplicación y módulos

   5.1. LIFT

   5.2. Locate

   5.3. Identify

   5.4. Flat

   5.5. T‐DRY (Try "intentar ser" DRY)

   5.6. Directrices estructurales

   5.7. Estructura de carpetas por funcionalidad

   5.8. Estructura de carpetas por funcionalidad versus estructura de carpetas por herramientas Angular

   5.9. Módulo "App root"

   5.10. Módulos de funcionalidades

   5.11. Módulos con funcionalidades compartidas

   5.12. Módulo con las funcionalidades "core"

   5.13. Prevención del re-importado de los módulos

   5.14. Carpetas con carga perezosa (Lazy Load)

   5.15. No importar nunca directamente carpetas destinadas a carga perezosa

6. Componentes

   6.1. Componentes como elementos

   6.2. Extraer templates y estilos a sus propios archivos

   6.3. Decorar propiedades input y output

   6.4. Evitar "aliasing" de inputs y outputs

   6.5. Secuencia de miembros

   6.6. Delegar lógica compleja de componentes a servicios

   6.7. No usar prefijos en las propiedades output

   6.8. Poner la lógica de presentación en la clase del componente

7. Directivas

   7.1. Usar directivas para mejorar elementos

   7.2. Decoradores HostListener / HostBinding versus host metadata

8. Servicios 8.1. Servicios son singletons

   8.2. Responsabilidad única

   8.3. Proporcionar un servicio

   8.4. Usar la el decorador de clase @Injectable()

9. Servicios de datos

   9.1. Comunicaciones con el servidor a través de servicios

10. Hooks del ciclo de vida

   10.1. Implementar interfaces del ciclo de vida

11. Apéndice 11.1. Codelyzer

   11.2. Plantillas de ficheros y snippets

12. Más buenas prácticas usando Angular

   12.1. PROHIBIDO el uso de los “BARREL”

   12.2. Uso de los “COMENTARIOS”

   12.3. Tipificar

   12.4. Constructor()

   12.5. .toPromise()

   12.6. Hacer uso de takeUntil()

   12.7. trackBy()

   12.8. Árbol de carpetas “Plana”

   12.9. Estructura de los “imports”

   12.10. Estructura “interna” de la “class”

13. Ejemplo MVC

Requisitos de conocimientos para el aprovechamiento del curso

Para poder aprovechar el curso de buenas prácticas en Angular es necesario disponer de conocimientos básicos de Angular, ya que no es un curso del framework desde cero, sino de estructuración y buenas prácticas.