Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

Angular: Guía práctica

Y el ecosistema que le rodea

Rubén Aguilera

Con esta guía te aseguras tener siempre una referencia actualizada del framework en castellano y no tienes que invertir tiempo en buscar información por Internet de cursos online, tutoriales, blogs, charlas... ya te lo dejo hecho porque es mi propio repositorio de aprendizaje sobre Angular y todo lo que le rodea.

Minimum price

$20.00

$20.00

You pay

$20.00

Author earns

$16.00
$

...Or Buy With Credits!

You can get credits with a paid monthly or annual Reader Membership, or you can buy them here.
PDF
EPUB
WEB
423
Pages
83,021Words
About

About

About the Book

Desde hace ya mucho tiempo me gusta crear mis propias guías prácticas sobre las tecnologías que estoy aprendiendo.

Angular me enamoró en Marzo de 2014 y desde entonces he ido creando esta guía práctica que está completamente orientada hacia el aprendizaje de Angular.

La guía parte de los conceptos más básicos hasta técnicas más avanzadas y problemas que me he ido encontrando en el día a día de proyectos que actualmente están en producción. Por lo que es apta tantos para principiantes como para desarrolladores que ya se hayan pegado con esta tecnología.

Se trata de cubrir todas las áreas del desarrollo partiendo de cero: montando el entorno más productivo posible, manejando los conceptos del framework, las buenas prácticas en el desarrollo, el testing, implementación de casos de uso comunes y su puesta en producción.

Tienes que tener en cuenta que algunos puntos estarán por desarrollar y solo tendrán ideas y enlaces a páginas para su desarrollo.

Esta guía siempre se va a quedar al 90% porque a medida que siga aprendiendo y practicando la iré ampliando. El feedback constructivo siempre es bien recibido, así que si ves que puedo ampliarla en algún punto, no dudes en decírmelo.

Si lo que buscas es un curso básico desde 0 en castellano, puedes acceder al siguiente curso online

Share this book

Categories

JavaScript

Feedback

Email the Author

Author

About the Author

Rubén Aguilera

Rubén Aguilera (@raguilera82) es un Ingeniero Informático que lleva en esto más de 10 años y que los últimos 8 años los lleva desarrollando su carrera profesional y personal en Autentia donde ha conseguido gracias a su polivalencia adquirir conocimientos en 4 grandes áreas del desarrollo: frontend (web y móvil), backend (creación de APIs y arquitectura basadas en microservicios), metodologías ágiles (certificado en Scrum) y Devops (integración y despliegue continuo) tanto impartiendo cursos de formación como en proyectos actualmente en producción. Mucho de este conocimiento lo comparte en la web AdictosAlTrabajo.com

Contents

Table of Contents

¿Por qué Angular?

  1. JavaScript, desde mi experiencia
  2. Web Components
  3. Programación reactiva (RxJS)
  4. Angular
  5. Simplicidad
  6. Rendimiento óptimo
  7. Ahead of Time Compilation
  8. Lazy Loading
  9. Inyección de dependencias y testing
  10. Mejoras en el SEO
  11. Integración con otras tecnologías
  12. Multi soporte a navegadores
  13. Internet de las cosas y la web física
  14. Conclusión

Entorno de desarrollo

  1. Instalación de las herramientas necesarias
  2. Git
  3. NodeJS y npm
  4. Angular CLI
  5. Editor de texto: Visual Studio Code
  6. Chrome
  7. Gestión del proyecto con Angular-Cli (v15.0.5)
  8. Creación del proyecto
  9. Ejecución de la aplicación en desarrollo
  10. Ejecución de los tests unitarios
  11. Ejecución de los tests de aceptación o e2e
  12. Creación de elementos
  13. Descubrimiento de errores de estilo y codificación
  14. Construcción del proyecto
  15. Acceder a la documentación
  16. Añadir funcionalidad
  17. Ayuda para el deploy de la aplicación
  18. Trabajar con la configuración del espacio de trabajo
  19. Actualizar las dependencias del proyecto
  20. Consejo para la ejecución de los comandos
  21. Configuración de la generación por defecto (Angular CLI 6+)
  22. El IDE no refresca los cambios automáticamente
  23. Estructura del proyecto y ficheros importantes
  24. Cambios en la configuración por defecto
  25. Cambio de Karma por Jest
  26. Cambio de Protractor por Cypress

Módulos

  1. @NgModule
  2. Creación de un módulo secundario
  3. Arranque de la aplicación automático
  4. Arranque manual de la aplicación

Directivas

  1. Componentes
  2. Directivas de atributo
  3. ngClass y class binding
  4. ngStyle y style binding
  5. Directivas estructurales
  6. ngIf
  7. ngIf - then - else
  8. ngSwitch
  9. ngFor
  10. Práctica
  11. Creación de una directiva de atributo propia

Pipes

  1. Pipes de serie
  2. Parametrización y encadenado
  3. Creación de pipes propios

Data Binding

  1. Interpolation
  2. Property binding
  3. Element Property
  4. Directive property
  5. Component Property
  6. Event binding
  7. NgModel
  8. Práctica: comunicación entre padre e hijo

Servicios e inyección de dependencias

  1. Elemento Injector
  2. Injector principal
  3. Injectores secundarios
  4. Localización de dependencias
  5. Declaración de providers
  6. useClass
  7. useValue
  8. useFactory
  9. Simplificación en la inyección
  10. Actualización a partir de Angular 6

Routing

  1. Configuración del router en el módulo principal
  2. Configuración del router en módulo secundario o de feature
  3. Configuración con Lazy Loading
  4. Para el módulo secundario o de feature
  5. Para el módulo principal
  6. Router outlet y router links
  7. Navegación desde código
  8. Recuperación de la información
  9. Query params
  10. Rutas de guarda
  11. CanActivate
  12. CanDeactivate
  13. Rutas anidadas
  14. Rutas auxiliares
  15. Resolución de información en el router
  16. Acceso a la información del router del padre
  17. Los 7 pasos del proceso de routing
  18. Ciclo de navegación y eventos del router

Formularios

  1. Configuración inicial
  2. Creación del formulario
  3. Configuración de los elementos del formulario
  4. Validaciones síncronas
  5. Validar campos relacionados
  6. Validaciones asíncronas
  7. Configuración de cuando disparar las validaciones
  8. Estados de un formulario
  9. Añadir dinámicamente un control
  10. Añadir dinámicamente un conjunto de controles
  11. Hacer que las validaciones se ejecuten en tiempo real
  12. Crear componentes con subformularios

Http: comunicación con servidor remoto

  1. Historia de la asincronía
  2. Callbacks
  3. Promesas
  4. Observables
  5. Servicio HttpClient
  6. Recuperación de datos
  7. Descarga de un fichero Excel
  8. Interceptores
  9. Modificar cabeceras
  10. Gestión del token y el token de refresco
  11. Logging
  12. Manejar errores
  13. Controlar peticiones a través de timeout
  14. Escucha de eventos de progreso
  15. Uso de async pipe con objetos

Testing

  1. Introducción
  2. Tests unitarios y de integración con Jasmine
  3. Test Suite
  4. Test Case
  5. Matchers
  6. beforeEach() y afterEach()
  7. Karma
  8. Arquitectura de una aplicación testeable
  9. Creación de fakes con Jasmine
  10. Tests unitarios con Mockito
  11. TestBed
  12. Situaciones de testing
  13. Test de un pipe / servicio sin dependencias
  14. Test de un pipe/servicio con dependencias
  15. Tests asíncronos
  16. Test de componente sin dependencias
  17. Test de componente con dependencias
  18. Test de navegación
  19. Test que involucran al Router
  20. Test de formularios
  21. Test de @Output (EventEmitter)
  22. Test de directiva
  23. Test de un servicio con dependencia HttpClient
  24. Tests de aceptación con Protractor
  25. Protractor
  26. Test de aceptación con Cypress
  27. Caso práctico
  28. Cambiar Protractor por Cypress
  29. Calcular la cobertura que genera Cypress
  30. Conclusión

Integraciones

  1. Integración con PrimeNG
  2. Instalación de PrimeNG en angular-cli
  3. Utilización de la librería
  4. Integración con StencilJS
  5. Empezando con StencilJS
  6. Creación del primer componente
  7. Elementos del API
  8. Métodos del ciclo de vida
  9. Uso para hacer layouts
  10. Internacionalización (i18n)
  11. Establecer tema de forma dinámica
  12. Integración con Storybook

Puesta en producción

  1. Análisis del tamaño de la aplicación
  2. Verifica que solo se incluye lo obligatorio
  3. Verifica el tamaño del bundle principal
  4. No subas los .map
  5. Genera la documentación
  6. Aplicar técnicas de optimización
  7. Entendiendo el “Browser rendering”
  8. Cómo mejorar el “Browser rendering”
  9. Técnicas de optimización en Angular
  10. Eliminación de espacios en blanco
  11. Uso de web workers
  12. Despliegue de la solución en nginx
  13. Empaquetado con Docker

Programación reactiva (RxJS)

  1. Conceptos básicos
  2. DataSource
  3. Observable
  4. Tipos de observables
  5. Formas de crear un Observable
  6. Subscriber
  7. Observer
  8. Subscription
  9. Operadores
  10. Buffering & Windowing
  11. buffer(obs)
  12. bufferCount(n)
  13. bufferTime(x)
  14. bufferTogle(opening, closing)
  15. bufferWhen(cond)
  16. window()
  17. windowCount(n)
  18. windowTime(n ms)
  19. windowToggle(opening, closing)
  20. windowWhen
  21. Manejo de errores
  22. catchError()
  23. throwIfEmpty
  24. retry
  25. retryWhen
  26. timeout
  27. timeoutWith
  28. Filtrado múltiple de resultados
  29. skip(n)
  30. skipLast(n)
  31. skipUntil()
  32. skipWhile(cond)
  33. take(n)
  34. takeLast(n)
  35. takeUntil(timer)
  36. takeWhile(cond)
  37. distinct
  38. distinctUntilChanged
  39. distinctUntilKeyChanged
  40. filter(cond)
  41. sample(timer)
  42. audit
  43. Ejemplo sample vs audit
  44. throttle
  45. Filtros de un solo valor
  46. first
  47. last
  48. min
  49. max
  50. elementAt(n)
  51. find(cond)
  52. findIndex(cond)
  53. single(cond)
  54. Combinando observables
  55. combineAll
  56. concatAll()
  57. exhaust()
  58. mergeAll()
  59. withLatestFrom(internal, internal, …)
  60. combineLatest([obs, obs, …])
  61. forkJoin([obs, obs, …])
  62. Agrupando valores
  63. groupBy
  64. pairwise
  65. partition(cond)
  66. switchAll()
  67. toArray()
  68. zipAll()
  69. Transformación de observables en nuevo observable
  70. repeat(n)
  71. repeatWhen(obs)
  72. ignoreElements
  73. finalize
  74. Multicasting
  75. shareReplay(n)
  76. Operadores de nivel superior
  77. concatMap()
  78. mergeMap()
  79. switchMap()
  80. exhaustMap()
  81. Tiempo, duración y planificación
  82. auditTime(ms)
  83. sampleTime(ms)
  84. debounceTime(x ms)
  85. delay(ms)
  86. delayWhen(innerobs)
  87. throttleTime(ms)
  88. timestamp
  89. Transformación de valores
  90. defaultIfEmpty()
  91. endWith
  92. startWith
  93. reduce()
  94. scan()
  95. pluck
  96. Útiles
  97. count()
  98. every(cond)
  99. isEmpty()
  100. tap(x ⇒ function(x))
  101. Subject
  102. BehaviorSubject
  103. ReplaySubject
  104. AsyncSubject
  105. Casos de uso
  106. Evitar llamar varias veces a una misma llamada al servidor
  107. Cuando solo nos interesa la última petición de llamada recibida
  108. Encadenar dos peticiones donde la segunda depende de los datos de la primera
  109. Repetir una llamada Http cada cierto tiempo con actualización de datos sin parpadeo de pantalla
  110. Combinar datos de un array con otra llamada distinta
  111. Crear un objeto a partir de distintas llamadas al api

Gestión del estado

  1. Model Pattern
  2. Akita
  3. Implementación de un CRUD con Akita

Creación de una librería para Angular

  1. Usando @angular/cli después de la versión 6
  2. Usando @angular/cli antes de la versión 6
  3. Creación de la librería desde cero
  4. Uso de packagr para la distribución (Angular -6)
  5. Configuración externa de la librería

Server rendering

  1. Introducción
  2. Pasos para hacer server rendering después de la versión 6
  3. Pasos para hacer server rendering antes de la versión 6
  4. Añadimos pre-rendering

Internacionalización

  1. Haciendo uso del core de Angular
  2. Indicar los textos que se quieren internacionalizar
  3. Extracción a fichero de mensajes
  4. Creación de los ficheros de mensajes por idioma
  5. Puesta en producción
  6. Uso de la librería de ngx-translate
  7. Instalación de las dependencias
  8. Configuración en el módulo principal
  9. Estableciendo el idioma por defecto
  10. Creación de los ficheros de idiomas
  11. Uso de las traducciones en los componentes
  12. Uso de las traducciones en los servicios/pipes

Integración y despliegue continuo

  1. Integración continua con TravisCI y despliegue en Firebase

Ionic

  1. Como empezar a crear una aplicación (Ubuntu 16.04)
  2. Conectar con los servicios gratuitos de Ionic PRO
  3. Establecer monitoring
  4. Captura automática de los errores
  5. Captura manual
  6. Añadir los sourcemaps
  7. Crear nueva página en el sidemenu
  8. Navegación
  9. Eventos de navegación
  10. Gestión del almacenamiento
  11. Declaración de múltiples almacenamientos
  12. Gestión de las variables de entorno
  13. Creación y carga dinámica de temas
  14. Implementación de hot deploy
  15. ¿Qué es el hot deploy?
  16. Cómo aplicarlo a los proyectos
  17. Configuración para distintos entornos de ejecución
  18. Usando Firebase como servidor de producción
  19. Probando el despliegue en caliente
  20. Testing unitario y de integración con Jest
  21. Testing E2E con Cypress

NX: cómo abordar proyectos complejos

  1. NX al rescate
  2. Empezando con NX
  3. Creación de una nueva aplicación
  4. Creación de una librería como módulo secundario
  5. Creación de una librería
  6. Arranque/distribución de la aplicación
  7. Publicación de una librería
  8. Cosas a tener en cuenta
  9. Actualizar el workspace a la última versión de Angular
  10. Visualizar en un gráfico las dependencias entre aplicaciones y librerías
  11. Integración de Ionic en un workspace de NX

Principios de diseño y buenas prácticas

  1. Componentes pequeños y tontos
  2. No subestimes el poder de los pipes
  3. Uso de la herencia en los componentes
  4. No uses funciones para calcular datos dentro de los templates
  5. Los datos siempre deben fluir en una única dirección
  6. No dejes a tus componentes jugar con todos los juguetes ni saber nada del estado de la aplicación
  7. Utiliza servicios proxy para acceder a los datos de un API sin nada más de lógica
  8. Pasos para abordar una aplicación del mundo real
  9. Casos de uso
  10. Layouts
  11. Bus de notificaciones
  12. Event Bus genérico
  13. Mostrar un loading
  14. Componente genérico para mostrar los errores de validación
  15. Extracción de la configuración de la aplicación
  16. Variante haciendo uso de Kubernetes
  17. Directiva que muestra el elemento mirando permisos
  18. Visualización dinámica de componentes
  19. Utilizar la técnica View Model (vm) para centralizar las fuentes de información
  20. Arquitectura propuesta
  21. Implementación de un CRUD

DevUI: poniendo orden en el front

  1. Situación actual en muchas grandes empresas
  2. ¿Cómo podemos solucionar esto?
  3. No nos quedemos solo en la teoría
  4. La automatización es clave
  5. Conclusiones

NestJS

  1. Primeros pasos
  2. Configuración de Visual Studio Code
  3. Ejecución de los tests
  4. Arranque de la aplicación
  5. Configuración del debug en VSCode
  6. Externalización de la configuración
  7. Cálculo de la cobertura conjunta (unitarios + integración)
  8. Creación de un CRUD con API REST
  9. Utilizando PostgreSQL
  10. Gestión de errores

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub