Este libro permite a los lectores embarcarse en el desarrollo de aplicaciones web con el framework Angular (en la versión 8 en el momento de la redacción de este libro). Para una mejor comprensión de su contenido, es necesario tener un conocimiento mínimo sobre el funcionamiento de la web y sobre los lenguajes HTML y JavaScript. Los autores tuvieron que escribir un libro muy pragmático con numerosos ejemplos de código, comentados y explicados, que ilustran de manera muy concreta los pasajes más teóricos. Diseñado para ser un efectivo aliado a diario, este libro muy estructurado constituye una verdadera referencia Angular para el desarrollador.

En los primeros capítulos, para poder comenzar el desarrollo de una aplicación con Angular, los autores tratan temas que se deben dominar, como qué son los componentes, los templates, los pipes e incluso los módulos. También se estudian el lenguaje Microsoft TypeScript y la herramienta de línea de comandos CLI.

Cada uno de los siguientes capítulos detalla una pieza específica del framework. El lector aprende qué es un componente, un servicio o una directiva y cómo usarlos. Se trata la operación de inyección de dependencias o enrutamiento, así como la creación de un formulario o las interacciones con el usuario.

El libro continúa con el aprendizaje de las pruebas de una aplicación angular, ya sea a través de pruebas unitarias o de integración (end-to-end), así como las diversas posibilidades existentes para hacer una aplicación multiplataforma (o cross-platform).

Finalmente, un capítulo está dedicado a temas más avanzados, en los que los autores detallan en particular cómo realizar la representación del lado del servidor e incluso la operación del motor de detección de cambios.

¡Nuevo! Rondas de preguntas disponibles con la versión online.

¡Ronda de preguntas
incluida en
la versión online !

• Ponga a prueba sus conocimientos al final de cada capítulo
• Evalúe sus competencias

Prefacio

1. ¿Por qué este libro?
2. ¿A quién se dirige este libro?
3. Estructura del libro

Introducción

1. Situación actual del desarrollo web
2. Angular
   1. 1. Organización por componentes
   2. 2. TypeScript
   3. 3. Las especificaciones ES6
   4. 4. DOM virtual
   5. 5. Renderizado posible en el lado del servidor
3. AngularJS vs Angular

Mi primera aplicación

1. Introducción
2. El setup
   1. 1. Instalación de npm
   2. 2. Instalación de Angular CLI e inicializacióndel proyecto
3. Mi primer componente
4. Mi primer módulo
5. Ejecución de la aplicación

Fundamentos de Angular

1. Introducción
2. Los componentes
3. Los templates
   1. 1. Binding
   2. 2. Eventos JavaScript
   3. 3. Listas
   4. 4. Mostrar/ocultar un elemento
   5. 5. Enlaces
   6. 6. Estilos
   7. 7. Directivas
4. Los decoradores
5. Los pipes
   1. 1. Utilizar un pipe
   2. 2. Los pipes del framework
   3. 3. Crear un pipe
      1. a. Los pipes de transformación
      2. b. Los pipes filtros
   4. 4. Los pipes puros e impuros
6. Los módulos
7. Observable y promesa
8. Preparar la aplicación para un entorno de producción

TypeScript

1. JavaScript
2. TypeScript
   1. 1. Sintaxis
      1. a. Variables
      2. b. Funciones
      3. c. Clases
      4. d. Arrow Function
      5. e. Unión de tipos
      6. f. Interfaz
      7. g. Genérico
      8. h. Los decoradores
   2. 2. Typings
   3. 3. Compilación
   4. 4. EcmaScript 6 y 7 a partir de ahora
   5. 5. Angular y TypeScript

Angular CLI

1. Introducción
2. ¿Qué es Angular CLI?
   1. 1. La definición
   2. 2. Los comandos principales
      1. a. Crear un proyecto nuevo Angular CLI: ng new
      2. b. Compilar la aplicación: ng build
      3. c. Ejecutar la aplicación con ng serve
      4. d. Ejecutar pruebas con Angular CLI
   3. 3. Los comandos de scaffolding
   4. 4. La generación de un componente
3. Configurar un proyecto Angular CLI
   1. 1. Esquema del archivo de configuración de AngularCLI
   2. 2. Gestionar los assets durante la compilación
   3. 3. Integrar una librería externa
   4. 4. Integrar un pre-procesador CSS
   5. 5. Añadir entidades de manera global
      1. a. Añadir un script globalmente
      2. b. Añadir una hoja de estilo globalmente
   6. 6. Eliminar la configuración Webpack
4. Compilación Ahead-Of-Time (AOT)

Los componentes

1. Introducción
2. ¿Qué es un componente?
   1. 1. Una primera definición
   2. 2. Crear un primer componente
      1. a. Sintaxis inline
      2. b. Una sintaxis real, descompuesta en varios archivos
      3. c. Utilizar un componente en su aplicación
   3. 3. Mostrar las propiedades de un componente
3. Los inputs y outputs
   1. 1. Los inputs de un componente
      1. a. Declarar una variable como Input
      2. b. Un ejemplo concreto con una lista
      3. c. Dar un nombre personalizado a su input
   2. 2. Los outputs de un componente
   3. 3. Dar un nombre personalizado a su output
4. Interacción entre componentes
   1. 1. Pasar un dato del padre al hijo con ayudar de un input
   2. 2. Interceptar un cambio de valor con ayuda de un setter
   3. 3. Notificar al padre con ayuda de un EventEmitter enoutput
   4. 4. Observar los cambios de input con ngOnChanges
   5. 5. Utilizar una variable local
5. Los decoradores @ViewChild y @ViewChildren
   1. 1. Recuperar una referencia con @ViewChild
   2. 2. Recuperar varias referencias con @ViewChildren
6. Los componentes Angular y la View Encapsulation
   1. 1. El Shadow DOM
   2. 2. Especificar una View Encapsulation
   3. 3. Tipos de View Encapsulation
      1. a. View Encapsulation emulada
      2. b. La View Encapsulation nativa
      3. c. Ninguna View Encapsulation

Los servicios

1. Introducción
2. ¿Qué es un servicio?
3. Declarar su servicio
4. Utilizar su servicio
5. Hacer su servicio asíncrono
   1. 1. Las promesas
   2. 2. Los observables
   3. 3. ¿Que elegir?
6. Notificar cuando los datos cambian

La inyección de dependencias

1. Principio básico
2. Inyección de dependencias en Angular
   1. 1. Registro global
   2. 2. Registro en un componente
   3. 3. Inyectar una dependencia
3. Provider
   1. 1. UseClass
   2. 2. UseExisting
   3. 3. UseFactory
   4. 4. UseValue
   5. 5. OpaqueToken
   6. 6. Dependencia opcional
   7. 7. Inyección limitada
   8. 8. Restricción del registro de una dependencia

La petición HTTP

1. Introducción
2. Obtener y enviar datos
3. Transformar datos
4. Comunicar de manera segura
5. Simular la consulta HTTP

Las interacciones de usuario

1. ¿Qué es el event binding?
2. Suscribirse a un evento
3. Recuperar una entrada de usuario
   1. 1. ¿Cómo manipular el objeto $event?
   2. 2. Utilizar un tipado fuerte para $event
   3. 3. Una alternativa con template reference variable
   4. 4. Utilizar un template reference variable con un evento
   5. 5. Filtrar las entradas de usuario

Los formularios

1. Los formularios basados en un template
2. Crear un componente de formulario
   1. 1. El componente
   2. 2. La vista y el data binding
      1. a. La sintaxis ngModel
      2. b. ngModel en detalle
      3. c. La utilización de ngModel en un caso concreto
   3. 3. Integrar el formulario en la aplicación
3. Los estados y la validez de un campo
   1. 1. Los estados de un input
   2. 2. Aplicar estilos según la validez
4. Enviar el formulario
5. Los formularios y los FormControls
   1. 1. Los controles y los grupos de controles
   2. 2. Los validadores integrados
   3. 3. Crear un validador personalizado
   4. 4. Los validadores asíncronos

El enrutamiento

1. Introducción
2. Definir las rutas de una aplicación
3. El renderizado de componentes
4. Navegar en su aplicación
5. Recuperación de los datos de enrutamiento
6. Outlet con nombre
   1. 1. Definir outlets con nombre
   2. 2. Navegar con outlets con nombre
7. Resolver

Las directivas

1. Introducción
2. ¿Qué es una directiva?
   1. 1. Introducción
   2. 2. Directivas comunes
      1. a. ngIf
      2. b. ngFor
      3. c. ngStyle
      4. d. ngClass
3. Las directivas de atributo
   1. 1. Crear una directiva de atributo
   2. 2. Interactuar con los eventos del DOM
   3. 3. Pasar valores a las directivas de atributo
4. Las directivas estructurales
   1. 1. La etiqueta <template> y el asterisco</template>
   2. 2. Crear una directiva estructural

Probar su aplicacion

1. Introducción
2. Las pruebas unitarias
   1. 1. Introducción a las pruebas con Jasmine
   2. 2. Ejecutar código antes o despuéscada prueba
   3. 3. Los matchers disponibles
      1. a. ¿Cómo utilizar un matcher?
      2. b. Ejemplos de matchers
      3. c. Negación de un matcher
   4. 4. Crear un matcher personalizado
      1. a. Crear una librería de matchers personalizados
      2. b. Utilizar un matcher personalizado
   5. 5. Los componentes
      1. a. El componente a probar
      2. b. El TestBed
      3. c. Comprobar que el componente está bien instanciado
      4. d. Controlar las propiedades del componente
      5. e. Asegurarse de que el renderizado del componente seacoherente
   6. 6. Los servicios
      1. a. El servicio a probar
      2. b. Probar el servicio
      3. c. Asegurarse de que el servicio se ha inyectado correctamente
   7. 7. Las directivas
      1. a. La directiva a probar
      2. b. Probar la directiva
   8. 8. Inyectar un falso servicio
3. Las pruebas e2e
   1. 1. Ejecutar las pruebas e2e
   2. 2. Escribir una prueba e2e
      1. a. Interactuar con el navegador
      2. b. Recuperar un elemento del DOM e interactuar con él
      3. c. Interactuar con los elementos DOM
      4. d. Probar el componente
   3. 3. Escribir una prueba e2e mejorada

La cross-platform con Angular

1. Apache Cordova
   1. 1. Crear un proyecto Apache Cordova
   2. 2. Angular en Apache Cordova
   3. 3. Utilizar un plug-in Apache Cordova
2. Ionic 2
   1. 1. Crear un proyecto Ionic
   2. 2. Utilizar los componentes Ionic
   3. 3. Utilizar Ionic DevApp
   4. 4. Utilizar un plug-in con Ionic

Para llegar mas lejos

1. Introducción
2. Renderizado en el lado del servidor
   1. 1. Principio de la implementación
   2. 2. Añadir el renderizado en el lado del servidor
3. La detección de cambios
   1. 1. ¿Por qué la detección decambios?
   2. 2. Las zonas, o ¿cómo notificar a Angular?
      1. a. El comportamiento de la detección de cambios
      2. b. Inmutabilidad y estrategia de detección decambios OnPush
   3. 3. Todavía más control sobre la detecciónde cambios
4. El ciclo de vida de un componente
   1. 1. Presentación de los lifecycle hooks
      1. a. Los diferentes hooks
      2. b. Utilizar un lifecycle hook
   2. 2. El ciclo de vida de un componente
      1. a. El constructor
      2. b. ngOnInit
      3. c. ngOnChanges
      4. d. ngDoCheck
      5. e. ngAfterContentInit
      6. f. ngAfterContentChecked
      7. g. ngAfterViewInit
      8. h. ngAfterViewChecked
      9. i. ngOnDestroy