Angular: Guía práctica
Angular: Guía práctica
$20.00
Precio mínimo
$20.00
Precio sugerido
Angular: Guía práctica

Este libro está 90% completo

Este libro ha sido actualizada por última vez el 2019-07-01.

Acerca de este libro

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, actualizado a la versión 4.3.

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

Sobre el autor

Rubén Aguilera Diaz-Heredero
Rubén Aguilera Diaz-Heredero

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

Table of Contents

  • ¿Por qué Angular?
    • JavaScript, desde mi experiencia
    • Web Components
    • Programación reactiva (RxJS)
    • Angular
      • Simplicidad
      • Rendimiento óptimo
        • Ahead of Time Compilation
        • Lazy Loading
      • Inyección de dependencias y testing
      • Mejoras en el SEO
      • Integración con otras tecnologías
      • Multi soporte a navegadores
      • Internet de las cosas y la web física
    • Conclusión
  • Entorno de desarrollo
    • Instalación de las herramientas necesarias
      • Git
      • NodeJS y npm
      • Angular-cli
      • Editor de texto: Visual Studio Code
      • Chrome
    • Gestión del proyecto con Angular-Cli (v7.1.4)
      • Creación del proyecto
      • Ejecución de la aplicación en desarrollo
      • Ejecución de los tests unitarios
      • Ejecución de los tests de aceptación o e2e
      • Creación de elementos
      • Descubrimiento de errores de estilo y codificación
      • Construcción del proyecto
      • Acceder a la documentación
      • Consejo para la ejecución de los comandos
      • Configuración de la generación por defecto (Angular CLI 6+)
      • El IDE no refresca los cambios automáticamente
  • Módulos
    • @NgModule
    • Creación de un módulo secundario
    • Arranque de la aplicación automático
    • Arranque manual de la aplicación
  • Directivas
    • Componentes
    • Directivas de atributo
      • ngClass y class binding
      • ngStyle y style binding
    • Directivas estructurales
      • ngIf
        • ngIf - then - else
      • ngSwitch
      • ngFor
    • Creación de una directiva de atributo propia
  • Pipes
    • Pipes de serie
    • Parametrización y encadenado
    • Creación de pipes propios
  • Data Binding
    • Interpolation
    • Property binding
      • Element Property
      • Directive property
      • Component Property
    • Event binding
    • NgModel
    • Caso práctico: comunicación entre padre e hijo
  • Servicios e inyección de dependencias
    • Elemento Injector
      • Injector principal
      • Injectores secundarios
    • Localización de dependencias
    • Declaración de providers
      • useClass
      • useValue
      • useFactory
    • Simplificación en la inyección
    • Actualización de Angular 6
  • Routing
    • Configuración del router en el módulo principal
    • Configuración del router en módulo secundario o de feature
    • Configuración con Lazy Loading
      • Para el módulo secundario o de feature
      • Para el módulo principal
    • Router outlet y router links
    • Navegación desde código
    • Recuperación de la información
    • Query params
    • Rutas de guarda
      • CanActivate
      • CanDeactivate
    • Rutas anidadas
    • Rutas auxiliares
    • Resolución de información en el router
    • Acceso a la información del router del padre
    • Los 7 pasos del proceso de routing
    • Ciclo de navegación y eventos del router
  • Formularios
    • Configuración inicial
    • Creación del formulario
    • Configuración de los elementos del formulario
    • Validaciones síncronas
      • Validar campos relacionados
    • Validaciones asíncronas
    • Configuración de cuando disparar las validaciones
    • Estados de un formulario
    • Añadir dinámicamente un control
    • Añadir dinámicamente un conjunto de controles
  • Http: comunicación con servidor remoto
    • Historia de la asincronía
      • Callbacks
      • Promesas
      • Observables
    • Servicio HttpClient
      • Recuperación de datos
      • Interceptores
        • Modificar cabeceras
        • Logging
        • Manejar errores
        • Controlar peticiones a través de timeout
    • Escucha de eventos de progreso
    • Uso de async pipe con objetos
  • Testing
    • Introducción
    • Tests unitarios y de integración con Jasmine
      • Test Suite
      • Test Case
      • Matchers
      • beforeEach() y afterEach()
    • Karma
    • Arquitectura de una aplicación testeable
    • TestBed
    • Situaciones de testing
      • Test de un pipe / servicio sin dependencias
      • Test de un pipe/servicio con dependencias
      • Tests asíncronos
      • Test de componente sin dependencias
      • Test de componente con dependencias
      • Test que involucran al Router
    • Tests unitarios con Mockito
    • Tests de aceptación con Protractor
      • Protractor
    • Test de aceptación con Cypress
    • Caso práctico
    • Conclusión
  • Integraciones
    • Integración con PrimeNG
      • Instalación de PrimeNG en angular-cli
      • Utilización de la librería
    • Integración con StencilJS
      • Empezando con StencilJS
      • Creación del primer componente
      • Elementos del API
      • Métodos del ciclo de vida
      • Uso para hacer layouts
      • Internacionalizazión (i18n)
  • Puesta en producción
    • Análisis del tamaño de la aplicación
      • Verifica que solo se incluye lo obligatorio
      • Verifica el tamaño del bundle principal
    • No subas los .map
    • Genera la documentación
    • Aplicar técnicas de optimización
      • Entendiendo el “Browser rendering”
      • Cómo mejorar el “Browser rendering”
    • Técnicas de optimización en Angular
      • Eliminación de espacios en blanco
      • Uso de web workers
    • Despliegue de la solución en nginx
    • Empaquetado con Docker
  • Programación reactiva (RxJS)
    • Conceptos básicos
      • DataSource
      • Observable
        • Formas de crear un Observable
      • Subscriber
      • Observer
      • Subscription
      • Operadores
        • map(dato ⇒ function(dato))
        • filter(dato ⇒ condicion booleana)
        • tap(x ⇒ function(x))
        • reduce()
        • scan()
        • concat(otherObservable)
        • debounceTime(x ms)
        • throttleTime(x ms)
        • distinct()
        • distinctUntilChanged()
        • switchMap()
        • exhaustMap()
        • catchError()
        • buffer(obs)
        • bufferTime(x)
        • bufferCount(n)
        • pluck
        • first o last
        • take(n)
        • zip
        • forkJoin
          • endWith
          • pairwise
          • combineLatest
      • Subject
        • BehaviorSubject
        • ReplaySubject
        • AsyncSubject
    • Casos de uso
      • Evitar llamar varias veces a una misma llamada al servidor
      • Cuando solo nos interesa la última petición de llamada recibida
      • Encadenar dos peticiones donde la segunda depende de los datos de la primera
      • Repetir una llamada Http cada cierto tiempo con actualización de datos sin parpadeo de pantalla
      • Combinar datos de dos llamadas distintas
  • Gestión del estado
    • Model Pattern
    • Akita
    • Implementación de un CRUD
  • Creación de una librería para Angular
    • Usando @angular/cli después de la versión 6
    • Usando @angular/cli antes de la versión 6
      • Creación de la librería desde cero
      • Uso de packagr para la distribución
    • Configuración externa de la librería
  • Server rendering
    • Introducción
    • Pasos para hacer server rendering después de la versión 6
    • Pasos para hacer server rendering antes de la versión 6
    • Añadimos pre-rendering
  • Internacionalización
    • Haciendo uso del core de Angular
      • Indicar los textos que se quieren internacionalizar
      • Extracción a fichero de mensajes
      • Creación de los ficheros de mensajes por idioma
      • Puesta en producción
    • Uso de la librería de ngx-translate
      • Instalación de las dependencias
      • Configuración en el módulo principal
      • Estableciendo el idioma por defecto
      • Creación de los ficheros de idiomas
      • Uso de las traducciones en los componentes
      • Uso de las traducciones en los servicios/pipes
  • Integración y despliegue continuo
    • Integración continua con TravisCI y despliegue en Firebase
  • Ionic
    • Como empezar a crear una aplicación (Ubuntu 16.04)
    • Conectar con los servicios gratuitos de Ionic PRO
    • Establecer monitoring
      • Captura automática de los errores
      • Captura manual
      • Añadir los sourcemaps
    • Crear nueva página en el sidemenu
    • Navegación
      • Eventos de navegación
    • Gestión del almacenamiento
      • Declaración de múltiples almacenamientos
    • Gestión de las variables de entorno
    • Creación y carga dinámica de temas
    • Implementación de hot deploy
      • ¿Qué es el hot deploy?
      • Como aplicarlo a los proyectos
      • Configuración para distintos entornos de ejecución
      • Usando Firebase como servidor de producción
      • Probando el despliegue en caliente
  • NX: cómo abordar proyectos complejos
    • NX al rescate
    • Empezando con NX
      • Creación de una nueva aplicación
      • Creación de una librería como módulo secundario
      • Creación de una librería
      • Arranque/distribución de la aplicación
      • Publicación de una librería
      • Cosas a tener en cuenta
      • Actualizar el workspace a la última versión de Angular
      • Visualizar en un gráfico las dependencias entre aplicaciones y librerías
    • Integración de Ionic en un workspace de NX
  • Principios de diseño y buenas prácticas
    • Componentes pequeños y tontos
    • No subestimes el poder de los pipes
    • Uso de la herencia en los componentes
    • No uses funciones para calcular datos dentro de los templates
    • Los datos siempre deben fluir en una única dirección
    • No dejes a tus componentes jugar con todos los juguetes ni saber nada del estado de la aplicación
    • Utiliza servicios proxy para acceder a los datos de un API sin nada más de lógica
    • Pasos para abordar una aplicación del mundo real
    • Casos de uso
      • Layouts
      • Bus de notificaciones
      • Event Bus genérico
      • Mostrar un loading
      • Componente genérico para mostrar los errores de validación
      • Extracción de la configuración de la aplicación
        • Variante haciendo uso de Kubernetes
      • Directiva que muestra el elemento mirando permisos
      • Visualización dinámica de componentes
    • Arquitectura propuesta
    • Implementación de un CRUD
  • DevUI: poniendo orden en el front
    • Situación actual en muchas grandes empresas
    • ¿Cómo podemos solucionar esto?
    • No nos quedemos solo en la teoría
    • La automatización es clave
    • Conclusiones

Leanpub incondicional, sin riesgo, 100% de felicidad garantizada

Durante los primeros 45 días de compra, puede obtener un reembolso del 100% de cualquier compra Leanpub, en dos clics. Nosotros procesamos las restituciones a la mano, así que hacen tomar unos días en aparecer. Vea términos completos.

Free Updates. Free App. 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), EPUB (for phones and tablets), MOBI (for Kindle) and in the free Leanpub App (for Mac, Windows, iOS and Android). 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

Escribir y publicar en Leanpub

Los autores y editores usan Leanpub para publicar ebooks sorprendentes en curso y completados, como éste. ¡Usted puede utilizar Leanpub para escribir, publicar y vender su libro también! Leanpub es una potente plataforma para autores serios, que combina un flujo de trabajo de escritura y publicación simple y elegante con una tienda centrada en la venta de libros electrónicos en progreso. Leanpub es una máquina de escribir mágica para los autores: basta con escribir en texto plano, y para publicar su ebook, simplemente haga clic en un botón. Realmente es así de fácil.

Más información sobre cómo escribir en Leanpub