Pro Angular 6 - 2018 - Third Edition (001-100) .En - Es

Pro
angular 6
-
Tercera edicion
-
Adam Freeman
Pro angular 6
Tercera edicion
Adam Freeman
Pro angular 6
Adam Freeman Londres,
Reino Unido
ISBN-13 (PBK): 978-1-4842-3648-2 ISBN-13 (electrónico): 978-1-4842-3649-9

https://doi.org/10.1007/978-1-4842-3649-9
Biblioteca del Congreso de control el número: 2018960245 Copyright
© 2018 por Adam Freeman
Esta obra está sujeta a derechos de autor. Todos los derechos están reservados por el editor, si la totalidad o parte del material se refiere, en concreto los
derechos de traducción, reimpresión, la reutilización de las ilustraciones, la recitación, la radiodifusión, la reproducción en microfilm o en cualquier otra forma
física, y transmisión o almacenamiento de información y la recuperación, la adaptación electrónico, software informático, o por metodología similar o no
conocido actualmente o desarrollado en el futuro.
nombres de marcas registradas, logotipos y las imágenes pueden aparecer en este libro. En lugar de utilizar un símbolo de marca con cada ocurrencia de un
nombre, logotipo o imagen de marca registrada que utilizamos los nombres, logotipos e imágenes solamente de forma editorial y para el beneficio del propietario
de la marca, sin intención de infracción de la marca. La utilización de esta publicación de nombres comerciales, marcas registradas, marcas de servicio y
términos similares, aunque no se identifican como tal, no debe ser tomado como una expresión de opinión en cuanto a si son o no están sujetos a derechos de
propiedad.
Mientras que el asesoramiento y la información en este libro se cree que son verdadera y exacta a la fecha de publicación, ni los autores ni los editores ni
el editor puede aceptar ninguna responsabilidad legal por cualquier error u omisión que se pueden hacer. El editor no ofrece ninguna garantía, expresa o
implícita, con respecto al material contenido en el presente documento.
Director General de Apress Media LLC: Welmoed Spahr Adquisiciones
Editor: Editor de Desarrollo Murray Joan: Laura Editor de Coordinación
Berendson: Mark Powers cubierta diseñada imagen eStudioCalamar
cubierta diseñada por Freepik (por www.freepik.com )
Distribuido a la industria del libro en todo el mundo por Springer Science + Business Media Nueva York, 233 Spring Street, 6th Floor, New
York, NY 10013. Teléfono 1-800-Springer, fax (201) 348 a 4.505, e-mail
orders-ny@springer-sbm.com , o visitar www.springeronline.com . Apress Media, LLC es una LLC de California y el único miembro (propietario) es Springer
Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc es una Delaware sociedad. Para obtener información sobre traducciones, envíe
un correo electrónico editorial@apress.com , para la reimpresión, de bolsillo, o los derechos de audio, por favor correo electrónico bookpermissions@springernature.com
Apress títulos se pueden comprar en grandes cantidades para uso académico, corporativo o de promoción. versiones de libros electrónicos y licencias también están
disponibles para la mayoría de los títulos. Para obtener más información, hacer referencia a nuestra impresión de libros electrónicos y la página Web de ventas de granel www.apress.com/bulk-sal
Cualquier código fuente u otro material complementario al que hace referencia el autor de este libro está disponible para los lectores en GitHub a través de la página
del producto del libro, que se encuentra en www.apress.com/9781484236482 . Para obtener información más detallada, por favor visite http://www.apress.com/source-code
.
Impreso en papel libre de ácido

Dedicado a mi bella esposa, Jacqui Griffyth. (Y también a cacahuete.)
Tabla de contenido
Sobre el autor xxiii Sobre el revisor técnico xxv
■ Parte I: Introducción angular 1

■ Capítulo 1: Preparativos 3
¿Qué necesitas saber? 3 ¿Cuál es la estructura de este libro ? 4
Parte 1: Introducción a Angular 4 Parte 2: angular en detalle 4 Parte 3: Características avanzadas angular 4
¿Hay muchos ejemplos? 4 ¿Dónde puede obtener el código de ejemplo ? 6 ¿Cómo se
configura el entorno de desarrollo? 6 contacto con el autor 6 Resumen 6
■ Capítulo 2: Su Primera angular Aplicación 7
Preparación del entorno de desarrollo 7

Instalación nodejs 7 Instalación del paquete angular-cli 8 Instalación de Git 8 Instalación de un editor 9
Instalación de un navegador 9
v
■ Tabla de contenido
Creación y Preparación del Proyecto 10

Crear el proyecto 10 Adición del paquete Bootstrap CSS 10 A partir de las herramientas de desarrollo 11
Edición del archivo HTML 12
Adición de funciones angulares para el Proyecto 15

Preparación del archivo HTML 15 Creación de un Modelo de datos 16 Preparación de la Plantilla 18 la
preparación del componente 18 Poner la solicitud junto 20
Adición de funciones a la Ejemplo de Aplicación 22

Adición de la tabla de tareas pendientes 23 Creación de un bidireccional de datos Encuadernación 26 Adición
de tareas pendientes 28
resumen 30
■ Capítulo 3: Poner en contexto angular 31
Sobresale la comprensión de dónde angular 32

Comprensión de ida y vuelta y de una sola página Aplicaciones 32 Comparando angular de jQuery 33
Comparando angular para reaccionar y Vuejs 34 Comprensión del patrón MVC 34
La comprensión de los modelos 36 Controladores entendimiento / componentes 38 Vistas Comprensión /
Plantillas 38
Descripción de los servicios REST 39 Común Diseño trampas 41
Poner la lógica en el lugar equivocado 41 que adopta el formato de datos del almacén de datos 41 El
conocimiento sólo lo suficiente para causar problemas 42
resumen 42
vi
■ Capítulo 4: Una cartilla HTML y CSS 43
Preparación del Ejemplo de proyecto 43 Comprensión HTML 45
La comprensión de los elementos Void 46 Atributos Comprensión 46 La aplicación de atributos sin valores 46
Citando Valores literales en Atributos 47 Comprender el contenido del elemento 47 la comprensión de la
estructura del documento 47
Bootstrap comprensión 49
La aplicación de clases básicas Bootstrap 50 Uso de Bootstrap para mesas de estilo 53 Uso de Bootstrap
para crear formularios 54 Uso Bootstrap para crear cuadrículas 55
resumen 61
■ Capítulo 5: JavaScript y mecanografiado: Parte 1 63
Preparación del Ejemplo de proyecto 64

Comprender el flujo de trabajo básico 66
Uso de sentencias 66 Definición y Uso de funciones 67
Definición de funciones con parámetros 69 Definición de funciones que devuelven resultados 70 Uso de
funciones como argumentos a otras funciones 71
Uso de variables y tipos 72

Usando Cierre Variable 73 Uso de los tipos primitivos 74
Uso de los operadores de JavaScript 76

Uso de sentencias condicionales 77 el operador de igualdad frente a la identidad del operador 78 Tipos
explícitamente Converting 79
vii
Trabajar con matrices 81

El uso de un literal de matriz 81 lectura y modificar el contenido de una matriz 81 Enumeración de los
contenido de una matriz 82 Uso del Spread 83 Uso de los métodos incorporada array 83
resumen 85
■ Capítulo 6: JavaScript y mecanografiado: Parte 2 87
Preparación del Ejemplo de proyecto 87 trabajo con objetos 88
El uso de objetos literales 89 Uso de funciones como Métodos 89 Definición de las clases 90
Trabajando con Módulos de JavaScript 93

Creación y uso de módulos 94
Características mecanografiado útiles 97

Utilizando el tipo de Anotaciones 97 Uso de tuplas 102 Uso de tipos de indexables 103 Uso de Modificadores
de acceso 103
resumen 105
■ Capítulo 7: SportsStore: una aplicación real 107
Preparación del Proyecto 107

Instalación de los paquetes adicionales de la NGP 108 Preparación de el servicio web REST 109 Preparación
del archivo HTML 111 Creación de la estructura de carpetas 112 Ejecutar el Ejemplo de Aplicación 112 Inicio
del servicio web REST 113
viii
Preparación de las características del proyecto angular 113

La actualización del componente de raíz 113 Actualización del Módulo de raíz 114 Inspección del archivo de
arranque 114
A partir del modelo de datos 115

La creación de las clases del modelo 115 Crear el origen de datos ficticios 116 Creación del modelo de
repositorio 117 Crear el módulo de funciones 118
Inicio de la tienda 119

Crear el almacén de componentes y Plantilla 119 Crear el módulo de funciones tienda 120 Actualizando el
componente de raíz y la raíz del módulo 121
Añadiendo tienda cuenta con los detalles del producto 122

Viendo los detalles del producto 122 Adición de selección de categoría La adición de 124 Producto paginación
126 Creación de una directiva personalizada 130
resumen 133
■ Capítulo 8: Spor tsStore: Órdenes y Pedido 135
Preparación del Ejemplo de Aplicación 135 Creación de la Cesta 135
Creación de la cesta Modelo 135 Creación de los componentes del carro Resumen 137 la integración del
carro en la tienda 139
La adición de enrutamiento de URL 142

Crear el carro Detallada y Pedido Componentes 143 Creación y aplicación de la configuración de
enrutamiento 144 Navegación a través de la Aplicación 145 Protegiendo las Rutas 148
ix
Completando la característica carro Detallada 150 Proceso de pedidos 153
Extender el modelo 153 Recopilación de los detalles del pedido 156
Uso del servicio web REST 160

La aplicación de la Fuente de Datos 161
resumen 163
■ Capítulo 9: SportsStore: Administración 165
Preparación del Ejemplo de Aplicación 165

Crear el módulo 165 Configuración del sistema de enrutamiento de URL 168 Navegando a la URL de
administración 169
autenticación de Ejecución 171

Comprender el sistema de autenticación 171 la extensión de la Fuente de datos 172 Creación del Servicio de
autenticación 173 Habilitación de la autenticación 174
La extensión de la Fuente y repositorios de datos 177 Creación de la estructura de funciones
Administración 181
Crear los componentes del marcador de posición 181 Preparación del contenido común y el módulo de
funciones 182 Aplicación de la característica de producto 185 la implementación de la función de órdenes 189
resumen 191
■ Capítulo 10: SportsStore: Características y progresivos de despliegue 193
Preparación del Ejemplo de Aplicación 193 Adición de funciones progresivas 193
Instalación del paquete de PWA 193 Almacenamiento en caché de los datos de URLs 194 en respuesta a los
cambios de conectividad 195
X
Preparación de la Solicitud de despliegue 197

Creación del archivo de datos 197 Creación del servidor 198 Cambio de la URL del servicio web en el
Repositorio de Clase 200
Creación y prueba de la Aplicación 200

Prueba de las características progresivo 202
Contenerización la Aplicación SportsStore 203

Instalación de Docker 203 Preparación de la Aplicación 203 Creación de la ventana acoplable de
contenedores 204 Ejecución de la aplicación 205
resumen 207
■ Parte II: angular en detalle 209

■ Capítulo 11: Creación de un Proyecto Angular 211
Crear un nuevo proyecto angular 211 la comprensión de la estructura del proyecto 212
Descripción de la carpeta de código fuente 214 Descripción de la carpeta Paquetes 216
El uso de las herramientas de desarrollo 220

Descripción del servidor HTTP Desarrollo 221 Comprensión de reemplazo caliente Modelo 222 Uso de la
desfibradora 223
La comprensión de cómo una aplicación funciona angular 226

La comprensión del documento HTML 226 Entender la aplicación Bootstrap 227 la comprensión del Módulo
angular raíz 228 la comprensión de la Com angular Ponent 229 Comprensión de visualización de contenido
229
xi
A partir de Desarrollo en un proyecto angular 230

Añadiendo el marco Bootstrap CSS 231 Creación del modelo de datos 231 Creación de un componente y la
plantilla 234 Configuración del módulo angular Raíz 236
resumen 236
■ Capítulo 12: Uso de Datos Vinculaciones 237
Preparación del Ejemplo de proyecto 238 Comprensión de un solo sentido enlaces de datos
239
Comprender el objetivo vinculante 241 la comprensión de la expresión 242 la comprensión de los soportes
243 La comprensión del elemento host 244
Utilizar la propiedad estándar y enlaces de atributos 244

Utilizar la propiedad estándar Encuadernación 244 Uso de la interpolación de cadenas Encuadernación 246
utilizando el atributo de Encuadernación 247
Configuración de las clases y estilos 249

El uso de los enlaces de Clase 249 Uso de los enlaces Style 254
La actualización de los datos en la aplicación 258 Resumen 260
■ Capítulo 13: Uso de las directivas incorporadas 261
Preparación del Ejemplo de proyecto 262 Uso de las directivas incorporadas 264
El uso de la Directiva ngIf 264 Uso de la Directiva ngSwitch 267 Uso de la Directiva ngFor 270 Uso de la
Directiva ngTemplateOutlet 280
xii
La comprensión de un solo sentido de datos Restricciones de encuadernación 283
El uso de las expresiones idempotente 283 la comprensión del contexto de la expresión 286
resumen 289
■ Capítulo 14: Uso de Eventos y Formularios 291

Importación del Módulo Formas 292 Preparación del componente y la plantilla 293
Utilizando el proceso de unión 294

Descripción de las propiedades definidas dinámicamente 296 Uso de datos de eventos 298 Utilización de
variables de plantilla de referencia 300
El uso de dos vías de datos Enlaces 302

El uso de la Directiva ngModel 304
Trabajo con formularios 305

Adición de una forma a la Ejemplo de Aplicación 305 Adición de formulario de datos validación 308 Validación
de todo el formulario 318
Uso de formularios basado en modelos 325

Activación de las formas basado en modelos de funciones 325 Definición de las clases modelo de formulario
326 Usando el modelo de validación 329 La generación de los elementos de la Modelo 333
Creación de formularios personalizados validadores 334

La aplicación de un validador propio 335
resumen 337
■ Capítulo 15: Creación de directivas de atributos 339
Preparación del Ejemplo de proyecto 340 Creación de una directiva de atributo simple 343
La aplicación de una directiva personalizada 344
xiii
Acceso a los datos de aplicación en una Directiva 345

La lectura de atributos de elementos de host 345 Creación de propiedades de entrada enlazado a datos 348
en respuesta a la entrada de cambios de propiedad 3 51
La creación de eventos personalizados 353

La unión a un evento personalizado 355
La creación de enlaces Host Elemento 356 Creación de una unión de dos vías sobre el factor
de host 358 Exportación de una Directiva para su uso en una variable de plantilla 361
Resumen 364
■ Capítulo 16: Creación de directivas estructural 365
Preparación del Ejemplo de proyecto 366 Creación de una Directiva estructural simple 367
La aplicación de la Directiva clase estructural 368 Habilitación de la Directiva estructural 371 Uso de la
Directiva de sintaxis estructural concisa 373
La creación de directivas iteración estructurales 374

Proporcionar datos de contexto adicionales 377 Utilización de la Estructura concisa sintaxis 379 encargados
de propiedad de nivel de datos Cambios 380 negociación con la colección de datos de nivel Cambios 381
Consulta del anfitrión elemento de contenido 392

Consulta de Múltiples contenido Niños 395 Recepción de notificaciones de cambio de la consulta 397
resumen 399
■ Capítulo 17: Componentes Comprensión 401
Preparación del Ejemplo de proyecto 402 Estructuración una aplicación con componentes 403
Creación de nuevos componentes 404
xiv
Definición de plantillas 408 Finalización de la reestructuración de componentes 419
Uso de estilos de componentes 420

Definiendo Estilos componente externo 422 Uso de las funciones de estilo avanzadas 423
Consulta de contenido Plantilla 430 Resumen 433
■ Capítulo 18: Uso y creación de Tubos 435
Preparación del Ejemplo de proyecto 436 Tubos Comprensión 439 Creación de una pipa
personalizada 441
Registro de una pipa personalizada 442 la aplicación de una pipa personalizada 443 Tubos Combinando 444
Creación de Tubos impuras 445
El uso de los tubos empotrados 449

números de formato 450 formato a los valores de moneda 453 Formateo de porcentajes 456 Fechas de
formato 458 Cambiar a mayúsculas o cuerdas 461 de números de serie de datos como JSON
resumen 465
■ Capítulo 19: Uso de servicios 467
Preparación del Ejemplo de proyecto 468 Entendiendo el problema de distribución de objetos
469
Lo que demuestra el problema 469 Distribución de objetos como los servicios que utilizan la inyección de
dependencias 474 dependencias declarando en otros bloques de construcción 480
xv
Entendiendo el problema de aislamiento de prueba 487

Aislamiento de componentes mediante la inyección de dependencias y Servicios 488
Completando la adopción de servicios 491

La actualización del componente raíz y la plantilla 491 Actualización de los componentes de niño 492
resumen 494
■ Capítulo 20: Utilización de Proveedores de Servicios 495
Preparación del Ejemplo de proyecto 496 Utilización de Proveedores de Servicios 498
Mediante el proveedor de Clase 500 utilizando el proveedor de Valor 508 utilizando el proveedor de fábrica
510 utilizando el proveedor de servicio existente 513
El uso de proveedores locales 514

La comprensión de las limitaciones de Servicio Individual Objetos 514 Creación de proveedores locales en un
Componente 515 la comprensión de las alternativas de proveedores 517 Control de la resolución de
dependencias 522
resumen 524
■ Capítulo 21: Uso y creación de módulos 525
Preparación del Ejemplo de proyecto 526 la comprensión del módulo de raíz 528
La comprensión de las importaciones de Propiedad 530 la comprensión de las declaraciones de bienes 530
Comprensión los proveedores de la propiedad 531 la comprensión de la propiedad de arranque 531
La creación de módulos de características 533

Crear un módulo Modelo 535 Crear un módulo de funciones de utilidad 540 Crear un módulo de funciones con
componentes 545
resumen 550
xvi
■ Parte III: Características avanzadas angular 551

■ Capítulo 22: Crear el proyecto de ejemplo 553
A partir del Ejemplo de proyecto 553

Agregar y configurar el paquete Bootstrap CSS 553 Creación de la estructura del proyecto 554
Crear el módulo Modelo 554

Crear el tipo de datos del producto 554 Crear el origen de datos y Repositorio 554 Completar el Módulo
Modelo 556
Crear el módulo Core 557

Creación del Servicio estado compartido 557 Crear el componente Tabla 557 Crear el componente Formulario
559 Completar el Core Module 561
Crear el módulo de mensajes 562

Creación del modelo y el servicio de mensajes 562 Crear el componente y la plantilla 563 de terminar el
mensaje módulo 563
Completar el proyecto 564 Resumen 566
■ Capítulo 23: El uso de extensiones reactivas 567
Preparación del Ejemplo de proyecto 568 Entendiendo el problema 569 Resolver el Problema
con extensiones reactivas 571
La comprensión observables 572 observadores Comprensión 574 Los sujetos Comprensión 575
El uso de la pipa asíncrono 577

Utilizando el asíncrono de tuberías con tubos de encargo 578
xvii
Ampliación de la característica de aplicación Módulos 580 el ir más allá de lo básico 582
filtrado de Eventos 583 La transformación de Eventos 584 recibieron sólo eventos distintos 587 Tomar y
Saltarse Eventos 589
resumen 591
■ Capítulo 24: Las solicitudes HTTP asincrónicos Hacer 593

Configuración del módulo de funciones Modelo 595 Creación del archivo de datos 595 Actualización del
Componente Forma 596 Ejecución del Proyecto Ejemplo 596
Descripción de los servicios web RESTful 597 Sustitución de la Fuente de datos estáticos 598
Creación del Servicio nuevo origen de datos 598 Configuración de la fuente de datos 600 Utilización de la
fuente de datos REST 601 Almacenamiento y eliminación de datos 603
La consolidación de solicitudes HTTP 606 que realizan solicitudes de origen cruzado 607
El uso de solicitudes JSONP 608
Configuración Solicitar encabezados 610 Tratamiento de errores 613
La generación de mensajes de usuario-Ready 614 Manejo de los errores 615
resumen 617
xviii
■ Capítulo 25: Enrutamiento y navegación: Parte 1 619
Preparación del Ejemplo de proyecto 620 Primeros pasos con enrutamiento 622
Creación de una configuración de enrutamiento 623 Crear el componente de enrutamiento 625 Actualización
del Módulo de raíz 625 Finalización de la configuración 626 adición de enlaces de navegación 627 la
comprensión del efecto de enrutamiento 630
Finalización de la Implementación de enrutamiento 632

Manejo de los cambios de ruta en Componentes 632 Parámetros de ruta Utilización 635 Navegación en el
Código 641 Recepción de eventos de navegación 643 Extracción de los enlaces y eventos apoyando Código
645
resumen 648

Adición de componentes para el Proyecto 653
El uso de comodines y redirecciones 656

El uso de comodines en las rutas 656 Uso de redirecciones de rutas 659
La navegación dentro de un componente 661

En respuesta a los cambios de itinerario en curso 662 Styling Enlaces para Active rutas 664 fijación del botón
Todos 668
La creación de rutas secundarias 669

Creación del Niño Ruta Outlet 670 Acceso a los parámetros de rutas secundarias 673
resumen 676
xix
Preparación del Ejemplo de proyecto 677 Rutas La guardia 679
El retraso de navegación con un dispositivo de resolución 680 Prevención de navegación con guardias 687
Característica de carga dinámica de módulos 700

Crear un módulo Simple Feature 701 Carga del módulo dinámicamente 702 Módulos de protección dinámica
de 705
Orientación de enchufes con nombre 708

Creación de elementos adicional Outlet Navegando 709 cuando se utilizan múltiples salidas 711
resumen 713
■ Capítulo 28: Uso de Animación 715

La desactivación del retardo de HTTP 716 la simplificación de la plantilla de la tabla de enrutamiento y
configuración 717
Introducción a la animación angular 719

Habilitación del módulo de animación 720 Creación de la animación 720 la aplicación de la Animación 724
Prueba del efecto de animación 727
La comprensión de los Estados Animación incorporado 729 comprender las transiciones del
elemento 730
La creación de transiciones para los Estados incorporados 730 Transición Control animaciones 732
La comprensión de Animación Estilo Grupos 737

Definición de estilos comunes en grupos reutilizables 738 El uso de elementos Transformaciones 739
Aplicación de estilos CSS Marco 741
resumen 743
xx
■ Capítulo 29: Prueba Unidad angular 745
Preparación del Ejemplo de proyecto 746 Ejecución de una prueba simple unidad 748 Trabajar
con Jasmine 749 Prueba de un componente angular 751
Trabajando con la Clase TestBed 751 de prueba de datos enlaces 755 Prueba de un componente con una
plantilla externa 758 pruebas de componentes Eventos 760 propiedades de salida de prueba 762 Propiedades
de entrada de prueba 764
Prueba de una Directiva angular 768 Resumen 770
índice 771
xxi
Sobre el Autor
Adam Freeman es un profesional experimentado que ha ocupado puestos de responsabilidad en una amplia
gama de empresas, sirviendo más recientemente como director de tecnología y director de operaciones de un
banco global de TI. Ahora, ya retirado, pasa su tiempo escribiendo y carreras de larga distancia.
xxiii
Sobre el revisor técnico
Fabio Claudio Ferracchiati es un consultor senior y analista / desarrollador utilizando tecnologías de Microsoft. Trabaja para BluArancio ( www.bluarancio
). Él es un desarrollador Microsoft Certified Solution for .NET, un desarrollador de aplicaciones de Microsoft Certified for .NET, un Microsoft
Certified Professional, y un prolífico autor y revisor técnico. Durante los últimos diez años, ha artículos para revistas italianas e
internacionales escrito y coautor de más de diez libros sobre una variedad de temas informáticos.
xxv
PARTE I
Introducción a Angular
CAPÍTULO 1
Preparándose
grifos angulares en algunos de los mejores aspectos del desarrollo del lado del servidor y los utiliza para mejorar HTML en el navegador, la creación de
una fundación que hace que la creación de aplicaciones ricas simple y más fácil. aplicaciones angulares están construidas alrededor de un patrón de
diseño llamado Modelo-Vista-Controlador ( MVC), que pone énfasis en la creación de aplicaciones que son
• extensible: Es fácil de averiguar cómo funciona incluso una aplicación compleja angular vez que entienda los conceptos
básicos, y eso significa que se puede mejorar fácilmente aplicaciones para crear características nuevas y útiles para sus
usuarios.
• mantenible: aplicaciones angulares son fáciles de depurar y corregir, lo que significa que el mantenimiento a largo plazo se
simplifica.
• comprobable: Angular tiene un buen soporte para la unidad y pruebas de extremo a extremo, lo que significa que se puede
encontrar y corregir defectos antes que los usuarios hacen.
• Estandarizado: Angular basa en las capacidades innatas del navegador web sin ponerse en tu camino, lo que
permite crear aplicaciones web compatibles con los estándares que se aprovechan de las últimas características
(tales como HTML5 API) y herramientas y marcos populares.
Angular es un código abierto biblioteca JavaScript que está patrocinado y mantenido por Google. Se ha utilizado en algunas de las web más
grande y más compleja apps de alrededor. En este libro, os muestro todo lo que necesita saber para obtener los beneficios de angular en sus
propios proyectos.
¿Qué necesitas saber?

Antes de leer este libro, usted debe estar familiarizado con los conceptos básicos de desarrollo web, tener una comprensión de cómo HTML y CSS de
trabajo, y tienen un conocimiento práctico de JavaScript. Si usted es un poco confusa en algunos de estos detalles, proporciono refrescantes para el HTML,
CSS y JavaScript que utilizo en este libro en los capítulos 4 , 5 y 6 . Usted no encontrará una referencia completa para los elementos HTML y propiedades
CSS, sin embargo, porque simplemente no es el espacio en un libro sobre angular para cubrir todo el HTML.
© 2018 Adam Freeman 3

A. Freeman, Pro angular 6, https://doi.org/10.1007/978-1-4842-3649-9_1
Capítulo 1 ■ Preparándose
¿Cuál es la estructura de este libro?

Este libro se divide en tres partes, cada una de las cuales cubre un conjunto de temas relacionados.
Parte 1: Introducción a Angular

Parte 1 de este libro proporciona la información que necesita para estar listo para el resto del libro. Incluye este capítulo y cebadores /
refrescos de tecnologías clave, incluyendo HTML, CSS y Letra de imprenta, que es un superconjunto de JavaScript utilizado en el desarrollo
angular. Yo también le mostrará cómo construir su primera aplicación angular y te llevará a través del proceso de creación de una aplicación
más realista, llamado SportsStore.
Parte 2: angular en detalle

Parte 2 de este libro te lleva a través de los módulos previstos por angular para la creación de aplicaciones, a través de cada uno de ellos a su
vez. Angular incluye una gran cantidad de funcionalidad incorporada, que describo en profundidad, y proporciona opciones de personalización
sin fin, todo lo cual demuestro.
Parte 3: Características avanzadas angular

Parte 3 de este libro explica cómo las características avanzadas se puede utilizar para crear aplicaciones más complejas y escalables.
Demuestro cómo hacer peticiones HTTP asíncronas en una aplicación angular, cómo utilizar el enrutamiento de URL para navegar por una
aplicación y cómo animar elementos HTML cuando el estado de la aplicación cambia.
¿Hay muchos ejemplos?

Existen cargas de ejemplos. La mejor manera de aprender angular es con el ejemplo, y he embalado como muchos de ellos lo que pueda en este
libro. Para maximizar el número de ejemplos de este libro, he adoptado una convención sencilla para evitar el listado del contenido de los archivos
una y otra vez. La primera vez que utilizo un archivo en un capítulo, voy a enumerar el contenido completo, igual que yo en el Listado 1-1 . Incluyo el
nombre del archivo en la cabecera de la lista y la carpeta en la que usted debe crearlo. Cuando hago cambios en el código, muestro los estados
alterados en negrita.
Listado 1-1. A Ejemplo Documento completo
importación {NgModule} de "@ angular / núcleo";

{} la importación BrowserModule de "@ / plataforma de navegador angular"; {} la
importación ProductComponent de "./component";
importación {FormsModule, ReactiveFormsModule} de "@ angular / formas";
{} la importación PaAttrDirective de "./attr.directive";
@NgModule ({
importaciones: [BrowserModule, FormsModule, ReactiveFormsModule],
declaraciones: [ProductComponent, PaAttrDirective],
bootstrap: [ProductComponent]})
AppModule clase de exportación {}
4
Esta lista es tomada del capítulo 15 . No se preocupe por lo que hace; acaba de ser conscientes de que se trata de una
lista completa, que muestra todo el contenido del archivo. Cuando hago una serie de cambios en el mismo archivo o cuando hago un pequeño cambio en un archivo
de gran tamaño, que te puede mostrar los elementos que cambian, para crear una listado parcial. Puede detectar un listado parcial, ya que comienza y termina en
puntos suspensivos (...), como se muestra en el Listado 1-2 .
Listado 1-2. Una lista parcial
...
<Table class = "mesa de ping-sm-bordeado mesa mesa de rayas">
<Tr> <th> </ th> <th> Nombre </ th> <th> Categoría </ th> <th> Precio </ th> </ tr> <tr * ngFor =
"dejar el artículo de getProducts () ; dejar que i = índice" pa-attr>
<Td> {{i + 1}} </ td> <td>
{{item.name}} </ td>
<Td pa-attr-pa-clase attr = "bg-advertencia"> {{item.category}} </ td> <td pa-pa-attr
attr-class = "bg-info"> {{item.price }} </ td>
</ Tr>
</ table>
...
Listado 1-2 es una lista más adelante en el capítulo 15 . Se puede ver que sólo el cuerpo elemento, y su contenido, se muestran y que han
puesto de relieve una serie de declaraciones. Así es como me llamo la atención a la parte de la lista que ha cambiado o enfatizar el papel de un
ejemplo que muestra la función o la técnica que estoy describiendo. En algunos casos, necesito realizar cambios en diferentes partes del mismo
archivo, en cuyo caso omito algunos elementos o declaraciones de la brevedad, como se muestra en el Listado 1-3 .
Listado 1-3. Declaraciones omitiendo por razones de brevedad
importación {ApplicationRef, Componente} de "@ angular / núcleo"; {} la importación

Modelo de "./repository.model"; {} la importación de productos de "./product.model";
{} la importación ProductFormGroup de "./form.model";
@Componente({
Selector: "aplicación",
templateUrl: "app / template.html"})
ProductComponent clase de exportación {

Modelo: Modelo = new Model ();
formulario: ProductFormGroup = new ProductFormGroup ();
// ... otros miembros omiten por razones de brevedad ...
showTable: boolean = true;

}
Este convenio permite a empacar en más ejemplos, pero sí significa que puede ser difícil de localizar una técnica específica. Con este fin,
todos los capítulos en los que me describen características angulares en las partes 2 y 3 comienzan con una tabla resumen que describe las
técnicas contenidas en el capítulo y los listados que muestran cómo se utilizan.
5
¿Dónde puede obtener el código de ejemplo?

Puede descargar los proyectos de ejemplo para todos los capítulos en este libro de https://github.com/Apress/ pro-angular-6 . La descarga
está disponible sin cargo e incluye todos los recursos de apoyo que son necesarios para volver a crear los ejemplos sin tener que escribir
en ellos. Usted no tiene que descargar el código, pero es la forma más fácil de experimentar con los ejemplos .
¿Cómo se puede configurar el entorno de desarrollo?

Capítulo 2 introduce a angular mediante la creación de una aplicación sencilla, y, como parte de ese proceso, te digo cómo crear un entorno de
desarrollo para trabajar con angular.
Contacto con el autor

Si tiene problemas para hacer los ejemplos en este capítulo funcionan o si encuentra un problema con el libro, entonces se puede escribir al correo a adam@adam-freeman.com
, y yo haré todo lo posible para ayudar.
Resumen
En este capítulo, he descrito el contenido y la estructura de este libro. La mejor manera de aprender el desarrollo angular es por ejemplo, por lo que en
el siguiente capítulo, que saltar a la derecha y le mostrará cómo configurar el entorno de desarrollo y lo utilizan para crear su primera aplicación angular.
6
CAPITULO 2
Su primera aplicación angular
La mejor manera de empezar a trabajar con Angular es a sumergirse y crear una aplicación web. En este capítulo, os muestro cómo configurar el
entorno de desarrollo y lo lleve a través del proceso de creación de una aplicación básica, comenzando con una estática maqueta de la
funcionalidad y aplicando características angulares para crear una aplicación web dinámica, aunque sea un simple uno. en los capítulos 7 - 10 , Os
muestro cómo crear una aplicación angular más complejo y realista, pero por ahora, un simple ejemplo bastará para demostrar los principales
componentes de una aplicación angular y establecer la escena para todos los capítulos de esta parte del libro.
No se preocupe si usted no sigue todo lo que sucede en este capítulo. Angular tiene una curva de aprendizaje, por lo que el propósito
de este capítulo es sólo para introducir el flujo básico del desarrollo angular y le dará una idea de cómo encajan las cosas. No todo tendrá
sentido en este momento, pero en el momento en que haya terminado de leer este libro, se entiende por cada paso que doy en este
capítulo y mucho más.
Preparación del entorno de desarrollo

Hay una cierta preparación necesaria para el desarrollo angular. En las secciones que siguen, explico cómo configurar y listo para crear su primer
proyecto. Existe un amplio apoyo para angular en herramientas de desarrollo populares, y se puede escoger sus favoritos.
Instalación de Node.js
Muchas de las herramientas utilizadas para el desarrollo angular se basan en Node.js-también conocido como Nodo-que fue creado en 2009 como un
tiempo de ejecución sencilla y eficiente para aplicaciones de servidor escrito en JavaScript. Node.js se basa en el motor de JavaScript utilizado en el
navegador Chrome y proporciona una API para ejecutar código JavaScript fuera del entorno del navegador.
Node.js ha disfrutado de un éxito como un servidor de aplicaciones, pero para este libro, es interesante, ya que ha proporcionado la base para una nueva
generación de desarrollo multiplataforma y construir herramientas. Algunas decisiones de diseño inteligente por parte del equipo de Node.js y el soporte
multi-plataforma proporcionada por el tiempo de ejecución de JavaScript Chrome han creado una oportunidad que ha sido aprovechada por los escritores de
herramientas entusiastas. En resumen, el Nodo. js ha convertido en esencial para el desarrollo de aplicaciones web.
Es importante que descargue la misma versión de Node.js que utilizo en este libro. Aunque Node.js es relativamente estable,
todavía hay cambios en la API de rotura de vez en cuando que pueden dejar los ejemplos que incluir en los capítulos de trabajar.
La versión que he utilizado es 8.11.3, que es la liberación Soporte a Largo Plazo actual en el momento de la escritura. Puede haber una versión
posterior disponible por el momento de leer esto, pero usted debe pegarse a la liberación 8.11.3 para los ejemplos de este libro. Un conjunto completo
de 8.11.3 lanzamientos, con instaladores para Windows y MacOS y paquetes binarios para otras plataformas, está disponible en https://nodejs.org/dist/v8.11.3
.

Capitulo 2 ■ Su primera aplicación angular
Al instalar Node.js, asegúrese de seleccionar la opción de agregar los ejecutables Node.js a la ruta. Cuando se complete la
instalación, ejecute el siguiente comando:
-v nodo
Si la instalación ha ido como debería, a continuación, verá el siguiente número de versión que se muestra:
v8.11.3
El instalador Node.js incluye el Nodo Package Manager (NPM), que se utiliza para gestionar los paquetes en un proyecto. Ejecute el
siguiente comando para asegurarse de que la NGP está funcionando:
NPM -v
Si todo está funcionando como debiera, a continuación, verá el siguiente número de versión:
5.6.0
Instalación del paquete angular-cli

los angular-cli el paquete se ha convertido en la forma estándar para crear y gestionar proyectos angular durante el desarrollo. En la
versión original de este libro, he demostrado cómo configurar un proyecto angular a partir de cero, que es un proceso largo y propenso
a errores que se simplifica angular-cli. Instalar angular-
cli, abrir una nueva línea de comandos y ejecute el siguiente comando:
NPM instalar --global @ angular / cli@6.0.8
Observe que hay dos guiones antes de la global argumento. Si está usando Linux o MacOS, puede que tenga que utilizar sudo, Me gusta
esto:
sudo NPM instalar --global @ angular / cli@6.0.8
Instalación de Git
Se requiere la herramienta de control de versiones Git para gestionar algunos de los paquetes necesarios para el desarrollo angular. Si está utilizando
Windows o MacOS, a continuación, descargar y ejecutar el instalador desde https://git-scm.com/ descargas . ( En MacOS, puede que tenga que cambiar la
configuración de seguridad para abrir el instalador, que no ha sido firmado por los desarrolladores.)
Git ya está instalado en la mayoría de las distribuciones de Linux. Si desea instalar la versión más reciente, a continuación, consulte las
instrucciones de instalación para su distribución a las https://git-scm.com/download/linux . A modo de ejemplo, para Ubuntu, que es la distribución de Linux
que utilizo, he usado el siguiente comando:
sudo apt-get install git
8
Una vez que haya finalizado la instalación, abra un nuevo símbolo del sistema y ejecute el siguiente comando para comprobar que
Git está instalado y disponible:
--version git
Este comando imprime la versión del paquete de Git que se ha instalado. En el momento de la escritura, la última versión de Git
para Windows y Linux es 2,17, y la última versión de Git para MacOS es 2.16.3.
La instalación de un editor
desarrollo angular se puede hacer con el editor de cualquier programador, de la cual hay un número infinito de elegir. Algunos editores han mejorado el
soporte para trabajar con angular, incluyendo destacando los términos clave y una buena integración de herramientas. Si aún no dispone de un editor
preferido para el desarrollo de aplicaciones web, a continuación, la tabla 2-1 describe algunas opciones populares para que usted considere. No me baso
en cualquier editor específico para este libro, y se debe utilizar lo que el editor que se sienta cómodo trabajando.
Tabla 2-1. Editores populares-angular Habilitado
Nombre Descripción
Texto sublime Sublime Text es un editor multiplataforma comercial que tiene paquetes para soportar la mayoría de los
lenguajes de programación, marcos y plataformas. Ver www.sublimetext. com para detalles.
Átomo Atom es un código abierto, editor gratuito, multiplataforma que tiene un énfasis particular en la personalización
y extensibilidad. Ver atom.io para detalles.
Soportes Corchetes es un editor gratuito de código abierto desarrollado por Adobe. Ver brackets.io para detalles.
WebStorm WebStorm es un editor multiplataforma de pago para que integra muchas herramientas para que usted no tiene que
utilizar la línea de comandos durante el desarrollo. Ver www.jetbrains. com / WebStorm para detalles.
Código Visual Studio Código Visual Studio es un código abierto, editor gratuito con plataformas de Microsoft, con énfasis en
la extensibilidad. Ver code.visualstudio.com para detalles.
Estudio visual Visual Studio es herramienta de desarrollo insignia de Microsoft. Hay ediciones libres y comerciales disponibles, y
viene con una amplia gama de herramientas adicionales que se integran en el ecosistema de Microsoft.
Al elegir un editor, una de las consideraciones más importantes es la capacidad de filtrar el contenido del proyecto de modo que usted pueda centrarse en un
subconjunto de los archivos. No puede haber una gran cantidad de archivos en un proyecto angular, y muchos tienen nombres similares, así que la posibilidad de encontrar
y editar el archivo correcto es esencial. Editores que esto sea posible de diferentes maneras, ya sea mediante la presentación de una lista de los archivos que están
abiertos para su edición o proporcionando la capacidad de excluir archivos con extensiones específicas.
La instalación de un navegador
La elección final es hacer que el navegador que va a utilizar para comprobar su trabajo durante el desarrollo. Todos los navegadores actual
generación tienen buen soporte para desarrolladores y funcionan bien con angular. He utilizado Google Chrome lo largo de este libro, y este es el
navegador le recomiendo que utilice también.
9
Creación y Preparación del Proyecto

Una vez que tenga Node.js, angular-cli, un editor y un navegador, que tienen suficiente cantidad de una base para iniciar el proceso de desarrollo.
Crear el proyecto
Para crear el proyecto, seleccionar una ubicación conveniente y utilizar un símbolo del sistema para ejecutar el siguiente comando para crear un nuevo
proyecto llamado que hacer:
ng nuevo TODO
los ng comando es proporcionada por el angular-cli paquete, y ng nueva pone en marcha un nuevo proyecto. El proceso de instalación crea una carpeta
llamada que hacer que contiene todos los archivos de configuración que son necesarios para iniciar el desarrollo angular, algunos archivos de marcador de
posición para iniciar el desarrollo, y los paquetes necesarios para el desarrollo de la NGP, correr y desplegar aplicaciones angular. (Hay un gran número de
paquetes de la NGP, lo que significa que la creación del proyecto puede tomar un tiempo.)
■ Propina Puede descargar el proyecto de ejemplo para este capítulo, y para todos los demás capítulos de este libro: de https://github.com/Apress/pro-angula
.
Añadiendo el paquete Bootstrap CSS

los ng nueva comando crea un proyecto con casi todo lo que se requiere para este capítulo. La excepción es el paquete de CSS
Bootstrap, que utilizo para estilizar el contenido HTML en este libro. Ejecute los siguientes comandos para navegar a la que hacer carpeta
creada por el ng nueva mando y añadir el paquete de Bootstrap para el proyecto:
cd TODO
NPM instalar bootstrap@4.1.1
Para configurar las herramientas de desarrollo angular para utilizar el archivo CSS Bootstrap, agregar la entrada de muestra en el listado 2-1 al estilos sección
de la angular.json archivo, que se añadió a la que hacer carpeta por el ng nueva
comando cuando se creó el proyecto.
Listado 2-1. Configuración de CSS en el archivo en la carpeta angular.json TODO
...{
"$ Esquema": "./node_modules/@angular/cli/lib/config/schema.json", "versión": 1,
"newProjectRoot": "proyecta", "proyecta":

{ "todo": { "raíz": "",
"SourceRoot": "src",
10
"ProjectType": "aplicación", "prefijo":

"aplicación", "esquemas": {} "arquitecto":
{ "construir": {
"Builder": "@ angular DevKit / build-angular: el navegador", "opciones": {
"OutputPath": "dist / todo", "índice": "src /

index.html", "principal": "src / main.ts", "polyfills":
"src / polyfills.ts", "TSconfig": "src /
tsconfig.app.json", "activos": [
"Src / favicon.ico", "src /

activos"],
"estilos": [ "src / styles.css",
"Node_modules / bootstrap / dist / css / bootstrap.min.css"

],
"guiones": [] },
...
Como explico en el capítulo 11 , la angular.json archivo se utiliza para configurar las herramientas del proyecto, y el estado se muestra en el
listado incorpora el archivo CSS Bootstrap en el proyecto para que se incluirá en el contenido enviado al navegador.
A partir de las herramientas de desarrollo
Todo está en su lugar, por lo que es el momento de probar las herramientas de desarrollo angular. Ejecute el siguiente comando desde el que hacer carpeta:
ng servir --port 3000 --open
Este comando inicia las herramientas de desarrollo angular, que pasan por un proceso de construcción inicial para preparar la solicitud de
la sesión de desarrollo. Este proceso toma un momento y generará una salida similar a la siguiente:
* * Angular servidor de desarrollo en vivo está escuchando en localhost: 3000, abra su navegador en http: // localhost: 3000
/ **
Hash: Tiempo ebb64e6046efff317389:

6767ms
trozo {principales} main.js, main.js.map (principales) 10,8 kB [inicial] [prestados] trozo {polyfills} polyfills.js, polyfills.js.map
(polyfills) 227 kB [inicial] [prestados] trozo { tiempo de ejecución} runtime.js, runtime.js.map (tiempo de ejecución) 5,22 kB
[entrada] [prestados] chunk {estilos} styles.js, styles.js.map (estilos) 15,7 kB [inicial] [prestados] trozo {proveedor} vendor.js,
vendor.js.map (proveedor) 3.06 MB [inicial] [prestados] [wdm]: compilado correctamente.
11
No se preocupe si ve unos resultados ligeramente distintos, con tal de que aparezca el mensaje “compilado con éxito” una vez que los
preparativos están completos.
Las herramientas de desarrollo en el proyecto incluyen un servidor HTTP. Una vez que se haya completado el proceso de construcción, una nueva
ventana del navegador se abrirá, y verá el contenido que se muestra en la figura 2-1 , Que muestra el contenido marcador de posición agrega al proyecto
cuando fue creado.
La Figura 2-1. El contenido marcador de posición HTML
Edición del archivo HTML

Voy a empezar por eliminar el contenido marcador de posición añadido al proyecto cuando fue creado para que pueda comenzar con un archivo HTML
que contiene el contenido estático que voy a mejorar más adelante usando angular. editar el
index.html presentar en el TODO / src carpeta para reemplazar el contenido con los que se muestran en el Listado 2-2 .
El listado 2-2. Los contenidos del archivo index.html en la carpeta src
<! DOCTYPE html>

<html> <head>
<Title> ToDo </ title> <meta

charset = "UTF-8" /> </ head>
<Clase cuerpo = "m-1 P-1">
12
<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3>
<Div class = "mi-1">

<Input class = "forma-control" />
<Clase de botón = "btn btn-primaria mt-1"> Añadir </ button> </ div>
<Table class = "-rayado mesa de ping-bordeado"> <thead> <tr>
<Th> Descripción </ th> <th>

Listo </ th> </ tr> </ thead>
<tbody>
<Tr> <td> compra flores </ td> <td> n </ td> </ tr> <tr> <td> Obtener los
zapatos </ td> <td> n </ td> </ tr> <tr > <td> recoger las entradas </ td> <td>
Sí </ td> </ tr> <tr> <td> Llamada Joe </ td> <td> n </ td> </ tr> </ tbody> </
table> </ body> </ html>
Las herramientas de desarrollo angular incluyen una característica que actualiza automáticamente el navegador cuando se produce un cambio en el
proyecto. Tan pronto como se guarda el index.html archivo, el servidor detectará el cambio y actualizar la aplicación, lo que refleja el nuevo contenido, como se
muestra en la figura 2-2 .
■ Propina Cuando vaya a hacer cambios en una serie de archivos, puede haber momentos en los que el navegador no será capaz de cargar y
ejecutar la aplicación de ejemplo, especialmente en los capítulos siguientes, donde los ejemplos son más complejos. En su mayor parte, el servidor de
desarrollo http desencadenará una recarga en el navegador, y todo va a estar bien, pero si se queda atascado, puede que tenga que recargar
manualmente el navegador para ponerse en marcha de nuevo.
13
La Figura 2-2. Editar el contenido del archivo HTML
Los elementos HTML en el index.html archivos muestran cómo la simple aplicación angular creo en este capítulo se verá. Los elementos clave
son una pancarta con el nombre del usuario, una entrada y un elemento de botón Añadir que añadir un nuevo elemento de tareas a la lista, y una tabla
que contiene todos los elementos de tareas pendientes e indica si se han completado.
He utilizado el excelente marco Bootstrap CSS con el estilo de contenido HTML. Bootstrap se aplica por elementos de las clases, como esta
asignación:
. . . <h3 class = "bg-primaria texto blanco-p-3"> Adam para hacer la lista </ h3>
...
Esta h3 elemento ha sido asignado a tres clases. los bg-primaria clase establece el color de fondo del elemento con el color
principal del tema de Bootstrap. Hay otros colores temáticos disponibles, incluyendo
bg-secundaria, bg-información, y bg-peligro. los p-1 clase añade una cantidad fija de relleno para todos los bordes del elemento, lo que garantiza que el
texto tiene un poco de espacio a su alrededor. los texto blanco clase establece el color del texto a blanco, lo que aumenta el contraste con el color de
fondo. Verá los elementos HTML añadido a estas clases y otros a través de este libro como aplico Bootstrap, y proporcionar una breve descripción de
las clases que más utilizo en el capítulo 4 .
En la siguiente sección, voy a quitar el código HTML del archivo, se corta en pedazos más pequeños, y lo utilizan para crear una sencilla aplicación
angular.
14
Adición de funciones angulares para el Proyecto

El HTML estático en el index.html archivo actúa como un marcador de posición para la aplicación básica. El usuario debe ser capaz de ver la lista de tareas
pendientes, marcar artículos que son completa y crear nuevos elementos. En las secciones que siguen, añado características angulares básicas para el
proyecto para que la solicitud de tareas para la vida. Para mantener la aplicación sencillez, se supone que sólo hay un usuario y que no tiene que preocuparse
por la preservación del estado de los datos en la aplicación, lo que significa que los cambios en la lista de tareas pendientes se perderán si el navegador la
ventana se cierra o se vuelve a cargar. (Ejemplos posteriores, incluyendo la aplicación SportsStore desarrollados en los capítulos 7 - 10 , Demostrar
almacenamiento de datos persistente.)
Preparación del archivo HTML

El primer paso para la adición de angular a la aplicación es para preparar el index.html presentar, como se muestra en el Listado 2-3 .
Listado 2-3. Preparación para angular en el archivo index.html en la carpeta src
<! DOCTYPE html>

<html> <head>

charset = "UTF-8" /> </ head>
<Clase cuerpo = "m-1">

<TODO-app> marcador de posición angular </ todo-app>
</ Body> </

html>
Esta lista reemplaza el contenido de la cuerpo elemento con una TODO aplicación elemento. No hay TODO aplicación
elemento de la especificación de HTML y el navegador lo ignorará al analizar el archivo HTML, pero este elemento será el punto de entrada en el
mundo de las angular y será reemplazado por el contenido de mi aplicación. Al guardar el index.html archivo, el navegador volverá a cargar el archivo y
mostrar el mensaje de marcador de posición, como se muestra en la figura 2-3 .
La Figura 2-3. Preparación del archivo HTML
15
La creación de un modelo de datos
Cuando creé la estática maqueta de la aplicación, los datos se distribuyen por todos los elementos HTML. El nombre del usuario se
incluye en la cabecera, así:
...
<H3 class = "bg-primaria texto blanco-p-3"> Adán' s para hacer la lista </ h3>
...
Los detalles de las tareas pendientes se encuentran dentro de td elementos en la tabla, así:
...
<Tr> <td> Compra flores </ td> <td> No </ td> </ tr>
...
La siguiente tarea es tirar todos los datos juntos para crear un modelo de datos. La separación de los datos de la forma en que se presenta al usuario
es una de las ideas clave en el patrón MVC, como explico en el capítulo 3 .
■ Propina Estoy simplificando aquí. El modelo también puede contener la lógica necesaria para crear, cargar, almacenar y modificar objetos de datos. en
una aplicación angular, esta lógica es a menudo en el servidor y se accede por un servicio web. véase el capítulo 3
para más detalles y Capítulo 24 por ejemplo.
aplicaciones angulares son típicamente escritos a máquina de escribir. Me presento en el capítulo mecanografiado 6 y explicar cómo funciona y por qué es
útil. Letra de imprenta es un exponente de JavaScript, pero una de sus principales ventajas es que permite escribir código utilizando la última especificación del
lenguaje Javascript con las características que aún no son compatibles con todos los exploradores que se pueden ejecutar aplicaciones angular. Uno de los
paquetes que angular-cli
agrega al proyecto en la sección anterior fue el compilador mecanografiado, que está configurado para generar archivos JavaScript del navegador de
usar de forma automática cuando se detecta un cambio en un fichero de transcripción.
Para crear un modelo de datos para la aplicación, he añadido un archivo llamado model.ts al TODO / src / app carpeta (archivos de texto mecanografiado
tienen. ts extensión) y añade el código que se muestra en el Listado 2-4 .
Listado 2-4. El contenido de la model.ts archivo en la carpeta src / app
modelo var = {
usuario: "Adán",
artículos: [{acción: "Comprar Flores", hecho: false}, {acción:
"conseguir los zapatos", hecha: false}, {acción: "recoger las
entradas", hecho: true}, {acción: "Llame a Joe", hecho: false}]};
Una de las características más importantes de mecanografiado es que sólo se puede escribir código “normal”, como si JavaScript que se ha orientado
el navegador directamente. en el Listado 2-4 , He utilizado la sintaxis literal de objeto JavaScript para asignar un valor a una variable global llamada modelo. El
objeto modelo de datos tiene una usuario propiedad, que proporciona el nombre de usuario de la aplicación, y una artículos propiedad, que se fija a una matriz
de objetos con acción y
hecho propiedades, cada una de las cuales representa una tarea en la lista de tareas.
Este es el aspecto más importante de la utilización mecanografiado: usted no tiene que utilizar las características que ofrece, y puede escribir aplicaciones
angular enteras utilizando sólo las características de JavaScript que son compatibles con todos los navegadores, como el código del listado 2-4 .
dieciséis
Pero parte del valor de mecanografiado es que convierte el código que utiliza las últimas características del lenguaje JavaScript en código que se ejecutará
en cualquier lugar, incluso en los navegadores que no soportan estas características. Listado 2-5
muestra el modelo de datos reescrito para utilizar las funciones de JavaScript que se agregaron en el 6 estándar ECMAScript (conocido como ES6).
Listado 2-5. Uso de las funciones ES6 en los model.ts archivo en la carpeta src / app
Modelo de exportación de clase {
usuario;
artículos;
constructor () {
this.user = "Adam";
this.items = [nuevo TodoItem ( "Comprar flores", false),
nueva TodoItem ( "Obtener los zapatos", false), nuevo TodoItem
( "recoger las entradas", false), nuevo TodoItem ( "llamar a Joe",
false)]
}}
TodoItem clase de exportación {

acción;
hecho;
constructor (acción, hecho) {

this.action = acción; this.done
= DONE; }}
Esto sigue siendo de código JavaScript estándar, pero el clase palabra clave se introdujo en una versión posterior de la lengua que la mayoría de los
desarrolladores de aplicaciones web están familiarizados con, ya que no es compatible con los navegadores antiguos. los clase palabra clave se utiliza para definir los
tipos que se pueden crear instancias con el nuevo palabra clave para crear objetos que tienen datos y comportamientos bien definidos.
Muchas de las características añadidas en las últimas versiones del lenguaje JavaScript son azúcar sintáctica para ayudar a los programadores a evitar
algunos de los problemas más comunes de JavaScript, como el sistema de tipo inusual. los clase
palabra clave no cambia la forma en que maneja JavaScript tipos; sólo lo hace más familiar y fácil de usar para programadores con experiencia
en otros lenguajes, como C # o Java. Me gusta el sistema de tipo JavaScript, que es dinámico y expresivo, pero encuentro de trabajo con las
clases más predecibles y menos propensa a errores, y simplificar el trabajo con angular, que se ha diseñado en torno a las últimas funciones de
JavaScript.
■ Propina No se preocupe si usted no está familiarizado con las características que se han añadido en las últimas versiones de la especificación
Javascript. capítulos 5 y 6 proporcionar una imprimación para escribir Javascript usando las características que hacen angular más fácil trabajar con, y en el
capítulo 6 también describe algunas características útiles-mecanografiado específico.
los exportar palabra clave se refiere a módulos de JavaScript. Al utilizar módulos, cada archivo de transcripción o JavaScript es considerado como una
unidad autónoma de la funcionalidad y la exportar palabra clave se utiliza para identificar los datos o tipos que desea utilizar en otras partes de la aplicación.
módulos de JavaScript se utilizan para gestionar las dependencias que surgen entre los archivos de un proyecto y evitar tener que administrar manualmente
un conjunto complejo de
guión elementos en el archivo HTML. Véase el capítulo 7 para más detalles de cómo los módulos de trabajo.
17
Preparación de la plantilla
Necesito una forma de mostrar los valores de datos en el modelo para el usuario. En angular, esto se hace utilizando una modelo,
que es un fragmento de HTML que contiene instrucciones que son realizadas por angular. los angular-cli
configuración para el proyecto crea un archivo de plantilla llamada app.component.html en el src / app carpeta. He editado este archivo y añadí el marcado se
muestra en el Listado 2-6 para reemplazar el contenido marcador de posición. El nombre del archivo que sigue las convenciones de nomenclatura angular estándar,
que explico más adelante.
Listado 2-6. Los contenidos del archivo app.component.html en la carpeta src / app
<H3 class = "bg-primaria P-1-texto blanco"> {{getName ()}} 's para hacer la lista </ h3>
Voy a añadir más elementos a este archivo en breve, pero una sola h3 elemento es suficiente para empezar. Incluyendo un valor de datos en una
plantilla se realiza mediante abrazaderas dobles - {{y}} - y evalúa angular lo que pones entre las abrazaderas dobles para obtener el valor que se vea.
El {{y}} caracteres son un ejemplo de una el enlace de datos, lo que significa que crean una relación entre la plantilla y un valor de datos. Los
enlaces de datos son una característica importante angular, y verá más de ellos en este capítulo como añado características para la aplicación de
ejemplo (y los describen en detalle en la Parte 2 de este libro). En este caso, el enlace de datos dice angular para invocar una función llamada getNombre
y utilizar el resultado como el contenido de la h3 elemento. los getNombre función no existe en cualquier lugar de la aplicación en el momento, pero
voy a crear en la próxima sección.
Preparación del Componente

un angular componente es responsable de la gestión de una plantilla y dotándola de los datos y la lógica que necesita. Si eso parece una declaración
amplia, es porque los componentes son parte de una aplicación angular que hace la mayor parte del trabajo pesado. Como consecuencia de ello, se
pueden utilizar para todo tipo de tareas.
Por el momento, tengo un modelo de datos que contiene una usuario propiedad con el nombre para mostrar, y tengo una plantilla que muestra el
nombre de la invocación de una getNombre función. Lo que necesito es un componente que actúe como puente entre ellos. los angular-cli instalación crea un
archivo denominado componente marcador de posición app.component. ts al TODO / src / app carpeta, que edité para reemplazar el contenido original con el
código que se muestra en el Listado 2-7 .
El listado 2-7. El contenido de la app.component.ts archivo en la carpeta src / app
importación {Componente} de "@ angular / núcleo"; {} la

importación Modelo de "./model";
@Componente({
Selector: "todo-app",
templateUrl: "app.component.html"})
AppComponent clase de exportación {

modelo = new Model ();
getName () {
volver this.model.user; }}
18
Esto sigue siendo JavaScript, pero se basa en las características que usted puede no haber encontrado antes, sino que se fundamenta el desarrollo
angular. El código en el listado se puede dividir en tres secciones principales, como se describe en las siguientes secciones.
La comprensión de las importaciones
los importar la palabra clave es la contrapartida de la exportar palabra clave y se utiliza para declarar una dependencia de los contenidos de un módulo de JavaScript.
los importar palabra clave se utiliza dos veces en el listado 2-7 , Como se muestra aquí:
...
...
El primero importar afirmación se utiliza en la lista para cargar el @ angular / núcleo módulo, que contiene la funcionalidad angular clave,
incluyendo soporte para componentes. Cuando se trabaja con módulos, las importar
sentencia especifica los tipos que se importan entre llaves. En este caso, el importar sentencia se utiliza para cargar el Componente escriba
desde el módulo. Los @ angular / núcleo módulo contiene muchas clases que se han empaquetado juntos para que el navegador puede
cargar a todos en un solo archivo JavaScript.
El segundo importar sentencia se utiliza para cargar el Modelo clase a partir de un archivo en el proyecto. El objetivo de este tipo de importación
comienza con ./, lo que indica que el módulo se define en relación con el archivo actual.
Nótese que ni importar declaración incluye una extensión de archivo. Esto se debe a la relación entre el destino de una instrucción de importación
y el archivo que se carga en el navegador es administrado por una cargador de módulos,
lo que configuro en la sección “Poner la aplicación Juntos”.
La comprensión del decorador

La parte más extraña de aspecto del código en la lista es la siguiente:
...
@Componente({
...
Éste es un ejemplo de un decorador, que proporciona metadatos acerca de una clase. Este es el @ Componente
decorador, y, como su nombre indica, se dice angular que este es un componente. El decorador proporciona información de configuración a través de
sus propiedades, que en el caso de @ Componente incluye propiedades llamados
selector y templateUrl.
los selector propiedad especifica un selector CSS que coincide con el elemento HTML a la que se aplicará el componente: en
este caso, he especificado el TODO aplicación elemento, que he añadido a la
index.html archivo en el listado 2-3 . Cuando una aplicación se inicia angular, escanea el código HTML angular en el documento actual y busca
elementos que corresponden a los componentes. Se encontrará la TODO aplicación elemento y saber que debe ser colocado bajo el control de
este componente.
los templateUrl la propiedad es especificar la plantilla del componente, que es la app.component.html presentar para este componente. En la
Parte 2, describo las otras propiedades que se pueden utilizar con el @ Componente decorador y los otros decoradores que los soportes angulares.
19
La comprensión de la Clase
La parte final de la lista define una clase que puede crear una instancia angular para crear el componente.
...
getName () {
volver this.model.user; }}
...
Estas declaraciones definen una clase llamada AppComponent que tiene una modelo propiedad y una getNombre función, que proporcionan la
funcionalidad requerida para soportar la unión en plantilla a partir de datos de la lista 2-6 . Cuando una nueva instancia de la AppComponent Se crea la
clase, el modelo propiedad se establece en una nueva instancia de la Modelo clase definida en el Listado 2-5 . los getNombre función devuelve el valor de
la usuario
propiedad definida por el Modelo objeto.
Poner la solicitud, junto

Tengo las tres piezas clave de la funcionalidad necesarios para construir una simple aplicación angular: un modelo, una plantilla y un
componente. Cuando guardó el cambio en el app.component.ts archivo, había suficiente funcionalidad en lugar para traer las tres piezas juntas
y mostrar el resultado que se muestra en la figura 2-4 .
La Figura 2-4. funcionalidad angular simple en la aplicación de ejemplo
Una ventaja de usar angular-cli para crear un proyecto es que usted no tiene que preocuparse de la creación de los archivos básicos requeridos
por una aplicación angular. El inconveniente es que pasando por alto estos archivos significa que se perderá en algunos detalles importantes que vale la
pena explorar.
aplicaciones angulares requieren una módulo. A través de una elección desafortunada denominación, hay dos tipos de módulos utilizados en el
desarrollo angular. UNA módulo de JavaScript es un archivo que contiene la funcionalidad de JavaScript que se utiliza a través de la importar palabra
clave, que describo en el Capítulo 6 . El otro tipo de módulo es una Módulo angular, que se utiliza para describir una aplicación o un grupo de
características relacionadas. Y para complicar las cosas, cada aplicación tiene una módulo de raíz, que es el módulo angular angular que proporciona la
información que necesita para iniciar la aplicación.
20
Cuando angular-cli creó el proyecto, se crea un archivo llamado app.module.ts, que es el nombre de archivo convencional para el
módulo de raíz, en el TODO / src / app carpeta y añade el código del listado 2-8 .
El listado 2-8. El contenido predeterminado de las app.module.ts archivo en la carpeta src / app
{} la importación de BrowserModule '@ / plataforma de navegador angular'; importación

{NgModule} de '@ angular / núcleo'; {} la importación de AppComponent
'./app.component';
@NgModule ({
declaraciones: [AppComponent], las
importaciones: [BrowserModule], los proveedores
de: [],
bootstrap: [AppComponent]})
El propósito del módulo angular es proporcionar información de configuración a través de las propiedades definidas por el @ NgModule decorador.
Explico cómo funciona módulos angular en detalle en el capítulo 21 , Pero por el momento, es suficiente para saber que del decorador importaciones propiedad
dice angular que la aplicación depende de las características necesarias para ejecutar una aplicación en el navegador y que la declaraciones y oreja
propiedades dicen angular alrededor de los componentes de la aplicación y cuál debe usarse para iniciar la aplicación (sólo hay un
componente en este sencillo ejemplo de aplicación, por lo que es el único valor para ambas propiedades).
Para crear una aplicación de tareas pendientes, necesito utilizar las funciones angulares para trabajar con elementos de formulario, que se definen en un
módulo angular llamada @ angulares de / formas. Para activar estas funciones, realice los cambios que aparecen en el listado 2-9 al app.module.ts expediente.
El listado 2-9. Habilitación forma apoya en el Archivo app.module.ts en la carpeta src / app
{} la importación de BrowserModule '@ / plataforma de navegador angular'; importación

{NgModule} de '@ angular / núcleo';
importación {FormsModule} de "@ angulares / formas";
{} la importación de AppComponent './app.component';
@NgModule ({
declaraciones: [AppComponent],
importaciones: [BrowserModule, FormsModule],
proveedores de: [],
bootstrap: [AppComponent]})
aplicaciones angulares también necesitan una archivo de arranque, que contiene el código necesario para iniciar la aplicación. El archivo de
arranque se llama main.ts, y que se crea en el TODO / src carpeta con el código del listado 2-10 . No se requieren cambios a la main.ts declararse en
este capítulo.
21
Listado 2-10. El contenido de la main.ts archivo en la carpeta src
importación {enableProdMode} de '@ angular / núcleo';

{} la importación de platformBrowserDynamic '@ angular / plataforma de navegador-dinámico';
{} la importación de AppModule './app/app.module'; {} la importación entorno de

'./environments/environment';
si (environment.production)
{enableProdMode (); }
platformBrowserDynamic (). bootstrapModule (AppModule)

. captura (err => console.log (err));
Aunque este libro se centra en las aplicaciones que se ejecutan en un navegador web, angular tiene la intención de trabajar en una variedad de
entornos. Las instrucciones de código en el archivo de arranque seleccionar la plataforma que se utilizará y cargar el módulo de raíz, que es el punto de
entrada en la aplicación.
■ Propina llamando al platformBrowserDynamic (). bootstrapModule método es para aplicaciones basadas en navegador, que es lo que me centro en este
libro. si está trabajando en diferentes plataformas, tales como el marco de desarrollo móvil iónica, entonces usted tendrá que usar un método de arranque
diferente específico para la plataforma en la que está trabajando. los desarrolladores de cada plataforma que soporte angular proporcionan detalles de su
método de arranque específico de la plataforma.
El navegador ejecuta el código en el archivo de arranque, que encendió angular, que a su vez posee el documento HTML y descubrió la TODO
aplicación elemento. los selector bienes utilizados para definir el componente coincide con el TODO aplicación elemento, lo que permitió angular
para eliminar el contenido marcador de posición y reemplazarlo con plantilla del componente, que estaba cargado automáticamente de la app.component.html
expediente. La plantilla se ha analizado; las {{y}} datos de la unión se descubrieron, y se evaluó la expresión que contiene, llamando al getNombre método
y presentan el resultado mostrado en la figura. Puede que no sea tan impresionante, pero es un buen comienzo, y proporciona una base sobre la
que añadir más características.
■ Propina en cualquier proyecto angular, hay un período en el que tiene que definir las partes principales de la aplicación y sondear juntos. Durante este
periodo, se puede sentir como que está haciendo mucho trabajo para poco rendimiento. este período de inversión inicial será en última instancia, pagar, lo
prometo. Verá un ejemplo más de esto en el capítulo 7 Cuando comienzo a construir una aplicación angular más complejo y realista; hay un montón de
configuración inicial y la configuración requerida, pero entonces las características comienzan a encajar en su lugar rápidamente.
Adición de funciones a la Ejemplo de Aplicación

Ahora que la estructura básica de la aplicación está en su lugar, puedo añadir las funciones restantes que ser burlado con HTML estático al inicio del
capítulo. En las secciones que siguen, agrego la tabla que contiene la lista de tareas pendientes y la entrada elemento y el botón para la creación de
nuevos artículos.
22
Adición de la tabla de tareas pendientes
plantillas angulares pueden hacer algo más que mostrar los valores de datos simples. Describo la gama completa de características de la plantilla en la parte 2, pero
para la aplicación de ejemplo, voy a utilizar la característica de que permite que un conjunto de elementos de HTML que se añade a la DOM para cada objeto en una
matriz. La matriz, en este caso, es el conjunto de elementos de tareas en el modelo de datos. Listado 2-11 añade un método para el componente que proporciona la
plantilla con la matriz de elementos de tareas.
Listado 2-11. La adición de un método en la app.component.ts archivo en la carpeta src / app

@Componente({

getName () {
volver this.model.user; }
getTodoItems () {
this.model.items regresar; }
los getTodoItems método devuelve el valor de la artículos propiedad de la Modelo objeto. Listado 2-12
actualiza la plantilla del componente a utilizar el nuevo método.
El listado 2-12. Viendo los artículos de tareas pendientes en el Archivo app.component.html en la carpeta src / app
<Table class = "mesa de ping-rayas mesa bordeada">

<Thead>
<Tr> <th> </ th> <th> Descripción </ th> <th> Listo </ th> </ tr> </ thead>
<tbody>
<Tr * ngFor = "dejar el artículo de getTodoItems (); Sea I = índice">

<Td> {{i + 1}} </ td> <td>
{{item.action}} </ td> <td [ngSwitch]
= "item.done">
<Span * ngSwitchCase = "true"> Sí </ span> <span *
ngSwitchDefault> n </ span> </ td> </ tr> </ tbody> </ table>
23
Las incorporaciones a la plantilla se basan en varios diferentes rasgos angulosos. El primero es el * ngFor
expresión, que se utiliza para repetir una región de contenido para cada elemento de una matriz. Éste es un ejemplo de un
directiva, que describo en los capítulos 12 - dieciséis (Directivas son una parte importante del desarrollo angular, por lo que no se describen
en varios capítulos). Los * ngFor expresión se aplica a un atributo de un elemento, como este:
. . . <Tr * ngFor = "dejar el artículo de getTodoItems (); Sea I = índice">
...
Esta expresión dice angular para el tratamiento de la tr elemento al que se ha aplicado como una plantilla que se debe repetir para cada
objeto devuelto por el componente de getTodoItems método. los dejar el artículo parte de la expresión especifica que cada objeto debe ser
asignado a una variable llamada ít de modo que pueda ser referido dentro de la plantilla.
los ngFor expresión también realiza un seguimiento del índice del objeto actual en la matriz que se está procesando, y esto se
asigna a una segunda variable llamada yo.
...
<Tr * ngFor = "dejar el artículo de getTodoItems (); Sea I = índice ">
...
El resultado es que el tr elemento y sus contenidos se duplican y se insertan en el documento HTML para cada objeto devuelto por
el getTodoItems método; para cada iteración, la corriente objeto de tareas se puede acceder a través de la variable llamada ít, y la posición
del objeto en la matriz se puede acceder a través de la variable llamada yo.
■ Propina es importante recordar el carácter * al utilizar * ngFor. Les explico lo que significa en el capítulo dieciséis .
Dentro de tr plantilla, hay dos enlaces de datos, que pueden ser reconocidos por las {{y}} caracteres, de la siguiente manera:
...
<Td> {{ i + 1}} </ td> <td> {{ item.action}}
</ td>
...
Estos enlaces se refieren a las variables que se crean por el * ngFor expresión. Encuadernaciones no sólo son utilizadas para referirse a nombres de
propiedades y métodos; También se pueden utilizar para realizar operaciones sencillas de JavaScript. Se puede ver un ejemplo de esto en la primera unión,
en el que sumar la yo variable y 1.
■ Propina Para las transformaciones simples, puede incrustar sus expresiones de JavaScript directamente en los enlaces de este tipo, pero para
operaciones más complejas, angular tiene una característica llamada tubería, que describo en el Capítulo 18 .
24
Las expresiones de plantilla que quedan en el tr plantilla demostrar cómo el contenido se puede generar selectivamente.
. . . <Td [ ngSwitch] = "item.done">
<Span * ngSwitchCase = "true"> Sí </ span> <span * ngSwitchDefault>

No </ span> </ td>
...
Los [ ngSwitch] expresión es una sentencia condicional que se usa para insertar diferentes conjuntos de elementos en el documento sobre
la base de un valor especificado, que es el item.done propiedad en este caso. Anidado dentro de la td elemento son dos lapso los elementos que se
han anotado con * ngSwitchCase y * ngSwitchDefault
y que son equivalentes a la caso y defecto palabras clave de un JavaScript regulares cambiar bloquear. describo
ngSwitch detalladamente en el capítulo 13 (Y lo que significan los corchetes en el capítulo 12 ), Pero el resultado es que la primera lapso elemento
se añade al documento cuando el valor de la item.done propiedad es cierto, y el segundo lapso elemento se añade al documento cuando item.done
es falso. El resultado es que el verdadero Falso
valor de la item.done se transforma en propiedad lapso elementos que contienen cualquiera Sí o No. Al guardar los cambios a la plantilla, el
navegador volverá a cargar, y se mostrará la tabla de tareas pendientes, como se muestra en la figura 2-5 .
La Figura 2-5. Viendo la tabla de tareas pendientes
25
Si utiliza herramientas de desarrollo F12 de tu navegador, usted será capaz de ver el contenido HTML que la plantilla ha generado. (No se puede
hacer esto mirando a la fuente de la página, lo que demuestra el HTML enviado por el servidor y no los cambios realizados por angular utilizando la API
DOM).
Se puede ver cómo cada objeto de tareas pendientes en el modelo ha producido una fila en la tabla que se rellena con el local elemento
y yo variables y la forma en la expresión switch muestra Sí o No para indicar si la tarea se ha completado.
...
<Tr>
<Td> 2 </ td>
<Td> Obtener los zapatos </ td> <td>
<span> n </ span> </ td> </ tr>
...
La creación de un bidireccional de datos Encuadernación
Por el momento, la plantilla contiene sólo enlaces de datos en un solo sentido, lo que significa que se utilizan para mostrar un valor de datos, pero son incapaces de
cambiarlo. Angular también es compatible enlaces de datos bidireccionales, que se puede utilizar para mostrar un valor de datos y cambiar también. Bidireccionales
enlaces se utilizan con elementos de formulario HTML, y el listado 2-13
añade una casilla de verificación entrada elemento a la plantilla que permitirá a los usuarios marcar un elemento de una tarea como completa.
El listado 2-13. Adición de una unión de dos vías en el Archivo app.component.html en la carpeta src / app

<Thead>
<tbody>

<Td> {{i + 1}} </ td> <td>
{{item.action}} </ td>
<Td> <input type = "casilla de verificación" [(ngModel)] = "item.done" /> </ td>
<Td [ngSwitch] = "item.done">
los ngModel expresión de plantilla crea una unión entre un valor de datos de dos vías (la item.done
propiedad en este caso) y una formar elemento. Al guardar los cambios en la plantilla, verá una nueva columna que contiene casillas de verificación
aparecen en la tabla. El valor inicial de la casilla de verificación se ajusta utilizando el
item.done propiedad, al igual que una sola vía normal de unión, pero cuando el usuario cambia la casilla de verificación, responde angular mediante la actualización de
la propiedad del modelo especificado.
26
Para demostrar cómo funciona esto, me queda la columna que contiene el valor Sí / No hay visualización de la hecho
valor de la propiedad genera utilizando la ngSwitch expresión en la plantilla. Si se pulsa una casilla de verificación, el correspondiente Sí / No hay
cambios de valor, así, como se ilustra en la figura 2-6 .
La Figura 2-6. Cambio de un valor de modelo usando una de dos vías de enlace de datos
Esto revela una importante función angular: el modelo de datos es vivir. Esto significa que las consolidaciones-aún de datos unidireccional fijaciones de
datos, se actualizan cuando se cambia el modelo de datos. Esto simplifica el desarrollo de aplicaciones web, ya que significa que usted no tiene que
preocuparse de asegurar que muestre las actualizaciones cuando cambia el estado de la aplicación.
Filtrado de tareas pendientes
Las casillas de verificación permiten que el modelo de datos que se actualiza, y el siguiente paso es eliminar los elementos de tareas una vez que han sido
marcadas como realizadas. Listado 2-14 cambia el componente de getTodoItems Método para que filtra todos los elementos que se han completado.
Listado 2-14. Filtrado de datos de tareas en el archivo app.component.ts en la carpeta src / app

@Componente({

getName () {
getTodoItems () {
volver this.model.items.filter (item => item.done!);
}}
27
Éste es un ejemplo de un función lambda, también conocido como una función de la flecha de grasa, que es una forma más concisa de
expresar una función de JavaScript estándar. La flecha en las expresiones lambda se lee como “va a” tales como “ ít No va a item.done. ”Las
expresiones lambda son una adición reciente a la especificación del lenguaje JavaScript, y proporcionan una alternativa a la forma convencional de
utilizar funciones como argumentos como este:
...
volver this.model.items.filter ( función (elemento) {return item.done!});
...
Cualquiera que sea la forma que elija para definir la expresión pasada a la filtrar método, el resultado es que sólo se muestran incompletos los elementos
pendientes. Dado que el modelo de datos es vivo y cambios se reflejan en los enlaces de datos inmediatamente, el control de la casilla de verificación de un
elemento quita de la vista, como se muestra en la figura 2-7 .
Figura 2-7. El filtrado de los elementos pendientes
Adición de tareas pendientes
El siguiente paso es la construcción de la funcionalidad básica para permitir al usuario crear nuevos elementos de tareas y almacenarlos en el modelo de datos.
Listado 2-15 añade nuevos elementos a la plantilla del componente.
El listado 2-15. Adición de elementos en el archivo app.component.html en la carpeta src / app
<Input class = "forma-control" #todoText />
<Clase de botón = "btn btn-primaria mt-1" (click) = "addItem (todoText.value)">
Añadir
botón </> </ div>

<Thead>
28
<Tbody>
<Td> {{i + 1}} </ td> <td>
{{item.action}} </ td>
<Td> <input type = "casilla de verificación" [(ngModel)] = "item.done" /> </ td> <td [ngSwitch]
= "item.done">
los entrada elemento tiene un atributo cuyo nombre comienza con el carácter #, que se utiliza para definir una variable para hacer
referencia al elemento de enlaces de datos de la plantilla. La variable se llama todoText, y se utiliza por la unión que se ha aplicado a la botón elemento.
...
<Botón class = "btn btn-primaria mt-1" ( clic) = "addItem (todoText.value)">
...
Este es un ejemplo de una de enlaces de sucesos, y se dice angular para invocar un método componente llamado
añadir artículo, utilizando la valor propiedad de la entrada elemento como el argumento método. Listado 2-16 implementa el añadir artículo método en el
componente.
■ Propina No se preocupe por contar los enlaces separados en el momento. i explicar los diferentes tipos de unión que los soportes angulares
en la parte 2 y el significado de los diferentes tipos de soportes o paréntesis que cada uno requiere. que no son tan complicadas como parecen,
sobre todo una vez que han visto cómo encajan en el resto del marco angular.
El listado 2-16. La adición de un método en la app.component.ts archivo en la carpeta src / app
importación {Componente} de "@ angular / núcleo";

importación {Modelo, TodoItem} de "./model";
@Componente({

getName () {
getTodoItems () {
volver this.model.items.filter (item => item.done!); }
29
addItem (newItem) {
si (newItem! = "") {
this.model.items.push (nuevo TodoItem (newItem, false)); }}
los importar palabra clave puede utilizarse para importar varias clases de un módulo, y una de las importar
declaraciones en el listado se ha actualizado para que el TodoItem clase se puede utilizar en el componente. Dentro de la clase de componente, el añadir
artículo método recibe el texto enviado por la unión en la plantilla de evento y lo utiliza para crear un nuevo TodoItem objeto y añadirlo al modelo de datos. El
resultado de estos cambios es que se pueden crear nuevos elementos de tareas mediante la introducción de texto en el entrada elemento y haciendo clic en el
botón Añadir, como se muestra en la figura 2-8 .
La Figura 2-8. Creación de un elemento de tareas pendientes
Resumen
En este capítulo, he mostrado cómo crear su primera aplicación angular sencilla, pasando de un archivo HTML maqueta de la aplicación a una aplicación dinámica
que permite al usuario crear nuevos elementos de tareas y marcar los elementos existentes como completa.
No se preocupe si no todo en este capítulo tiene sentido. Lo que es importante entender en esta etapa es la forma general de una
aplicación angular, que se construye en torno a un modelo de datos, componentes y plantillas. Si usted tiene estas tres bloques de construcción
clave en mente, entonces tendrá un contexto para todo lo que sigue. En el capítulo siguiente, puse angular en su contexto.
30
CAPÍTULO 3
Poniendo en contexto angular
En este capítulo, puse angular en el contexto en el mundo del desarrollo de aplicaciones web y sentar las bases para los capítulos que siguen. El
objetivo de angular es llevar las herramientas y capacidades que han estado disponibles sólo para el desarrollo del lado del servidor al cliente web
y, al hacerlo, que sea más fácil de desarrollar, probar y mantener aplicaciones web ricas y complejas.
obras angulares por lo que le permite ampliar HTML, que puede parecer una idea extraña hasta que se acostumbre a ella. aplicaciones angulares
expresan funcionalidad a través de elementos personalizados, y una aplicación compleja puede producir un documento HTML que contiene una mezcla de
marcado estándar y personalizado.
El estilo de desarrollo que los soportes angulares se deriva a través del uso de la Modelo-Vista-Controlador
(MVC), aunque esto se refiere a veces como Model-View- Lo que sea, ya que existen innumerables variaciones de este patrón que se puede
adherir a cuando se utiliza angular. Me voy a centrar en el patrón MVC estándar en este libro, ya que es el más establecido y ampliamente
utilizado. En las secciones que siguen, explico las características de los proyectos donde angular puede ofrecer un beneficio significativo (y
aquellos en los que existen mejores alternativas), describir el patrón MVC, y describir algunos errores comunes.
Este libro y el calendario de lanzamientos ANGULAR
Google ha adoptado un programa de lanzamiento agresivo para angular. Esto significa que hay un flujo continuo de versiones menores y
una gran versión cada seis meses. versiones menores no deben romper cualquier características existentes y deben contener en gran
medida correcciones de errores. Las versiones principales pueden contener cambios sustanciales y no pueden ofrecer compatibilidad con
versiones anteriores.
No parece justo ni razonable pedir a los lectores a comprar una nueva edición de este libro cada seis meses, sobre todo porque la mayoría de
las características angulares son poco probable que cambie, incluso en una versión mayor. En su lugar, voy a enviar actualizaciones siguientes
las principales versiones en el repositorio de GitHub para este libro, https: // github.com/Apress/pro-angular-6 .
Este es un experimento para mí (y para Apress), y todavía no sé qué forma esos cambios pueden llevar entre otras cosas porque no sé
lo que los grandes lanzamientos de angular contendrán, pero el objetivo es extender el la vida de este libro complementando los
ejemplos que contiene.
No estoy haciendo ninguna promesa acerca de lo que las actualizaciones serán como, ¿qué forma van a tomar, o cuánto tiempo voy a producirlos
antes de doblar en una nueva edición de este libro. Por favor, mantenga una mente abierta y comprobar el repositorio para este libro cuando las
nuevas versiones angulares son liberados. Si usted tiene ideas sobre cómo los cambios podrían ser mejorados como el experimento se
desarrolla, entonces me e-mail a adam@adam-freeman.com
y déjame saber.

Capítulo 3 ■ Poniendo angular en contexto
Sobresale la comprensión de dónde angular

Angular no es la solución a todos los problemas, y es importante saber cuándo se debe utilizar angular y cuándo debe buscar una alternativa. Angular entrega el
tipo de funcionalidad que solía estar disponible sólo para los desarrolladores del lado del servidor, pero completamente en el navegador. Esto significa angular
tiene mucho trabajo por hacer cada vez que un documento HTML al que angular se ha aplicado está cargada con el código HTML elementos tienen que ser
compilado, los enlaces de datos tienen que ser evaluados, componentes y otros bloques de construcción que tenga que ser ejecutado, y así sucesivamente, la
construcción de soporte para las características que he descrito en el capítulo 2 y los que describo más adelante en este libro.
Este tipo de trabajo requiere tiempo para llevar a cabo, y la cantidad de tiempo depende de la complejidad del documento HTML, en el código asociado
JavaScript, y por la crítica en la calidad del navegador y la capacidad de procesamiento del dispositivo. Usted no notará ninguna demora cuando se utilizan los
navegadores más recientes en una máquina de escritorio capaz, pero los viejos navegadores en los teléfonos inteligentes de baja potencia realmente puede
ralentizar la configuración inicial de una aplicación angular.
El objetivo, por tanto, es llevar a cabo esta configuración la menor frecuencia posible y entregar tanto de la aplicación como sea posible para el usuario
cuando se lleva a cabo. Esto significa dar una cuidadosa reflexión para el tipo de aplicación web a construir. En términos generales, hay dos tipos de
aplicaciones web: viaje ida y vuelta y única página.
Comprensión de ida y vuelta y de una sola página Aplicaciones

Durante mucho tiempo, las aplicaciones web se han desarrollado para seguir una viaje ida y vuelta modelo. El navegador solicita un documento HTML inicial
del servidor. interacciones-como hacer clic en un enlace o enviar un formulario dirigido por el navegador para solicitar y recibir un nuevo documento HTML de
usuario. En este tipo de aplicación, el navegador es esencialmente un motor de desgarramiento para el contenido HTML, y toda la lógica de la aplicación y los
datos residen en el servidor. El navegador hace una serie de peticiones HTTP sin estado que el servidor gestiona mediante la generación de documentos
HTML de forma dinámica.
Una gran cantidad de desarrollo web actual sigue siendo para aplicaciones de ida y vuelta, no menos importante, ya que requieren poco desde el
navegador, lo que asegura el apoyo más amplio posible cliente. Sin embargo, hay algunos inconvenientes graves para aplicaciones de ida y vuelta: hacen que la
espera del usuario mientras se solicita y se carga el documento HTML siguiente, requieren una gran infraestructura de servidor para procesar todas las
solicitudes y gestionar todo el estado de la aplicación, y requieren una gran cantidad de ancho de banda, ya que cada documento HTML tiene que ser autónomo
(que conduce a una gran parte del mismo contenido que se incluye en cada respuesta del servidor).
aplicaciones de una sola página adoptar un enfoque diferente. Un documento HTML inicial se envía al navegador, pero las interacciones del usuario
conducen a las peticiones Ajax para pequeños fragmentos de HTML o datos insertados en el conjunto existente de los elementos que se muestran al
usuario. El documento HTML inicial no se vuelve a cargar o reemplazado, y el usuario puede seguir interactuando con el HTML existente, mientras que las
peticiones Ajax se llevan a cabo de forma asíncrona, incluso si eso significa ver a un mensaje de “carga de datos”.
La mayoría de las aplicaciones actuales se sitúan entre los extremos, que tiende a utilizar el modelo básico de ida y vuelta mejorada con JavaScript
para reducir el número de cambios de página completa, aunque el énfasis se pone a menudo en reducir el número de errores de forma mediante la
validación del lado del cliente.
Angular da el mayor rendimiento de su carga de trabajo inicial, como una aplicación se acerca al modelo de una sola página. Eso no quiere decir que no
puede utilizar angular con las aplicaciones que de ida y vuelta puede, por supuesto, pero hay otras tecnologías que son más simples y se adapten mejor a las
páginas HTML discretos, ya sea trabajando directamente con la API de objetos de documento Model (DOM) o usando una biblioteca para simplificar su uso,
tales como jQuery. En figura 3-1 se puede ver el espectro de tipos de aplicaciones web y donde angular proporciona beneficio.
32
La Figura 3-1. Angular se adapta bien a una sola página web aplicaciones
sobresale angulares en aplicaciones de una sola página y especialmente en aplicaciones complejas de ida y vuelta. Para proyectos más
sencillos, utilizando la API DOM directa o una biblioteca como jQuery es generalmente una mejor opción, aunque nada impide utilizar angular en
todos sus proyectos.
El modelo de aplicación de una sola página es el punto dulce para angular, no sólo por el proceso de inicialización, pero debido a que los
beneficios de utilizar el patrón MVC (que describo más adelante en este capítulo) realmente comenzar a manifestarse en los proyectos más
grandes y complejos, que son los que empujan hacia el modelo SinglePage.
■ Propina Otra frase que puede encontrar es aplicaciones web progresivos (PVS). aplicaciones progresistas siguen trabajando incluso cuando se
desconecta de la red y tener acceso a características tales como notificaciones push. Personas con SIDA no son específicos de angular, pero demuestran
cómo utilizar las funciones simples de PWA en el capítulo 10 .
Comparando angular de jQuery

Angular y jQuery tomar diferentes enfoques para el desarrollo de aplicaciones web. jQuery es todo acerca manipulando de forma explícita
Document Object Model del navegador (DOM) para crear una aplicación. El enfoque que toma angular es cooptar el navegador a ser la
base para el desarrollo de aplicaciones.
jQuery es, sin ninguna duda, una poderosa herramienta y que amo a utilizar. jQuery es robusto y fiable, y se puede obtener resultados más o menos
inmediato. Me gusta especialmente la API de líquidos y la facilidad con que se puede extender la biblioteca central de jQuery. Pero por mucho que me encanta
jQuery, no es la herramienta adecuada para cada puesto de trabajo más de lo que es angular. Puede ser difícil de escribir y gestionar grandes aplicaciones usando
jQuery, y la unidad de pruebas a fondo puede ser un desafío.
33
Angular también utiliza el DOM para presentar el contenido HTML a los usuarios, pero toma un camino totalmente diferente a la creación de
aplicaciones, centrándose más en los datos de la aplicación y asociarlo a elementos HTML a través de enlaces de datos dinámicos.
El principal inconveniente de angular es que hay una inversión inicial en el tiempo de desarrollo antes de empezar a ver resultados, algo que
es común en cualquier desarrollo basado en MVC. Esta inversión inicial es que vale la pena, sin embargo, para aplicaciones complejas o aquellos
que son propensos a requerir revisión y mantenimiento significativo.
Así, en pocas palabras, usar jQuery (o utilizar la API de DOM directamente) para aplicaciones web de baja complejidad, donde la unidad de pruebas no es crítica y
usted quiere resultados inmediatos. Utilice angular de una sola página Web Apps, cuando se tiene tiempo para el diseño cuidadoso y la planificación y cuando se puede
controlar fácilmente el código HTML generado por el servidor.
Comparando angular para reaccionar y Vue.js

Hay dos principales competidores a Angular: Reaccionar y Vue.js. Hay algunas diferencias de bajo nivel entre ellos, pero, en su mayor parte,
todos estos marcos son excelentes, todos ellos funcionan de manera similar, y todos ellos se pueden utilizar para crear aplicaciones cliente
ricas y fluidas.
La principal diferencia entre estos marcos es la experiencia del desarrollador. Angular requiere el uso de mecanografiado para ser eficaz, por
ejemplo. Si está acostumbrado a utilizar un lenguaje como C # o Java, a continuación, mecanografiado será familiar y evita tener que tratar con algunas
de las rarezas del lenguaje JavaScript. Vue.js y reaccionar no requieren mecanografiado, pero se inclinan hacia la mezcla de HTML, JavaScript, CSS y
el contenido en un solo archivo, que no todo el mundo disfruta.
Mi consejo es simple: elegir el marco que te gusta el aspecto de la mayoría y cambiar a uno de los otros si no seguir adelante con ella.
Esto puede parecer un enfoque poco científico, pero no es una mala opción para hacer, y usted encontrará que muchos de los conceptos
básicos trasladará entre los marcos incluso si cambia.
Comprender el patrón MVC

El termino Modelo-Vista-Controlador ha estado en uso desde finales de 1970 y surgió a partir del proyecto Smalltalk en Xerox PARC en la que se concibe como
una forma de organizar algunas aplicaciones GUI tempranas. Algunos de los detalles finos del patrón original MVC estaba ligada a conceptos
Smalltalk-específicas, tales como pantallas y herramientas, pero las ideas más amplias siguen siendo aplicables a las aplicaciones, y están especialmente bien
adaptados a las aplicaciones web.
El patrón MVC se llevó el primer retención en el extremo del lado del servidor de desarrollo web, a través de herramientas como Ruby on
Rails y el Marco de ASP.NET MVC. En los últimos años, el patrón MVC se ha visto como una manera de manejar la creciente riqueza y
complejidad del desarrollo de la tela del lado del cliente, así, y es en este ambiente que ha surgido angular.
La clave para aplicar el patrón MVC es poner en práctica la premisa clave de una separación de intereses, en el que el modelo de datos en
la aplicación se desacopla de la lógica de negocio y presentación. En el desarrollo web clientside, esto significa la separación de los datos, la
lógica que opera en que los datos, y los elementos HTML utilizados para mostrar los datos. El resultado es una aplicación de cliente que es más
fácil de desarrollar, mantener y prueba.
Los tres principales bloques de construcción son la modelo, la controlador, y el ver. En figura 3-2 , puedes ver el
tradicional exposición del patrón MVC como se aplica al desarrollo del lado del servidor.
34
La Figura 3-2. La aplicación del lado del servidor del patrón MVC
Tomé esta figura de mi Pro Core ASP.NET MVC 2 libro, que describe la aplicación de servidor de Microsoft del patrón MVC. Se puede ver que
la expectativa es que el modelo se obtiene a partir de una base de datos y que el objetivo de la aplicación es para dar servicio a las peticiones HTTP
desde el navegador. Esta es la base para las aplicaciones web de ida y vuelta, que he descrito anteriormente.
Por supuesto, existe angular en el navegador, lo que conduce a un giro en el tema de MVC, como se ilustra en la figura 3-3 .
Figura 3-3. Una aplicación del lado del cliente del patrón MVC
La aplicación del lado del cliente del patrón MVC obtiene sus datos de componentes del lado del servidor, por lo general a través de un servicio
web REST, que describo en el Capítulo 24 . El objetivo del controlador y la vista es para operar en los datos en el modelo para llevar a cabo la
manipulación DOM a fin de crear y gestionar elementos HTML que el usuario puede interactuar. Esas interacciones son alimentados de nuevo al
controlador, cerrando el bucle para formar una aplicación interactiva.
Angular utiliza una terminología ligeramente diferente para sus bloques de construcción, lo que significa que el modelo MVC implementado utilizando miradas
angular más parecido a la figura 3-4 .
La Figura 3-4. La implementación angular del patrón MVC
La figura muestra la asignación básica de bloques de construcción angular con el patrón MVC. Para apoyar el patrón MVC, angular
ofrece un amplio conjunto de características adicionales, que describo en el libro.
35
■ Propina utilizando un marco del lado del cliente como angular no excluye el uso de un framework MVC del lado del servidor, pero usted encontrará
que un cliente adquiere angular parte de la complejidad que habría existido de otra manera en el servidor. Esto es generalmente una buena cosa, ya que
descarga el trabajo desde el servidor al cliente, y que permite a más clientes a ser apoyados con menos capacidad de los servidores.
PATRONES Y ZELOTES PATRÓN
Un buen patrón describe un método para resolver un problema que ha trabajado para otro la gente en otro
proyectos. Los patrones son recetas, en lugar de reglas, y que tendrán que adaptar cualquier patrón que se adapte a sus proyectos específicos,
al igual que un cocinero tiene que adaptar una receta para adaptarse a diferentes hornos e ingredientes. El grado en el que se sale de un patrón
debe ser impulsada por la necesidad y experiencia. El tiempo que ha pasado la aplicación de un patrón para proyectos similares informará a sus
conocimientos sobre lo que funciona y no funciona para usted. Si eres nuevo en un patrón o se están embarcando en un nuevo tipo de proyecto,
entonces usted debe pegarse lo más cerca posible al patrón hasta que realmente entender los beneficios y peligros que le esperan. Tenga
cuidado de no reformar su esfuerzo de toda desarrollo en torno a un patrón, sin embargo, ya que la interrupción de todo el barrido general causa
la pérdida de productividad que socavan cualquier resultado que usted esperaba el patrón daría.
Los patrones son herramientas flexibles y reglas no fijos, pero no todos los desarrolladores a entender la diferencia, y algunos se convierten fanáticos
patrón. Estas son las personas que pasan más tiempo hablando sobre el patrón de aplicarlo a proyectos y considerar cualquier desviación con
respecto a su interpretación del patrón a ser un delito grave. Mi consejo es que simplemente ignorar este tipo de persona, ya que cualquier
tipo de compromiso se acaba de chupar la vida de ustedes, y que nunca será capaz de cambiar de opinión. En cambio, sólo seguir adelante
con algo de trabajo y demostrar cómo una aplicación flexible de un patrón puede producir buenos resultados a través de la aplicación práctica
y la entrega.
Con esto en mente, se verá que sigo los amplios conceptos del modelo MVC en los ejemplos de este libro, pero que adaptar el modelo
para demostrar diferentes características y técnicas. Así es como yo trabajo en mis propios proyectos abarca las partes de los patrones
que proporcionan un valor y dejando de lado los que no lo hacen.
La comprensión de los modelos
Los modelos de la METRO en MVC-contener los datos que los usuarios trabajan con. Hay dos grandes tipos de modelos: Ver modelos, los cuales
representan sólo los datos transmitidos desde el componente de la plantilla, y modelos de dominio, que contienen los datos en un dominio de la
empresa, junto con las operaciones, transformaciones, y reglas para crear, almacenar y manipular los datos, referidos colectivamente como el lógica
modelo.
36
■ Propina Muchos desarrolladores nuevos en el patrón MVC se confunden con la idea de incluir lógica en el modelo de datos, en la creencia de
que el objetivo del patrón MVC es separar los datos de la lógica. Este es un error: el objetivo del marco MVC es dividir una aplicación en tres áreas
funcionales, cada uno de los cuales pueden contener tanto la lógica y datos. El objetivo no es eliminar la lógica del modelo. más bien, es para
asegurar que el modelo contiene la lógica única para crear y gestionar los datos del modelo.
No se puede leer una definición del patrón MVC sin tropezar con la palabra negocio, que es desafortunado porque muchos de desarrollo web va
mucho más allá de las aplicaciones de línea de negocio que dieron lugar a este tipo de terminología. Las aplicaciones de negocios siguen siendo una
gran parte del mundo del desarrollo, sin embargo, y si se está escribiendo, por ejemplo, un sistema de contabilidad de ventas, entonces su dominio del
negocio abarcaría el proceso relacionado con la contabilidad de ventas, y su modelo de dominio contendría los datos de las cuentas y la lógica por la
que se crean las cuentas, se almacenan y gestionan. Si va a crear un sitio web de vídeo gato, entonces usted todavía tiene un dominio de negocio; es
sólo que no podría encajar dentro de la estructura de una corporación. Su modelo de dominio contendría los videos de gatos y la lógica que va a crear,
almacenar y manipular esos vídeos.
Muchos modelos angular se empujan de manera efectiva a la lógica del lado del servidor y la invocan a través de un servicio web REST porque
hay poco apoyo a la persistencia de datos en el navegador, y es simplemente más fácil de obtener la información que necesita sobre el Ajax. Explico
cómo angular se puede utilizar con los servicios web RESTful en el capítulo 24 . Para cada elemento en el patrón MVC, describiré lo que debe y no debe
ser incluido. El modelo en una aplicación construida usando el patrón MVC debería
• Contendrá los datos de dominio
• Contienen la lógica para crear, administrar y modificar los datos de dominio (incluso si eso significa que la ejecución de la
lógica remota a través de servicios web)
• Proporcionar una API limpia que expone los datos y las operaciones sobre el mismo modelo El modelo no
debería
• Exponer los detalles de cómo se obtiene o se gestiona los datos del modelo (en otras palabras, los detalles del mecanismo
de almacenamiento de datos o el servicio web remoto no deben exponerse a controladores y vistas)
• Contener lógica que transforma el modelo basado en la interacción del usuario (ya que este es el trabajo del
componente)
• Contener lógica para la visualización de datos al usuario (este es el trabajo de la plantilla) Los beneficios de garantizar que el modelo
está aislado del controlador y las vistas son que usted puede probar su lógica más fácilmente (describo prueba de la unidad angular en el capítulo 29 ) Y
que la mejora y el mantenimiento de la aplicación en general es más simple y más fácil.
Los mejores modelos de dominio contienen la lógica para obtener y almacenar datos de forma persistente y la lógica para crear, leer, actualizar y
eliminar las operaciones (conocidos colectivamente como ABM) o modelos separados para consultar y modificar datos, conocido como el Comando de
consultas y Responsabilidad de reparto ( CQRS) patrón.
Esto puede significar el modelo contiene la lógica directamente, pero más a menudo el modelo contendrá la lógica para llamar a los servicios web RESTful
para invocar las operaciones de bases de datos del lado del servidor (que demuestro en el capítulo 8
cuando construyo una aplicación angular realista y que describo en detalle en el capítulo 24 ).
37
VS. ANGULAR AngularJS
Los AngularJS original fue popular, pero difícil de usar y requiere que los desarrolladores para hacer frente a algunas de las características
arcanos e implementadas por extraño que hicieron desarrollo de aplicaciones web más complejo de lo que debía ser. Angular, empezando
angular 2 y continuando hasta el 6 de liberación angular descrito en este libro, es una reescritura completa que es más fácil de aprender, es más
fácil trabajar con, y es mucho más consistente. Todavía es un marco complejo, ya que el tamaño de este libro muestra, pero la creación de
aplicaciones web con angular es una experiencia más agradable que con AngularJS.
Las diferencias entre AngularJS y angular son tan profundos que no he incluido ningún detalle de migración en este libro. Si usted tiene
una aplicación AngularJS que desea actualizar a angular, a continuación, puede utilizar el adaptador de actualización, que permite que el
código de ambas versiones del marco de coexistir en la misma aplicación. Ver https://angular.io/guide/upgrade para detalles. Esto puede
facilitar la transición, aunque AngularJS y angular son tan diferentes que mi consejo es hacer una salida limpia y cambiar a angular para
una reescritura tierra-para arriba. Esto no siempre es posible, por supuesto, especialmente para aplicaciones complejas, pero el proceso
de migración, además de administrar la convivencia es muy difícil de dominar y puede conducir a problemas que son difíciles de localizar y
corregir.
La comprensión de controladores / Componentes

Reguladores de corriente, que se conocen como componentes en Angular, son el tejido conectivo en una aplicación web angular, actuando como
conductos entre el modelo de datos y puntos de vista. Componentes añadir lógica dominio de negocio requerido para presentar algún aspecto del
modelo y realizar operaciones en él. Un componente que sigue el patrón MVC debería
• Contienen la lógica necesaria para configurar el estado inicial de la plantilla
• Contienen la lógica / comportamientos requeridos por la plantilla para presentar los datos a partir del modelo
• Contienen la lógica / comportamientos obligados a actualizar el modelo basado en la interacción del usuario Un componente no
debería
• Contiene la lógica que manipula el DOM (que es el trabajo de la plantilla)
• Contiene la lógica que gestiona la persistencia de datos (es decir el trabajo del modelo)
Comprender Ver datos

El modelo de dominio no es el único de datos en una aplicación angular. Los componentes pueden crear ver datos ( también conocido como datos de vista del
modelo o modelos de vista) para simplificar las plantillas y sus interacciones con el componente.
La comprensión de Vistas / Plantillas

Vistas, que se conocen como plantillas en angular, se definen usando elementos HTML que se han mejorado por enlaces de datos. Se trata de los
enlaces de datos que hacen angular tan flexible, y transformar los elementos HTML en la base de las aplicaciones web dinámicas. Explico los
diferentes tipos de enlaces de datos que proporciona angular en detalle en la Parte 2. Plantillas debería
• Contienen la lógica y de marcado requerido para presentar los datos al usuario
38
Plantillas no debería
• Contener lógica compleja (esto es mejor colocado en un componente o uno de los otros bloques de construcción
angular, como las Directivas, servicios, o tuberías)
• Contener lógica que crea, almacena, manipula o las plantillas de modelo de dominio puede contener la lógica, sino que debe ser
simple y se usa con moderación. Poner nada pero las llamadas a métodos más simples o expresiones en una plantilla hace que la aplicación
general más difíciles de probar y mantener.
Descripción de los servicios REST

La lógica de los modelos de dominio en aplicaciones angular es a menudo dividido entre el cliente y el servidor. El servidor contiene el almacén persistente,
normalmente una base de datos, y contiene la lógica para la gestión de la misma. En el caso de una base de datos SQL, por ejemplo, la lógica necesaria
incluiría la apertura de conexiones con el servidor de base de datos, ejecutar consultas SQL y procesar los resultados para que puedan ser enviados al
cliente.
Usted no desea que el código del lado del cliente que accede al almacén de datos directamente-hacerlo crearía una estrecha conexión entre el
cliente y el almacén de datos, que complicaría la prueba de la unidad y hacer que sea difícil para cambiar el almacén de datos sin también realizar cambios
en el codigo del cliente.
Al utilizar el servidor para mediar el acceso al almacén de datos, se evita estrecho acoplamiento. La lógica en el cliente es responsable de que los
datos hacia y desde el servidor y se desconocen los detalles de cómo se almacena o se accede detrás de las escenas que los datos.
Hay un montón de maneras de pasar datos entre el cliente y el servidor. Uno de los más comunes es el uso de Asynchronous JavaScript y XML ( Ajax)
peticiones para llamar a código del lado del servidor, conseguir el servidor para enviar JSON y hacer cambios a los datos mediante formularios HTML.
Este enfoque puede funcionar bien y es la base de servicios web RESTful, que utilizan la naturaleza de las peticiones HTTP para realizar
operaciones CRUD en los datos.
■ Nota El descanso es un estilo de API en lugar de una especificación bien definida, y hay desacuerdo acerca de qué es exactamente lo que hace que
un servicio web REST. un punto de controversia es que los puristas no consideran servicios web que devuelven JSON ser reparador. al igual que
cualquier desacuerdo sobre un patrón arquitectónico, las razones de su desacuerdo son arbitrarias y sin brillo y no del todo vale la pena preocuparse. Por
lo que yo soy, servicios JSON interesadas son reparador, y los trato como tal en este libro.
En un servicio web REST, la operación que se está solicitando se expresa a través de una combinación del método HTTP y la URL.
Así, por ejemplo, imaginar una URL como la siguiente:
http://myserver.mydomain.com/people/bob
No hay ninguna especificación URL estándar para un servicio web REST, pero la idea es hacer que el URL fácil de entender, de manera
que es obvio lo que se refiere a la URL. En este caso, es obvio que hay una colección de objetos de datos llamada gente y que el URL se refiere
al objeto específico dentro de esa colección cuya identidad es mover.
39
■ Propina No siempre es posible crear este tipo de URLs evidentes por sí mismas en un proyecto real, pero se debe hacer un gran esfuerzo para
mantener las cosas simples y no exponer la estructura interna del almacén de datos a través de la URL (porque esto es sólo otro tipo de acoplamiento
entre componentes). Mantenga sus URL tan simple como sea posible y mantener las asignaciones entre el formato de URL y la estructura de los datos
dentro del servidor.
La URL identifica el objeto de datos que quiero para operar en, y el método HTTP especifica qué operación Quiero ser
realizado, como se describe en la Tabla 3-1 .
Tabla 3-1. Las operaciones comúnmente aplicados en respuesta a los métodos HTTP
Método Descripción
OBTENER Recupera el objeto de datos especificado por la URL
PONER Actualiza el objeto de datos especificado por la URL
ENVIAR Crea un nuevo objeto de datos, típicamente usando los valores de datos de formulario como
los campos de datos
BORRAR Elimina el objeto de datos especificado por la URL
Usted no tiene que utilizar los métodos HTTP para realizar las operaciones que describo en la tabla. Una variación común es que el método
POST se utiliza a menudo para servir una doble función y actualizará un objeto si existe y crear uno si no, lo que significa que no se utiliza el método
PUT. Describo el apoyo que ofrece angular para el Ajax y para que sea fácil trabajar con los servicios de descanso en el capítulo 24 .
MÉTODOS HTTP idempotente
Se puede implementar cualquier asignación entre los métodos HTTP y operaciones en el almacén de datos, aunque recomiendo que
empiece lo más cerca posible a la convención que describo en la tabla. Si se sale de la aproximación normal, asegúrese de que usted honra
la naturaleza de los métodos HTTP como se define en la especificación HTTP. El método GET es nullipotent, lo que significa que las
operaciones que se realizan en respuesta a este método sólo debe recuperar los datos y no modificarlo. Un navegador (o cualquier
dispositivo intermedio, tal como un proxy) espera a ser capaz de hacer repetidamente una solicitud GET sin alterar el estado del servidor
(aunque esto no significa que el estado del servidor no va a cambiar entre peticiones GET idénticos debido a las peticiones de otros
clientes). Los métodos PUT y Borrado idempotente, lo que significa que múltiples solicitudes idénticas deben tener el mismo efecto que una
única solicitud. Así, por ejemplo, usando el método de borrado con el / personas / bob
url debe eliminar la mover objeto de la gente colección para la primera solicitud y luego no hacer nada para solicitudes posteriores. (Una vez
más, por supuesto, esto no puede ser cierto si otro cliente vuelve a crear el mover Object). El método POST no es ni nullipotent ni
idempotente, por lo que una optimización reparador común es manejar la creación de objetos y actualizaciones. Si no hay mover de objetos,
utilizando el método POST creará una, y la posterior POST peticiones a la misma URL actualizará el objeto que se ha creado.
40
Todo esto es sólo importante si se está implementando un servicio web REST. Si usted está escribiendo un cliente que consuma un servicio
REST, a continuación, sólo tiene que saber qué operación de datos cada método HTTP corresponde a. I demuestran que consumen este tipo
de servicio en el capítulo 8 y describir las características angulares para las peticiones HTTP con más detalle en el capítulo 24 .
Errores comunes de diseño

En esta sección, se describen las tres trampas de diseño más comunes que encuentro en proyectos angular. Estos no son errores de codificación, sino
más bien problemas con la forma general de la aplicación web que impiden que el equipo del proyecto de conseguir los beneficios que angular y el patrón
MVC pueden proporcionar.
Poner la lógica en el lugar equivocado

El problema más común es la lógica de poner en el componente mal de tal manera que socava la separación MVC de las preocupaciones.
Aquí están las tres variedades más comunes de este problema:
• Poner la lógica de negocio en las plantillas, en lugar de en los componentes
• Poner la lógica de dominio en los componentes, en lugar de en el modelo
• Poner la lógica de almacenamiento de datos en el modelo cliente cuando se utiliza un servicio REST Estas son cuestiones complicadas
porque se toman un tiempo para manifestarse como problemas. La aplicación todavía funciona, pero será más difícil para mejorar y mantener en el tiempo. En
el caso de la tercera variedad, el problema se pondrán de manifiesto solamente cuando se cambia el almacén de datos (que rara vez ocurre hasta que un
proyecto es maduro y ha crecido más allá de sus proyecciones de usuario inicial).
■ Propina Obtener una idea de donde la lógica debe ir toma un poco de experiencia, pero podrá detectar problemas antes si está utilizando la unidad de
pruebas debido a que las pruebas que tiene que escribir para cubrir la lógica no se ajuste perfectamente en el patrón MVC. Describo el soporte angular para
las pruebas unitarias en el capítulo 29 .
Saber dónde poner la lógica se convierte en una segunda naturaleza a medida que más experiencia en el desarrollo angular, pero
aquí están las tres reglas:
• lógica plantilla debe preparar los datos solamente para la exhibición y nunca modificar el modelo.
• lógica de componentes no deberían crear directa, actualizar o eliminar datos del modelo.
• Las plantillas y componentes nunca deben acceder directamente al almacén de datos. Si se mantiene esto en
mente a medida que desarrolle, se dirigirá fuera de los problemas más comunes.
Que adopta el formato de datos del almacén de datos
El siguiente problema surge cuando el equipo de desarrollo se construye una aplicación que depende de los caprichos de la memoria de datos del lado del servidor.
En una aplicación angular bien diseñado, que obtiene sus datos de un servicio REST, que es el trabajo del servidor para ocultar los detalles de implementación de
almacenamiento de datos y presentar al cliente los datos en un formato de datos adecuado que favorece la simplicidad en el cliente. Decidir cómo el cliente necesita
para representar fechas, por ejemplo, y luego asegurarse de que utilice ese formato dentro de los datos de almacenamiento y si el almacén de datos no es compatible
con ese formato nativo, entonces es el trabajo del servidor para realizar la traducción.
41
Sólo el conocimiento suficiente para causar problemas
Angular es un marco complejo que puede ser desconcertante hasta que se acostumbre ella. Hay un montón de diferentes bloques de construcción disponibles, y
pueden combinarse de diferentes maneras para lograr resultados similares. Esto hace que el desarrollo angular flexible y significa que desarrollar su propio estilo
de resolución de problemas mediante la creación de combinaciones de características que se adapten a su proyecto y el estilo de trabajo.
Convertirse en experto en angular lleva tiempo. Existe la tentación de saltar a crear sus propios proyectos antes de la comprensión de cómo las
diferentes partes del angular encajan entre sí. Es posible producir algo que funciona sin entender realmente por qué funciona, y eso es una receta para
el desastre cuando se necesita hacer cambios. Mi consejo es ir lento y tomar el tiempo para entender todas las características que ofrece angular. Por
supuesto, empezar a crear proyectos temprano, pero asegúrese de que realmente entiende cómo trabajan y estar preparados para hacer cambios a
medida que encontrar mejores maneras de lograr los resultados requeridos.
Resumen
En este capítulo, he proporcionado un contexto para angular. Le expliqué cómo angular soporta el patrón MVC para el desarrollo de aplicaciones, y yo di una
breve descripción de descanso y la forma en que se utiliza para expresar las operaciones de datos a través de peticiones HTTP. Terminé el capítulo con la
descripción de los tres problemas más comunes de diseño en proyectos angular. En el siguiente capítulo, proporciono una cartilla rápida para HTML y CSS
del marco Bootstrap que yo uso para los ejemplos de este libro.
42
CAPÍTULO 4
Un cebador de HTML y CSS
Los desarrolladores vienen al mundo del desarrollo de aplicaciones web a través de muchos caminos y no siempre se basan en las tecnologías
básicas que las aplicaciones web se basan en. En este capítulo, se hará una breve cartilla para HTML y presento la biblioteca Bootstrap CSS, que
utilizo el estilo de los ejemplos de este libro. en los capítulos 5 y 6 , Presento los conceptos básicos de JavaScript y mecanografiado y le dará la
información que necesita para entender los ejemplos en el resto del libro. Si usted es un desarrollador con experiencia, puede omitir estos capítulos de
imprimación y saltar al Capítulo 7 , Donde uso angular para crear una aplicación más compleja y realista.
Preparación del Ejemplo de proyecto

Para este capítulo, sólo necesito un proyecto ejemplo sencillo. Empecé creando una carpeta llamada HtmlCssPrimer,
creado un archivo llamado package.json dentro de ella, y se añade el contenido de muestra en el listado 4-1 .
■ Propina Puede descargar el proyecto de ejemplo para este capítulo, y para todos los demás capítulos de este libro: de https://github.com/Apress/pro
.
Listado 4-1. Los contenidos del archivo en la carpeta package.json HtmlCssPrimer
{
"dependencias": { "Bootstrap":
"4.1.1"},
"devDependencies": {
"lite-servidor": ""} 2.3.0,
"guiones": {
"Inicio": "NGP plazo light", "ligero":
"lite-servidor"}}

Capítulo 4 ■ un HTML y CSS imprimación
Ejecute el comando siguiente en el HtmlCssPrimer carpeta para descargar e instalar los paquetes especificados en la NGP package.json
expediente:
NPM instalar
A continuación, he creado un archivo llamado index.html en el HtmlCssPrimer carpeta y añade el contenido se muestra en el Listado 4-2 .
Listado 4-2. Los contenidos del archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

charset = "UTF-8" />
<Link href = "node_modules / bootstrap / dist / css / bootstrap.min.css"
rel = "stylesheet" /> </
head>

<Clase de botón = "btn btn-primaria mt-1"> Añadir </ button> </ div>

<Thead>
<Tr>
Listo </ th> </ tr> </ thead> <tbody>
zapatos </ td> <td> n </ td> </ tr> <tr > <td> recoger las entradas </ td> <td> Sí </
td> </ tr> <tr> <td> Llamada Joe </ td> <td> n </ td> </ tr> </ tbody> </ table> </
body> </ html>
Este es el contenido HTML que utilicé en el capítulo 2 para burlarse de la apariencia de la aplicación de ejemplo. Ejecute el comando
siguiente en el HtmlCssPrimer carpeta para iniciar el servidor HTTP de desarrollo:
inicio NPM
Una nueva pestaña o ventana del navegador se abrirá y mostrará el contenido de la figura 4-1 .
44
La Figura 4-1. Ejecución de la aplicación de ejemplo
comprensión HTML
En el corazón de HTML es el elemento, que indica al navegador qué tipo de contenido representa cada parte de un documento HTML.
Aquí es un elemento del ejemplo de documento HTML:
...
<Td> compra flores </ td>
...
Como se ilustra en la figura 4-2 , Este elemento tiene tres partes: la etiqueta de inicio, la etiqueta final, y el contenido.
La Figura 4-2. La anatomía de un simple elemento HTML
45
los nombre de este elemento (también referido como el nombre de la etiqueta o simplemente la etiqueta) es td, y se indica al navegador que el contenido
entre las etiquetas debe ser tratada como una celda de la tabla. Se empieza un elemento colocando el nombre de la variable entre paréntesis angulares (<y>
caracteres) y termina un elemento utilizando la etiqueta de una manera similar, excepto que también se añade a / tras el corchete izquierdo angular (<). Lo que
aparece entre las etiquetas es el contenido del elemento, que puede ser texto (como Comprar flores en este caso) u otros elementos HTML.
La comprensión de los elementos Void
La especificación HTML incluye elementos que no están permitidos para contener contenido. Estos se llaman vacío
o de cierre automático elementos, y están escritas sin una etiqueta de final por separado, como este:
...
<Input />
...
Un elemento vacío se define en una sola etiqueta, y se agrega un carácter / antes de la llave pasado (el carácter>). los entrada elemento es el elemento
más utilizado vacío, y su propósito es permitir que el usuario proporcione de entrada, a través de un campo de texto, botón de radio, o la casilla de
verificación. Usted verá un montón de ejemplos de trabajo con este elemento en los siguientes capítulos.
Descripción de atributos
Se puede proporcionar información adicional al navegador mediante la adición atributos a sus elementos. Aquí es un elemento con un
atributo del documento ejemplo:
...
<link href = "node_modules / bootstrap / dist / css / bootstrap.min.css" rel = "stylesheet" />
...
Esto es un enlazar elemento, e importa el contenido en el documento. Hay dos atributos, que he subrayado por lo que son más fáciles
de ver. Atributos siempre se definen como parte de la etiqueta de inicio, y estos atributos tienen una nombre y una valor.
Los nombres de los dos atributos de este ejemplo son href y rel. Para el enlazar elemento, el href
atributo especifica el contenido de importar, y el rel atributo le dice al navegador qué tipo de contenido que es. Los atributos de este enlazar elemento de
decirle al navegador para importar el bootstrap.min.css presentar y tratarlo como una hoja de estilo, que es un archivo que contiene los estilos CSS.
Aplicación de atributos sin valores

No todos los atributos se aplican con un valor; simplemente agregarlas a un elemento indica al navegador que desea un cierto tipo de
comportamiento. Este es un ejemplo de un elemento con un atributo tal (no a partir del documento ejemplo, acabo de componer este elemento de
ejemplo):
...
<Clase de entrada = "forma-control" requerido />
...
Este elemento tiene dos atributos. El primero es clase, la cual se le asigna un valor al igual que el ejemplo anterior. El otro atributo es sólo
la palabra necesario. Este es un ejemplo de un atributo que no necesita un valor.
46
Citando Valores literales en Atributos

Angular se basa en los atributos de elemento HTML para aplicar una gran cantidad de su funcionalidad. La mayor parte del tiempo, los valores de los atributos se
evalúan como expresiones de JavaScript, como con este elemento, tomado del capítulo 2 :
. . . <Td [ ngSwitch] = "item.done">
...
El atributo aplica a la td elemento dice angular para leer el valor de una propiedad llamada hecho en un objeto que ha sido asignado
a una variable llamada ít. Habrá ocasiones en las que es necesario proporcionar un valor específico en lugar de tener angular leer un
valor del modelo de datos, y esto requiere adicional citando a decir angular que está tratando con un valor literal, como este:
...
<Td [ngSwitch] = "' Manzanas ">
...
El valor del atributo contiene la cadena manzanas, que se cita en las dos comillas simples y dobles. Cuando angular evalúa el valor de
atributo, se verá las comillas simples y procesar el valor como una cadena literal.
La comprensión del contenido del elemento
Los elementos pueden contener texto, pero también pueden contener otros elementos, como la siguiente:
...
<Thead>
<Tr>
...
Los elementos en un documento HTML forman una jerarquía. los html elemento contiene la cuerpo elemento, que contiene los elementos de contenido,
cada uno de los cuales puede contener otros elementos, y así sucesivamente. En el perfil, la
thead elemento contiene tr elementos que, a su vez, contienen º elementos. Disposición de los elementos es un concepto clave en HTML, ya que
imparte el significado del elemento externo a las contenidas en su interior.
La comprensión de la estructura del documento

Hay algunos elementos clave que definen la estructura básica de un documento HTML: la DOCTYPE, html, cabeza,
y cuerpo elementos. Aquí es la relación entre estos elementos con el resto del contenido eliminado:
<! DOCTYPE html>

<html> <head>
... contenido de cabeza ...

</ Head>
<body>
... contenido del cuerpo ...
</ Body> </
html>
47
Cada uno de estos elementos tiene un papel específico que desempeñar en un documento HTML. los DOCTYPE elemento indica al navegador que este
es un documento HTML y, más concretamente, de que se trata de una HTML5 documento. Las versiones anteriores de HTML requiere información adicional.
Por ejemplo, aquí está el DOCTYPE elemento de un documento HTML 4:
...
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"
"Http://www.w3.org/TR/html4/strict.dtd">
...
los html elemento denota la región del documento que contiene el contenido HTML. Este elemento contiene siempre los otros dos elementos
estructurales clave: cabeza y cuerpo. Como he explicado al comienzo del capítulo, no voy a cubrir los elementos HTML individuales. Hay también
muchos de ellos, y describir por completo HTML5 me llevaron más de 1.000 páginas de mi libro de HTML. Dicho esto, la tabla 4-1 proporciona una
breve descripción de los elementos I utilizados en la index.html archivo en el listado 4-2 para ayudarle a entender cómo los elementos le dicen al
navegador qué tipo de contenido que representan.
Descripción del modelo de objeto de documento
Cuando el navegador carga y procesa un documento HTML, se crea la Document Object Model
(DOM). El DOM es un modelo en el que se utilizan objetos JavaScript para representar cada elemento en el documento, y el DOM es el
mecanismo por el cual se puede enganchar mediante programación con el contenido de un documento HTML.
Rara vez se trabaja directamente con el DOM en angular, pero es importante entender que el navegador mantiene un modelo vivo del documento
HTML representado por objetos JavaScript. Cuando angular modifica estos objetos, el navegador se actualiza el contenido que muestra para
reflejar las modificaciones. esta es una de las bases fundamentales de las aplicaciones web. si no fuéramos capaces de modificar el DOM, que
no sería capaz de crear aplicaciones web del lado del cliente.
48
Tabla 4-1. Elementos HTML utilizadas en el ejemplo de documento
Elemento Descripción
DOCTYPE Indica el tipo de contenido en el documento
cuerpo Denota la región del documento que contiene los elementos de contenido
botón Denota un botón; a menudo se utiliza para enviar un formulario al servidor
div Un elemento genérico; a menudo se utiliza para añadir estructura a un documento con fines de presentación
h3 Denota una cabecera
cabeza Denota la región del documento que contiene los metadatos
html Denota la región del documento que contiene HTML (que es por lo general todo el documento)
entrada Denota un campo usado para reunir a un único elemento de datos del usuario
enlazar contenido de las importaciones en el documento HTML
meta Proporciona datos descriptivos sobre el documento, tales como la codificación de caracteres
mesa Denota una mesa, que sirve para organizar el contenido en filas y columnas
tbody Denota el cuerpo de la tabla (en contraposición a la cabecera o pie de página)
td Denota una célula contenido en una fila de la tabla
º Denota una celda de encabezado en una fila de la tabla
thead Denota el encabezado de una tabla
título Denota el título del documento; utilizado por el navegador para establecer el título de la ventana o pestaña
tr Denota una fila de una tabla
Bootstrap comprensión
elementos HTML le dicen al navegador qué tipo de contenido que representan, pero que no proporcionan ninguna información acerca de la forma en que el
contenido se debe mostrar. La información sobre cómo mostrar los elementos se proporciona el uso de
Hojas de estilo en cascada ( CSS). CSS se compone de un conjunto completo de propiedades que se puede utilizar para configurar todos los aspectos de la apariencia de
un elemento y un conjunto de selectores que permiten aquellas propiedades que han de aplicarse.
Uno de los principales problemas con CSS es que algunos navegadores interpretan propiedades de forma ligeramente diferente, lo que puede dar lugar a
variaciones en la forma en que el contenido HTML se visualiza en diferentes dispositivos. Puede ser difícil de localizar y corregir estos problemas, y los marcos de CSS
han surgido para ayudar a los desarrolladores de aplicaciones web de estilo de su contenido HTML de una manera simple y consistente.
El marco más ampliamente utilizado es Bootstrap, que consiste en un conjunto de clases CSS que se puede aplicar a los elementos de estilo
de ellos consistente y código JavaScript que realiza una mejora adicional. Yo uso los estilos CSS Bootstrap en este libro porque me dejaron Estilo
mis ejemplos sin tener que definir estilos personalizados en cada capítulo. Yo no uso las características de JavaScript Bootstrap en absoluto en este
libro.
Yo no quiero entrar en demasiados detalles acerca de Bootstrap, porque no es el tema de este libro, pero yo quiero darle suficiente
información para que pueda identificar qué partes de un ejemplo son rasgos angulosos y que son un estilo Bootstrap . Ver http://getbootstrap.com
para más detalles de las características que ofrece Bootstrap.
49
La aplicación de clases básicas Bootstrap
estilos de arranque se aplican a través de la clase atributo, que se utiliza para agrupar elementos relacionados entre sí. los
clase atributo no es sólo utilizada para aplicar estilos CSS, pero es el uso más común, y que se basa la forma en que Bootstrap y marcos
similares operan. Aquí es un elemento HTML con una clase atributo, tomada de la index.html expediente:
...
<botón class = "btn btn-primaria mt-1"> Añadir </ botón>
...
los clase atributo asigna el botón elemento a tres clases, cuyos nombres están separados por espacios:
BTN, btn-primaria, y mt-1. Estas clases corresponden a los estilos definidos por Bootstrap, como se describe en la Tabla 4-2 .
Tabla 4-2. Las clases de elementos de tres botones
Nombre Descripción
BTN Esta clase corresponde el estilo básico de un botón. Se puede aplicar a botón o una elementos para proporcionar una
apariencia consistente.
btn-primaria Esta clase corresponde un contexto de estilo para proporcionar una señal visual sobre el propósito del botón.
Vea la sección “Uso de las clases contextuales”.
mt-1 Esta clase añade una brecha entre la parte superior del elemento y el contenido que lo rodea. Vea la sección “Uso de
margen y el relleno”.
Utilizar clases contextuales

Una de las principales ventajas de utilizar un marco CSS como Bootstrap es simplificar el proceso de creación de un tema constante a través de una
aplicación. Bootstrap define un conjunto de contextos de estilo que se utilizan para estilo elementos relacionados de forma coherente. Estos contextos, que se
describen en la Tabla 4-3 , Se utilizan en los nombres de las clases que se aplican a los elementos de estilos Bootstrap.
Tabla 4-3. El Contextos Estilo Bootstrap
Nombre Descripción
primario Este contexto se utiliza para indicar la acción principal o área de contenido.
secundario Este contexto se utiliza para indicar las áreas de soporte de contenido.
éxito Este contexto se utiliza para indicar un resultado exitoso.
info Este contexto se utiliza para presentar información adicional.
advertencia Este contexto se utiliza para presentar advertencias.
peligro Este contexto se utiliza para presentar serias advertencias.
apagado Este contexto se utiliza para el contenido de restar importancia.
oscuro Este contexto se utiliza para aumentar el contraste mediante el uso de un color oscuro.
blanco Este contexto se utiliza para aumentar el contraste mediante el uso de blanco.
50
Bootstrap proporciona clases que permiten a los contextos de estilo para ser aplicados a diferentes tipos de elementos. Aquí está el primario contexto
aplica a la h3 elemento, tomada de la index.html archivo creado al comienzo del capítulo:
. . . <h3 class = "bg-primaria texto blanco-p-3"> Adam para hacer la lista </ h3>
...
Una de las clases que el elemento ha sido asignado a es bg-primaria, los estilos que el color de fondo de un elemento utilizando el
color del contexto estilo. Aquí está el mismo contexto estilo aplicado a una botón
elemento:
...
<Clase de botón = "btn btn-primaria MT-1" > Añadir </ botón>
...
los btn-primaria estilos de clase de un elemento de anclaje botón o el uso de colores del estilo de contexto. Usando el mismo contexto el estilo de
diferentes elementos se asegurará de su aparición es coherente y complementaria, como se muestra en la figura 4-3 , Lo que pone de relieve los elementos a
los que se ha aplicado el contexto estilo.
La Figura 4-3. Uso de contextos de estilo para la consistencia
El uso de margen y el relleno

Bootstrap incluye un conjunto de clases de utilidad que se utilizan para agregar relleno (espacio entre el borde de un elemento interior y su
contenido) y el margen (espacio entre el borde de un elemento y los elementos circundantes). La ventaja de utilizar estas clases es que se aplican
una cantidad consistente de separación en toda la aplicación.
Los nombres de estas clases siguen un patrón bien definido. Aquí está el cuerpo elemento de la index.html
archivo creado al comienzo del capítulo, a la que se ha aplicado el margen:
...
<Clase cuerpo =" m-1" >
...
51
Las clases que se aplican margen y el relleno de los elementos siguen un esquema de nomenclatura bien definida: en primer lugar, la carta m ( para el margen) o pag
( para el relleno), a continuación, un guión, y después se debe aplicar un número que indica la cantidad de espacio ( 0 sin separación, o 1, 2, o 3 para cantidades crecientes).
También puede agregar una carta de aplicar espaciado sólo para partes específicas, por lo t para la parte superior, segundo para la parte inferior, l para la izquierda, r por la
derecha, X para la izquierda y la derecha, y y para arriba y abajo).
Para ayudar a poner este esquema en el contexto, la tabla 4-4 enumera las combinaciones utilizadas en el index.html expediente.
Tabla 4-4. Muestra bootstrap Margen y clases de relleno
Nombre Descripción
p-1 Esta clase corresponde a carnes de todos los bordes de un elemento.
m-1 Esta clase corresponde al margen de todos los bordes de un elemento.
mt-1 Esta clase corresponde margen hasta el borde superior de un elemento.
MB-1 Esta clase corresponde margen hasta el borde inferior de un elemento.
Modificación de Elementos Tamaños
Puede cambiar la forma en que algunos elementos son de estilo mediante el uso de una clase de modificación del tamaño. Éstos se especifican mediante la combinación
de un nombre de clase básica, un guión y lg o sm. en el Listado 4-3 , Yo he añadido botón elementos a la
index.html presentar, utilizando las clases de modificación de tamaño que proporciona Bootstrap para los botones.
Listado 4-3. Utilizar clases de modificación botón de tamaño en el archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

head>

<Clase de botón = "btn btn-lg-BTN primaria mt-1"> Añadir </ botón>
<Clase de botón = "btn btn-primaria mt-1"> Añadir </ botón>
<Clase de botón = "btn btn btn-sm-primaria mt-1"> Añadir </ botón>
</ Div>

<Thead>
<Tr>
52
<Tbody>
zapatos </ td> <td> n </ td> </ tr> <tr > <td> recoger las entradas </ td> <td> Sí </
td> </ tr> <tr> <td> Llamada Joe </ td> <td> n </ td> </ tr> </ tbody> </ table> </
body> </ html>
los BTN-lg clase crea un botón grande, y el BTN-sm clase crea un pequeño botón. La omisión de una clase de tamaño utiliza el tamaño predeterminado para el
elemento. Tenga en cuenta que yo soy capaz de combinar una clase de contexto y una clase de tamaño. modificaciones de clase Bootstrap trabajan juntos para darle
un control completo sobre cómo están decoradas elementos, creando el efecto se muestra en la figura 4-4 .
La Figura 4-4. Cambiar el tamaño de elemento
El uso de Bootstrap para mesas de estilo
Bootstrap incluye soporte para el peinado mesa elementos y sus contenidos, lo cual es una característica que utilizo en este libro. Mesa 4-5 enumera las
clases principales de arranque para trabajar con tablas.
Tabla 4-5. Las clases Bootstrap CSS para las tablas
Nombre Descripción
mesa Se aplica un estilo general a una mesa elemento y sus filas
tabla de rayas Se aplica fila alternativo creación de bandas a las filas de la mesa cuerpo
tabla-confinado Se aplica a todas las fronteras filas y columnas
mesa vuelo estacionario Muestra un estilo diferente cuando se pasa el ratón sobre una fila en la tabla
tabla-sm Reduce el espacio en la mesa para crear un diseño más compacto
53
Todas estas clases se aplican directamente a la mesa elemento, como se muestra en el Listado 4-4 , Lo que pone de relieve la
clases de rutina de carga aplicados a la tabla en el index.html expediente.
Listado 4-4. El uso de Bootstrap para mesas de estilo
...
<table class = "mesa de ping-rayas mesa bordeada">
<Thead>
<Tr>
zapatos </ td> <td> n </ td> </ tr> <tr > <td> recoger las entradas </ td> <td>
Sí </ td> </ tr> <tr> <td> Llamada Joe </ td> <td> n </ td> </ tr> </ tbody> </
table>
...
■ Propina Tenga en cuenta que he utilizado el thead elemento de la hora de definir las tablas en venta 4-4 . los navegadores le
agregar automáticamente cualquier tr elementos que son descendientes directos de mesa elementos a una tbody elemento, si uno no ha sido utilizado.
Obtendrá resultados extraños si se basan en este comportamiento cuando se trabaja con Bootstrap porque la mayoría de las clases CSS que se aplican
a la mesa estilos elemento de hacer que se añadan a los descendientes de la tbody elemento.
El uso de Bootstrap para crear formularios
Bootstrap incluye styling para elementos de forma, lo que les permite ser de estilo consistentemente con otros elementos en la aplicación. en el
Listado 4-5 , He ampliado los elementos del formulario en la index.html y presentar una retirada temporal de la tabla.
Listado 4-5. Definición de Elementos de formulario adicional en el archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

head>
<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3> <form>
<Div class = "forma-grupo">
54
<Label> Tarea </ label>

<Input class = "forma-control" /> </ div>

<Label> Localización </ label> <input class =
"forma-control" /> </ div>

<Input type = "casilla de verificación" />
<label> Hecho </ label> </ div>
<Clase de botón = "btn btn-primaria"> Añadir </ button> </ form>
</ Body> </

html>
El diseño básico de las formas se logra mediante la aplicación de la forma-grupo clase a una div elemento que contiene una etiqueta y un entrada elemento,
donde se le asigna el elemento de entrada a la forma de control de clase. Bootstrap estilos los elementos para que la etiqueta se muestra por encima de la entrada
elemento y el entrada elemento ocupa 100 por ciento del espacio horizontal disponible, como se muestra en la figura 4-5 .
La Figura 4-5. elementos de formulario Styling
El uso de Bootstrap para crear cuadrículas
Bootstrap ofrece clases de estilo que pueden ser utilizados para crear diferentes tipos de diseño de cuadrícula, que van de uno a doce columnas y con el apoyo
para los diseños de respuesta, en donde la disposición de los cambios de la red basada en el ancho de la pantalla. Listado 4-6 reemplaza el contenido del archivo
HTML de ejemplo para demostrar la característica parrilla.
55
Listado 4-6. El uso de un Bootstrap cuadrícula en el archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

rel = "stylesheet" />
<Style>
. row> div {
frontera: lightgrey sólido 1px; padding: 10px;
background-color: Aliceblue; margen: 5px 0; }
</ Style>
</ Head>
<H3> Diseño de cuadrícula </ h3> <div
class = "contenedor">
<Div class = "fila">

<Div class = "col-1"> 1 </ div> <div
class = "col-1"> 1 </ div> <div class =
"col-2"> 2 </ div> <div class =" col-2 ">
2 </ div> <div class =" col-6" > 6 </ div>
</ div>

class = "col-4"> 4 </ div> <div class =
"col-5"> 5 </ div> </ div>

class = "col-6"> 6 </ div> </ div>

class = "col-1"> 1 </ div> </ div>

<Div class = "col-12"> 12 </ div> </ div>
</ div>
</ Body> </

html>
56
El sistema de diseño de cuadrícula Bootstrap es fácil de usar. Un alto nivel div elemento se le asigna a la envase
clase (o la recipiente de fluido clase si usted quiere que abarcan todo el espacio disponible). Se especifica una columna mediante la aplicación de la fila clase
a una div elemento, que tiene el efecto de crear el diseño de la red para el contenido que la div elemento contiene.
Cada fila define 12 columnas, y se especifica el número de columnas de cada elemento secundario ocupará mediante la asignación de una clase
cuyo nombre es columna- seguido por el número de columnas. Por ejemplo, la clase col-1
especifica que un elemento ocupa una columna, col-2 especifica dos columnas, y así sucesivamente, a través de col-12, que
especifica que un elemento llena toda la fila. En el perfil, he creado una serie de div
elementos con el fila clase, cada uno de los cuales contiene además div elementos para los cuales se ha columna-*
clases. Se puede ver el efecto en el navegador en la figura 4-6 .
■ Propina Bootstrap no se aplica ningún estilo a los elementos dentro de una fila, que por eso me he utilizado una estilo
elemento para crear un estilo CSS personalizado que establece un color de fondo, establece cierta distancia entre filas, y añade un borde.
Figura 4-6. La creación de un diseño de cuadrícula Bootstrap
57
Creación de cuadrículas Responsive
rejillas que responden a adaptar su diseño basado en el tamaño de la ventana del navegador. El principal uso de las redes de respuesta es permitir que los
dispositivos móviles y de escritorio para mostrar el mismo contenido, aprovechando cualquier espacio de pantalla disponible. Para crear una cuadrícula de
respuesta, reemplazar el columna-* clase en células individuales con una de las clases se muestra en la Tabla 4-6 .
Tabla 4-6. Las clases Bootstrap CSS para rejillas Responsive
Clase de arranque Descripción
col-sm * Las células de red se muestran horizontalmente cuando el ancho de la pantalla es mayor que 576 píxeles.
COL-MD-* Las células de red se muestran horizontalmente cuando el ancho de la pantalla es mayor que 768 píxeles.
col-LG- * Las células de red se muestran horizontalmente cuando el ancho de la pantalla es mayor que 992 píxeles.
col-XL- * Las células de red se muestran horizontalmente cuando el ancho de la pantalla es mayor de 1200 píxeles.
Cuando la anchura de la pantalla es menor que los soportes de clase, las células en la fila de la cuadrícula se apilan verticalmente en lugar de
horizontalmente. Listado 4-7 demuestra una cuadrícula de respuesta en el index.html expediente.
Listado 4-7. Creación de una cuadrícula de respuesta en el archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

rel = "stylesheet" /> <style>
# gridContainer {padding: 20px;}

. row> div {
frontera: lightgrey sólido 1px; padding: 10px;
background-color: Aliceblue; margen: 5px 0; }
</ Style>
</ Head>
<H3> Diseño de cuadrícula </ h3> <div

class = "contenedor">
<Div class = "col-sm-3"> 3 </ div> <div
class = "col-sm-4"> 4 </ div> <div class =
"col-sm-5"> 5 </ div > </ div>

<Div class = "col-sm-6"> 6 </ div> <div
class = "col-sm-6"> 6 </ div> </ div>
58

<Div class = "col-SM-11"> 11 </ div> <div
class = "col-sm-1"> 1 </ div> </ div>
</ Div> </

body> </ html>
He quitado algunas filas de la rejilla del ejemplo anterior y sustituye la columna-* con clases COL-sm *.
El efecto es que las celdas de la fila serán apilados horizontalmente cuando la ventana del navegador es mayor que 576 píxeles de ancho y apilados
horizontalmente cuando es más pequeño, como se muestra en la figura 4-7 .
La Figura 4-7. La creación de un diseño de cuadrícula de respuesta
Creando un diseño simplificado de cuadrícula
Para la mayoría de los ejemplos de este libro que se basan en la parrilla de Bootstrap, utilizo un enfoque simplificado que muestra el contenido en una sola fila y
requiere sólo el número de columnas que se especificarán, como se muestra en el Listado 4-8 .
Listado 4-8. El uso de un Diseño de cuadrícula simplificado en el archivo index.html en la carpeta HtmlCssPrimer
<! DOCTYPE html>

<html> <head>

head>
59

<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3> <div class =
"contenedor de líquido">
<Div class = "col-4">
<Form>
<Label> Tarea </ label> <input class =

<Label> Localización </ label> <input class =

<Input type = "casilla de verificación" />
<label> Hecho </ label> </ div>
<Clase de botón = "btn btn-primaria"> Añadir </ button> </ form> </
div>
<Div class = "col-8">

<Thead>
<Tr>
zapatos </ td> <td> n </ td> </ tr> <tr > <td> recoger las entradas </ td> <td> Sí </ td>
</ tr> <tr> <td> Llamada Joe </ td> <td> n </ td> </ tr> </ tbody> </ table> </ div> </
div> </ div>
</ Body> </

html>
Esta lista utiliza el col-4 y col-8 clases para mostrar dos div elementos de lado a lado, permitiendo la forma y la tabla que muestra los
elementos de tareas que se muestran en horizontal, como se ilustra en la figura 4-8 .
60
La Figura 4-8. El uso de un diseño de cuadrícula simplificada
Resumen
En este capítulo, proveemos una breve descripción de HTML y CSS del marco Bootstrap. Es necesario tener un buen conocimiento de HTML y CSS para
ser realmente eficaz en el desarrollo de aplicaciones web, pero la mejor manera de aprender es mediante la experiencia de primera mano, y las
descripciones y los ejemplos de este capítulo va a ser suficiente para empezar y proporcionar suficiente información de referencia para los ejemplos que
vienen. En el siguiente capítulo, continúo el tema de imprimación y presento las características básicas de JavaScript que utilizo en este libro.
61
CAPÍTULO 5
JavaScript y mecanografiado: Parte 1
En este capítulo se proporciono un rápido recorrido de las características básicas más importantes del lenguaje JavaScript que se aplican al desarrollo angular.
No tengo el espacio para describir JavaScript por completo, por lo que me he centrado en los elementos esenciales que necesita para ponerse al día y seguir
los ejemplos de este libro. en el capítulo 6 , Se describen algunas de las características más avanzadas de JavaScript que va a necesitar y algunas de las
características adicionales proporcionadas por mecanografiado.
El lenguaje JavaScript es gestionado a través de un proceso estándar que define nuevas características. Los navegadores modernos han comenzado
a implementar características de la ECMAScript 6 (también conocido como ES6) estándar, y ECMAScript 7 (ES7) está haciendo su camino en el servicio,
mientras escribo esto. Las nuevas normas amplían las funciones disponibles para los desarrolladores de JavaScript y hacen uso de JavaScript más
consistente con los lenguajes más convencionales tales como C # o Java.
Los navegadores modernos ponen al día, lo que significa que un usuario de Google Chrome, por ejemplo, es probable que tenga una versión reciente del
navegador que implementa al menos algunas de las más recientes características de JavaScript. Lamentablemente, los navegadores antiguos que no se actualicen
todavía están en uso generalizado, lo que significa que no puede depender de las características modernas están disponibles para su uso en su aplicación.
Hay dos maneras de abordar este problema. La primera es utilizar sólo las funciones básicas de JavaScript que puede confiar en estar
presente en los navegadores que se orienta su aplicación. La segunda es el uso de un compilador que procesa los archivos JavaScript y las
convierte en código que se puede ejecutar en los navegadores antiguos. Es el segundo enfoque que toma angular y que describo en este
capítulo. Mesa 5-1 resume este capítulo.
Tabla 5-1. Resumen del capítulo
Problema Solución Listado
Crear la función JavaScript Utilizar sentencias de JavaScript 5
Crear grupos de instrucciones que se ejecutan uso de las funciones 6, 7, 10-12

en el comando
Definir las funciones que pueden manejar más o menos Utilizar por defecto o descansar parámetros 8, 9
argumentos que los parámetros
funciones expresas de manera más concisa Utilice las funciones de dirección 13
Almacenar los valores y objetos para su uso posterior Declarar variables utilizando el let u var palabra clave 14-16
Almacenar los valores de datos básicos Utilice los tipos primitivos de JavaScript 17-20
Controlar el flujo de código JavaScript Utilizar instrucciones condicionales 21
Determinar si dos objetos o valores son los Utilizar los operadores de identidad y calidad 22-23
mismos
Explícitamente convertir los tipos Utilice la a <tipo> métodos 24-26
objetos o valores relacionados entre sí de forma secuencial tienda Utilizar una matriz 27-33

Capítulo 5 ■ JavaScript y mecanografiado: parte 1
Uso de JavaScript “NORMAL” PARA ANGULAR
Cuando se introdujo angular 2, el uso de mecanografiado era opcional, y que era posible escribir aplicaciones que utilizan angulares llanura
JavaScript. el resultado fue incómodo y requiere un código retorcido para recrear el efecto de las características clave mecanografiado, pero era
posible, y Google proporciona un conjunto completo de los documentos de la API para los desarrolladores de JavaScript lisos y mecanografiado.
el soporte para trabajar con el desarrollo normal de JavaScript se ha reducido con cada versión posterior, con el efecto de que no
existe una orientación para los programadores que son reacios a adoptar mecanografiado.
Mi consejo es abrazar la experiencia angular completo, a pesar de que puede tomar algún tiempo y esfuerzo para dominar mecanografiado.
el resultado será una mejor experiencia de desarrollo, que contiene código que es más conciso, más fácil de leer, y más fácil de mantener.
este es el enfoque que he tomado en este libro, y cada ejemplo se supone que este es el camino que está siguiendo.
Preparación del Ejemplo de proyecto

Para crear el proyecto de ejemplo para este capítulo, abre un nuevo símbolo del sistema, vaya a un lugar conveniente, y ejecutar el comando
que se muestra en el Listado 5-1 .
■ Propina se puede descargar el proyecto ejemplo para este capítulo, y para todos los demás capítulos de este libro: de https://github.com/Apress/pro-angula
.
Listado 5-1. Crear el proyecto de ejemplo
ng crear JavaScriptPrimer
Este comando crea un proyecto llamado JavaScriptPrimer que está configurado para el desarrollo angular. No hago ningún desarrollo angular
en este capítulo, pero voy a utilizar las herramientas de desarrollo angular como una manera conveniente para demostrar diferentes características
JavaScript y mecanografiado. Para preparar, Substituí el contenido de la main.ts presentar en el src carpeta con la declaración única JavaScript
muestra en el listado 5-2 .
■ Propina prestar atención a la extensión del archivo. a pesar de que este capítulo se utiliza sólo las características de JavaScript, que se basa en el
compilador de transcripción de la convertirlos en código que se ejecutará en cualquier navegador. eso significa que el. ts Se debe usar, que a su vez permite
que el compilador mecanografiado para crear la correspondiente. js archivo que será utilizado por el navegador.
64
Listado 5-2. Sustituir el contenido del archivo en la carpeta main.ts src
console.log ( "Hola");
Ejecutar el comando que se muestra en el Listado 5-3 en el JavaScriptPrimer carpeta para iniciar el compilador de desarrollo y
servidor HTTP angular.
Listado 5-3. A partir de las herramientas de desarrollo
ng servir --port 3000 --open
Una nueva pestaña o ventana del navegador se abrirá, pero estarán vacíos, como se muestra en la figura 5-1 , Porque sustituye
el contenido de la main.ts presentar y el navegador no tiene nada que mostrar.
La Figura 5-1. Ejecución de la aplicación de ejemplo
Todos los resultados de los ejemplos de este capítulo se muestran en la consola JavaScript del navegador. Abrir las herramientas de
desarrollo F12 de tu navegador (llamados así porque normalmente se abre pulsando la tecla F12) y mirar la ficha Consola, que se muestra en la
figura 5-2 .
La Figura 5-2. La consola de Google Chrome JavaScript
sesenta y cinco
La consola de JavaScript muestra el resultado de la llamada a la console.log la función del Listado 5-2 . Más bien
de mostrar una captura de pantalla de la consola de JavaScript del navegador para cada ejemplo, sólo voy a mostrar el resultado de texto, así:
Hola
Comprender el flujo de trabajo básico

Escribir la palabra Hola a la consola de JavaScript es un ejemplo sencillo, pero hay muchas cosas detrás de las escenas. Para tener una idea
del flujo de trabajo de desarrollo, agregue la instrucción muestra en el listado 5-4 al
main.ts expediente.
Listado 5-4. Adición de una instrucción en el archivo main.ts en la carpeta src
console.log ( "manzanas");
Al guardar el cambio en el main.ts archivo, produce el siguiente proceso:
1. El compilador mecanografiado detectará el cambio en el main.ts presentar y compilarlo para generar un nuevo main.js
archivo que se puede ejecutar en cualquier navegador. El código que se produce se combina con otro código
JavaScript producido por el compilador en un solo archivo llamado haz.
2. El servidor de desarrollo de HTTP detecta el cambio en el archivo de paquete e indica al navegador para volver a
cargar el documento HTML.
3. El navegador vuelve a cargar el documento HTML y empieza a procesar los elementos que contiene. Se carga
los archivos JavaScript especificados por el guión elementos en el documento HTML, incluyendo uno que
especifica el archivo de paquete que contiene las declaraciones de la main.ts expediente.
4. El navegador ejecuta las instrucciones que estaban originalmente en el main.ts archivo, que escribe dos
mensajes a la consola de JavaScript del navegador. El resultado global es que se pueden ver los siguientes
mensajes que se muestran:
hola
Manzanas
Esto puede parecer un gran número de pasos para una aplicación sencilla, pero este proceso permite funciones de transcripción de ser utilizados y
automáticamente se encarga de la detección de cambios, que ejecuta el compilador, y actualizar el navegador.
Uso de sentencias
El bloque de construcción básico de JavaScript es la declaración. Cada declaración representa un solo comando, y las declaraciones son por lo
general termina con un punto y coma (;). El punto y coma es opcional, pero su uso hace que su código sea más fácil de leer y permite múltiples
estados en una sola línea. en el Listado 5-5 , He añadido un par de sentencias al archivo JavaScript.
66
Listado 5-5. Adición de sentencias de JavaScript en el archivo main.ts en la carpeta src
console.log ( "manzanas");
console.log ( "Esta es una declaración"); console.log ( "Esta
es también una declaración");
El navegador ejecuta cada instrucción en turno. En este ejemplo, todas las declaraciones simplemente escriben mensajes en la consola. Los resultados
son los siguientes:
hola
Manzanas
Esta es una declaración Esta es
también una declaración
Definición y uso de funciones

Cuando el navegador recibe el código JavaScript, que ejecuta las instrucciones que contiene en el orden en el que se han definido.
Esto es lo que ocurrió en el ejemplo anterior. El cargador carga el navegador main.js
archivo, y las declaraciones que contiene fueron ejecutados uno por uno, todos los cuales escribió un mensaje a la consola.
También se pueden empaquetar declaraciones en una función, los cuales no se ejecutará hasta que el navegador encuentra una declaración que invoca la
función, como se muestra en el Listado 5-6 .
Listado 5-6. Definición de funciones de JavaScript en el archivo main.ts en la carpeta src
dejar que myFunc = function () {

console.log ( "Esta es una declaración"); };
myFunc ();
La definición de una función simple: utilizar el dejar palabra clave seguida por el nombre que desea dar a la función, seguido por el
signo igual (=) y la función palabra clave, seguido de paréntesis (los personajes (y)). Las declaraciones desea que la función de contener
están encerradas entre llaves (los caracteres {y}).
En el perfil, he usado el nombre myFunc, y la función contiene una única instrucción que escribe un mensaje a la consola
de JavaScript. La sentencia de la función no se ejecutará hasta que el explorador llega a otra declaración que llama a la myFunc
función, así:
...
myFunc ();
...
La ejecución de la sentencia de la función produce el siguiente resultado:
Esta es una declaración
Aparte de demostrar cómo se definen las funciones, este ejemplo no es especialmente útil porque la función es invocada inmediatamente
después de que se ha definido. Las funciones son mucho más útiles cuando se invocan en respuesta a algún tipo de cambio o evento, tal como
la interacción del usuario.
67
La otra manera de definir funciones
hay dos formas en que se pueden definir funciones en JavaScript. el enfoque que utilicé en el Listado 5-6
que se conoce como una expresión de función. la misma función también se puede definir como esto:
...
funcionar myFunc () {
console.log ( "Esta es una declaración"); }
...
esto se conoce como una declaración de la función. el resultado es el mismo: una función llamada myFunc que escribe un mensaje a la consola.
la diferencia es la forma en las funciones son procesadas por el navegador cuando se carga un archivo JavaScript. Las declaraciones de
funciones se procesan antes que el código en un archivo JavaScript se ejecuta, lo que significa que puede utilizar una declaración que llama a
una función antes de que se define, como este:
...
myFunc ();
funcionar myFunc () {
console.log ( "Esta es una declaración"); }
...
esto funciona debido a que el navegador encuentra la declaración de función cuando se analiza el archivo JavaScript y establece la función
antes de que se ejecutan las instrucciones restantes, un proceso conocido como
la función de elevación. Las expresiones de función, sin embargo, no están sujetos a la elevación, lo que significa que este código se no trabajo:
...
myFunc ();
dejar que myFunc = function () {

console.log ( "Esta es una declaración"); };
...
este código generará un informe de errores que se myFunc no es una función. los desarrolladores que son nuevos en JavaScript tienden a
preferir el uso de declaraciones de funciones porque la sintaxis es más consistente con lenguajes como C # o Java. la técnica que se utiliza
es totalmente de usted, aunque usted debe tratar de ser coherente en toda su proyecto para que su código sea más fácil de entender.
68
Definición de funciones con parámetros

JavaScript permite definir los parámetros para las funciones, como se muestra en el Listado 5-7 .
Listado 5-7. Definición de funciones con parámetros en los main.ts archivo en la carpeta src
dejar que myFunc = function (nombre, tiempo) {

console.log ( "Hola" + nombre + ""); console.log ( "Es" +
Tiempo + "hoy"); };
myFunc ( "Adam", "sol");
Añadí dos parámetros para la myFunc función, llamada nombre y clima. JavaScript es un lenguaje de tipos dinámicos, lo que significa que
no tiene que declarar el tipo de datos de los parámetros cuando se define la función. Voy a volver a tipado dinámico adelante en este capítulo
cuando cubra las variables JavaScript. Para invocar una función con parámetros, se proporcionan valores como argumentos cuando se invoca
la función, así:
...
myFunc ( "Adam", "sol");
...
Los resultados de este listado son los siguientes:
Hola Adam.
Hoy esta soleado
Utilizando por defecto y los parámetros de descanso
El número de argumentos que se proporcionan cuando se invoca una función no tiene por qué coincidir con el número de parámetros en la función.
Si se llama a la función con menos argumentos que la que tiene parámetros, entonces el valor de cualquier parámetro que no haya suministrado los
valores de es indefinido, que es un valor especial JavaScript. Si se llama a la función con más argumentos que hay parámetros, a continuación, se
ignoran los argumentos adicionales.
La consecuencia de esto es que no se puede crear dos funciones con el mismo nombre y diferentes parámetros y esperan JavaScript para
diferenciar entre ellos sobre la base de los argumentos suministrados por el usuario cuando se invoca la función. Se llama polimorfismo, y aunque
se apoya en lenguajes como Java y C #, que no está disponible en JavaScript. En cambio, si se definen dos funciones con el mismo nombre, a
continuación, la segunda definición sustituye a la primera.
Hay dos maneras que se pueden modificar en función de responder a una falta de correspondencia entre el número de parámetros que define como el
número de argumentos utilizados para invocarlo. Los parámetros por defecto hacer frente a la situación en la que hay menos argumentos que los parámetros,
y que le permiten ofrecer un valor por defecto para los parámetros para los que no hay argumentos, como se muestra en el Listado 5-8 .
Listado 5-8. El uso de un defecto de parámetros en los main.ts archivo en la carpeta src
dejar que myFunc = function (nombre, tiempo = "lloviendo") {

Tiempo + "hoy"); };
myFunc ( "Adam");
69
los clima parámetro de la función se ha asignado un valor por defecto de lloviendo, que se utilizará si la función es invocada con
sólo un argumento, produciendo los siguientes resultados:
Hola Adam.
Hoy esta lloviendo
parámetros de descanso se utilizan para capturar cualquier argumento adicional cuando se invoca una función con argumentos adicionales, como
se muestra en el listado 5-9 .
Listado 5-9. El uso de un resto de parámetros en los main.ts archivo en la carpeta src
dejar que myFunc = function (nombre, tiempo, ... extraArgs) {

Tiempo + "hoy");
para (dejo i = 0; i <extraArgs.length; i ++) {
console.log ( "Extra Arg:" + extraArgs [i]); }
};
myFunc ( "Adam", "soleado", "uno", "dos", "tres");
El parámetro resto debe ser el último parámetro definido por la función, y su nombre está precedido de una elipsis (tres períodos, ...). El
parámetro resto es una matriz a la que se asignarán los argumentos adicionales. En el perfil, la función imprime cada argumento adicional
para la consola, produciendo los siguientes resultados:
Hola Adam.
Es hoy en día soleado
extra Arg: uno extra Arg:
dos Arg adicional: tres
Definición de funciones que devuelven resultados

Puede encontrar información en las funciones utilizando el regreso palabra clave. Listado 5-10 muestra una función que devuelve un resultado.
Listado 5-10. La devolución de un resultado de una función en el archivo main.ts en la carpeta src
dejar que myFunc = function (nombre) {

volver ( "Hola" + nombre + ""); };
console.log (myFunc ( "Adam"));
Esta función define un parámetro y lo utiliza para producir un resultado. Invoco la función y pasar el resultado como el
argumento de la console.log función, así:
...
...
70
Tenga en cuenta que usted no tiene que declarar que la función devolverá un resultado o indicar el tipo de datos del resultado. El resultado de este
listado es el siguiente:
Hola Adam.
Uso de funciones como argumentos a otras funciones

funciones de JavaScript se pueden transferir como objetos, lo que significa que puede utilizar una función como argumento a otro, como se
ha demostrado en el listado 5-11 .
Listado 5-11. El uso de una función como argumentos a otra función en el archivo main.ts
dejar que myFunc = function (nameFunction) {

retorno ( "Hola" + nameFunction () + ""); };
console.log (myFunc (function () {

volver "Adán"; }));
los myFunc función define un parámetro llamado nameFunction que invoca para obtener el valor para insertar en la cadena que
devuelve. Paso una función que devuelve Adán como el argumento de myFunc, que produce el resultado siguiente:
Hola Adam.
Las funciones pueden ser encadenados juntos, la construcción de una funcionalidad más compleja a partir de pequeñas y fácilmente probadas piezas de
código, como se muestra en el Listado 5-12 .
Listado 5-12. Encadenando funciones de llamada en el archivo main.ts en la carpeta src
dejar que myFunc = function (nameFunction) {

retorno ( "Hola" + nameFunction () + ""); };
dejar que printName = function (nameFunction, printFunction) {

printFunction (myFunc (nameFunction)); }
printName (function () {return "Adam"}, console.log);
Este ejemplo produce el mismo resultado que Listado 5-11 .
Uso de funciones Flecha

Flecha funciones-también conocidas como funciones de flecha de grasa o lambda expresiones-son una forma alternativa de definir las funciones y, a menudo
se utilizan para definir las funciones que se utilizan solamente como argumentos a otras funciones. Listado 5-13 reemplaza las funciones del ejemplo anterior
con funciones de dirección.
71
Listado 5-13. Uso de funciones de flecha en la main.ts archivo en la carpeta src
dejar que myFunc = (nameFunction) => ( "Hola" + nameFunction () + "");
dejar que printName = (nameFunction, printFunction) => printFunction (myFunc (nameFunction));
printName (function () {return "Adam"}, console.log);
Estas funciones realizan el mismo trabajo que los que están en venta 5-12 . Hay tres partes de una flecha
función: los parámetros de entrada, a continuación, un signo igual y un signo mayor que (la “flecha”), y finalmente el resultado de la función. los regreso
Se requieren palabra clave y llaves sólo si la función de flecha necesita para ejecutar más de una instrucción. Hay más ejemplos de funciones
de dirección más adelante en este capítulo.
Uso de variables y tipos

los dejar palabra clave se utiliza para declarar variables y, opcionalmente, asignar un valor a la variable en una sola sentencia. Las variables declaradas con dejar
están en el ámbito de la región de código en el que se definen, como se muestra en el Listado 5-14 .
Listado 5-14. Usando dejó para declarar variables en el archivo de main.ts en la carpeta src
dejar que messageFunction = function (nombre, tiempo) {

dejar que el mensaje = "Hola, Adam"; si
(== tiempo "soleado") {
dejar que el mensaje = "Es un buen día";
console.log (mensaje); } Else {
dejar que el mensaje = "Es" + Tiempo + "hoy"; console.log

(mensaje); }
console.log (mensaje); }
messageFunction ( "Adam", "lloviendo");
En este ejemplo, hay tres estados que utilizan el dejar palabra clave para definir una variable llamada mensaje.
El alcance de cada variable se limita a la región de código que se define en, produciendo los siguientes resultados:
Está lloviendo hoy Hola,

Adam
Esto puede parecer como un ejemplo raro, pero hay otra palabra clave que se puede utilizar para declarar variables: var. los dejar palabra
clave es una relativamente nueva adición a la especificación JavaScript que se pretende abordar algunas rarezas en el camino var se comporta.
Listado 5-15 toma el ejemplo del Listado 5-14 y lo sustituye dejar con var.
72
Listado 5-15. El uso de var para declarar variables en el archivo de main.ts en la carpeta src
dejar que messageFunction = function (nombre, tiempo) {

var mensaje = "Hola, Adam";
si (== tiempo "soleado") {
var message = "Es un buen día";
console.log (mensaje); } Else
{
var message = "Es" + Tiempo + "hoy";
messageFunction ( "Adam", "lloviendo");
Al guardar los cambios en el perfil, podrás ver los resultados siguientes:
Está lloviendo hoy está

lloviendo hoy
El problema es que la var palabra clave crea variables cuyo ámbito de aplicación es la función que contiene, lo que significa que todas las referencias a mensaje
se hace referencia a la misma variable. Esto puede causar resultados inesperados para los desarrolladores de JavaScript, incluso con experiencia y es la razón
de que cuanto más convencional dejar palabra clave se introdujo.
USO DE LET Y CONST
la dejar palabra clave se utiliza para definir una variable y la const palabra clave se utiliza para definir un valor constante que no va a cambiar. es
una buena práctica utilizar el const palabra clave para cualquier valor que no esperas que modificar para que reciba un error si se intenta
realizar ninguna modificación. esta es una práctica que rara vez sigue, sin embargo, en parte porque todavía estoy adaptando a no utilizar el var
palabra clave y en parte porque escribo código en una variedad de idiomas y hay algunas características que debo evitar porque me tropezar
cuando cambio de uno a otro. Si usted es nuevo en JavaScript, entonces te recomiendo tratar de usar const
y dejar correctamente y evitar después de mi mal comportamiento.
Usando Cierre Variable

Si se define una función dentro de otra función creadora de interior y exterior funciones-entonces la función interior es capaz de acceder a las variables de la
función de exterior, usar una característica llamada cierre, como se ha demostrado en el listado 5-16 .
73
Listado 5-16. El uso de cierre variable en el main.ts archivo en la carpeta src
dejar que myFunc = function (nombre) {

dejar que myLocalVar = "soleado";
dejar que innerFunction = function () {
volver ( "Hola" + nombre + "Hoy en día es. "+ + myLocalVar"."); }
innerFunction retorno ();
};
La función de interior en este ejemplo es capaz de acceder a las variables locales de la función externa, incluyendo su nombre parámetro. Esta es una
característica de gran alcance que significa que no tiene que definir los parámetros de las funciones internas para pasar alrededor de los valores de datos, pero se
requiere precaución debido a que es fácil de obtener resultados inesperados cuando se utilizan los nombres de variables comunes como mostrador o índice, en la que no
puede darse cuenta de que va a reutilizar un nombre de variable de la función externa. Este ejemplo produce los siguientes resultados:
Hola Adam. Hoy está soleado.
El uso de los tipos primitivos

JavaScript define un conjunto básico de los tipos primitivos: cadena, número, y booleano. Esto puede parecer como una lista corta, pero JavaScript arregla para adaptarse a
una gran cantidad de flexibilidad en estos tres tipos.
■ Propina Estoy simplificando aquí. hay otras tres primitivas que pueden surgir. variables que han sido declarados pero no son asignados un valor indefinido,
mientras que la nulo valor se utiliza para indicar que una variable no tiene valor, al igual que en otros idiomas. el tipo primitivo final es Símbolo, que es un
valor inmutable que representa un identificador único, pero que no se utiliza ampliamente en el momento de la escritura.
Trabajar con Booleanos

los booleano tipo tiene dos valores: cierto y falso. Listado 5-17 muestra ambos valores siendo utilizado, pero este tipo es más útil cuando se utiliza en las
sentencias condicionales, tales como una Si declaración. No hay una consola de salida de este listado.
Listado 5-17. Definición de valores booleanos en el Archivo main.ts en la carpeta src
dejar que firstBool = true; dejar que

secondBool = false;
Trabajo con cadenas

Se define cuerda valores utilizando el doble cotización o caracteres de comillas simples, como se muestra en el Listado 5-18 .
74
Listado 5-18. Definición de variables de cadena en el archivo main.ts en la carpeta src
dejó firstString = "Esto es una cadena"; dejar que

secondString = 'Y así es esto';
Las comillas que utilice debe coincidir. No se puede iniciar una cadena con una comilla simple y terminar con una doble cita, por
ejemplo. No hay salida de este listado. JavaScript ofrece cuerda los objetos con un conjunto básico de propiedades y métodos, los más útiles
de los cuales se describen en la Tabla 5-2 .
Tabla 5-2. Propiedades de cadena útil y el método
Nombre Descripción
longitud Esta propiedad devuelve el número de caracteres de la cadena.
charAt (índice) Este método devuelve una cadena que contiene el carácter en el índice especificado.
concat (cadena) Este método devuelve una nueva cadena que concatena la cadena en la que se llama al método y la
cadena proporcionada como argumento.
indexOf (plazo, empezar) Este método devuelve el primer índice en el cual término aparece en la cadena o -1 si no hay ninguna
coincidencia. el opcional comienzo argumento especifica el índice de inicio para la búsqueda.
sustituir (plazo, newterm) Este método devuelve una nueva cadena en la que todos los casos de término se sustituyen con nuevo término.
rebanada (inicio, final) Este método devuelve una subcadena que contiene los caracteres entre los índices de inicio y fin.
split (término) Este método se divide una cadena en una matriz de valores que fueron separados por término.
toUpperCase () Estos métodos devuelven nuevas cadenas en las que todos los personajes son mayúsculas o minúsculas.
toLowerCase ()
recortar() Este método devuelve una nueva cadena de la que se han eliminado todos los espacios en
blanco iniciales y finales.
El uso de cadenas de la plantilla
Una tarea de programación común es combinar el contenido estático con valores de datos para producir una cadena que puede ser presentada al usuario. La
forma tradicional de hacer esto es a través de la concatenación de cadenas, que es el enfoque que he estado usando en los ejemplos hasta ahora en este
capítulo, los siguientes:
...
dejar que el mensaje = " Es "+ Tiempo +" hoy ";
...
También es compatible con JavaScript cadenas de la plantilla, que permiten que los valores de datos que se especifican en línea, que pueden ayudar a reducir los
errores y el resultado en una experiencia de desarrollo más natural. Listado 5-19 muestra el uso de una cadena de plantilla.
75
Listado 5-19. Usando una cadena de plantilla en el archivo main.ts
dejar que messageFunction = function (tiempo) {

dejar que el mensaje = `Es $ {} tiempo today`;
messageFunction ( "lloviendo");
cadenas de la plantilla comienzan y terminan con acentos abiertos (el carácter '), y los valores de datos se indican mediante llaves precedidos
por un signo de dólar. Esta cadena, por ejemplo, incorpora el valor de la clima variables en la cadena de plantilla:
...
dejar que el mensaje = `Es $ { clima} today`;
...
En este ejemplo se produce el siguiente resultado:
Hoy esta lloviendo
Trabajando con Números

los número tipo se utiliza para representar tanto entero y punto flotante números (también conocido como numeros reales).
Listado 5-20 proporciona una demostración.
Listado 5-20. Definición de valores numéricos en el archivo main.ts en la carpeta src
dejar que daysInWeek = 7; dejar

que pi = 3,14;
dejar que hexValue = 0xFFFF;
Usted no tiene que especificar qué tipo de número que está utilizando. Que acaba de expresar el valor que necesita, y JavaScript actúe
en consecuencia. En el perfil, he definido un valor entero, que se define un valor de coma flotante, y el prefijo con un valor 0x para denotar un
valor hexadecimal.
Uso de los operadores de JavaScript

JavaScript define un conjunto estándar de gran parte de los operadores. He resumido los más útiles en la tabla 5-3 .
76
Tabla 5-3. Operadores de JavaScript útiles
Operador Descripción
++, -- Pre- o post-incremento y decremento
+, - , * , /,% La suma, resta, multiplicación, división, resto
<, <=,>,> = Menor que, menor que o igual a, mayor que, más de o igual a
==,! = pruebas de igualdad y desigualdad
===,! == Ensayos de identidad y la no identidad
&&, || Logical AND y OR (|| se utiliza para coalescer valores nulos)
= Asignación
+ La concatenación de cadenas
?: Tres operando sentencia condicional
Uso de sentencias condicionales

Muchos de los operadores de JavaScript se utilizan en conjunción con las sentencias condicionales. En este libro, que tienden a utilizar la if / else y
cambiar declaraciones. Listado 5-21 muestra el uso de ambos, que será familiar si ha trabajado con casi cualquier lenguaje de programación.
Listado 5-21. Utilizando el if / else y cambiar instrucciones condicionales en el Archivo main.ts
dejar que name = "Adán";
si (nombre == "Adán") {
console.log ( "nombre es Adam"); } Else
if (nombre == "Jacqui") {
console.log ( "Nombre es Jacqui"); } Else {
console.log ( "Nombre no es ni Adán o Jacqui"); }
interruptor (nombre) {
caso "Adán":
console.log ( "nombre es Adam");
descanso; caso "Jacqui":
console.log ( "Nombre es Jacqui"); descanso;

defecto:
console.log ( "Nombre no es ni Adán o Jacqui"); descanso; }
Los resultados de la lista son los siguientes:
Nombre es Adam
nombre es Adam
77
El operador de igualdad frente a la identidad del operador

Los operadores de igualdad y de identidad son de particular interés. El operador de igualdad intentará coaccionar (convertir) operandos al mismo tipo para evaluar la
igualdad. Esta es una característica muy útil, siempre y cuando usted es consciente de lo que está sucediendo. Listado 5-22 muestra el operador de igualdad en la
acción.
Listado 5-22. Usando el operador de igualdad en los main.ts archivo en la carpeta src
dejar que firstVal = 5; dejar que

secondVal = "5";
si (firstVal == secondVal) {
console.log ( "Son lo mismo"); } Else {
console.log ( "Ellos no son los mismos"); }
La salida de este script es el siguiente:
Ellos son lo mismo
JavaScript es la conversión de los dos operandos en el mismo tipo y compararlos. En esencia, las pruebas operador de igualdad que los
valores son los mismos independientemente de su tipo. Para ayudar a proteger contra este tipo de error, el compilador mecanografiado generará una
advertencia, aunque todavía generará el código JavaScript ya que este tipo de comparación es legal:
Operador '==' no se puede aplicar a 'número' tipos y 'cadena'.
Si quieres poner a prueba para asegurarse de que los valores y los tipos son los mismos, entonces es necesario utilizar el operador de identidad (===, tres
signos iguales, en lugar de los dos del operador de igualdad), como se muestra en el Listado 5-23 .
Listado 5-23. Uso del main.ts identidad en el archivo en la carpeta src
dejar que firstVal = 5; dejar que

secondVal = "5";
si (firstVal === secondVal) {

console.log ( "Son lo mismo"); } Else {
console.log ( "Ellos no son los mismos"); }
En este ejemplo, el operador tendrá en cuenta la identidad de las dos variables a ser diferente. Este operador no obliga a los tipos. El
resultado de este script es el siguiente:
Ellos no son los mismos
78
Tipos de manera explícita en la conversión
El operador de concatenación de cadenas (+) tiene una prioridad más alta que el operador de suma (también +), lo que significa JavaScript
concatenará variables en preferencia a la adición. Esto puede causar confusión porque JavaScript también convertirá tipos libremente para producir
un resultado, y no siempre el resultado que se espera, como se muestra en el Listado 5-24 .
Listado 5-24. Concatenación de Prioridad de los operadores en el Archivo main.ts
dejar que MyData1 = 5 + 5; dejar que

mydata2 = 5 + "5";
console.log ( "Resultado 1:" + MyData1);

console.log ( "Resultado 2:" + mydata2);
El resultado de este script es el siguiente:
Resultado 1: 10
Resultado 2: 55
El segundo resultado es el tipo que causa confusión. ¿Cuál podría ser la intención de ser una operación de suma se interpreta como la
concatenación de cadenas a través de una combinación de precedencia de los operadores y de conversión de tipo ansioso. Para evitar esto, se puede
convertir explícitamente los tipos de valores para asegurar que realiza el tipo de operación, como se describe en las siguientes secciones.
La conversión de números a cadenas
Si está trabajando con múltiples variables de números y desea concatenar como cadenas, a continuación, puede convertir los números a
cadenas con el método, como se muestra en el Listado 5-25 .
Listado 5-25. Uso del método Number.toString en los main.ts archivo en la carpeta src
dejar que MyData1 = (5) .toString () + String (5);

console.log ( "Resultado:" + MyData1);
Nótese que he colocado el valor numérico entre paréntesis, y luego llamé a la método. Esto se debe a que tiene que autorizar
JavaScript para convertir el valor literal en una número antes de llamar a los métodos que la número tipo define. También he mostrado un
enfoque alternativo para lograr el mismo efecto, que es llamar a la Cuerda funcionar y pase el valor numérico como argumento. Ambas
técnicas tienen el mismo efecto, que es para convertir una número a una cuerda, lo que significa que el operador + se utiliza para la
concatenación de cadenas y no adición. La salida de este script es el siguiente:
Resultado: 55
Hay algunos otros métodos que le permiten ejercer un mayor control sobre la forma de un número se representa como una cadena. Describo
brevemente estos métodos en la tabla 5-4 . Todos los métodos mostrados en la tabla se definen por la número tipo.
79

Pro Angular 6 - 2018 - Third Edition (001-100) .En - Es

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Pro Angular 6 - 2018 - Third Edition (001-100) .En - Es

Cargado por

Copyright:

Formatos disponibles

Pro

Adam Freeman Londres,

ISBN-13 (PBK): 978-1-4842-3648-2 ISBN-13 (electrónico): 978-1-4842-3649-9

Biblioteca del Congreso de control el número: 2018960245 Copyright

© 2018 por Adam Freeman

Director General de Apress Media LLC: Welmoed Spahr Adquisiciones

Editor: Editor de Desarrollo Murray Joan: Laura Editor de Coordinación

Berendson: Mark Powers cubierta diseñada imagen eStudioCalamar

cubierta diseñada por Freepik (por www.freepik.com )

Impreso en papel libre de ácido

Sobre el autor xxiii Sobre el revisor técnico xxv

■ Parte I: Introducción angular 1

¿Qué necesitas saber? 3 ¿Cuál es la estructura de este libro ? 4

¿Hay muchos ejemplos? 4 ¿Dónde puede obtener el código de ejemplo ? 6 ¿Cómo se

configura el entorno de desarrollo? 6 contacto con el autor 6 Resumen 6

■ Capítulo 2: Su Primera angular Aplicación 7

Preparación del entorno de desarrollo 7

Creación y Preparación del Proyecto 10

Edición del archivo HTML 12

Adición de funciones angulares para el Proyecto 15

preparación del componente 18 Poner la solicitud junto 20

Adición de funciones a la Ejemplo de Aplicación 22

■ Capítulo 3: Poner en contexto angular 31

Sobresale la comprensión de dónde angular 32

Comparando angular para reaccionar y Vuejs 34 Comprensión del patrón MVC 34

La comprensión de los modelos 36 Controladores entendimiento / componentes 38 Vistas Comprensión /

Descripción de los servicios REST 39 Común Diseño trampas 41

conocimiento sólo lo suficiente para causar problemas 42

■ Capítulo 4: Una cartilla HTML y CSS 43

Preparación del Ejemplo de proyecto 43 Comprensión HTML 45

Citando Valores literales en Atributos 47 Comprender el contenido del elemento 47 la comprensión de la

estructura del documento 47

para crear formularios 54 Uso Bootstrap para crear cuadrículas 55

■ Capítulo 5: JavaScript y mecanografiado: Parte 1 63

Preparación del Ejemplo de proyecto 64

Uso de sentencias 66 Definición y Uso de funciones 67

funciones como argumentos a otras funciones 71

Uso de variables y tipos 72

Uso de los operadores de JavaScript 76

Trabajar con matrices 81

■ Capítulo 6: JavaScript y mecanografiado: Parte 2 87

Preparación del Ejemplo de proyecto 87 trabajo con objetos 88

Trabajando con Módulos de JavaScript 93

Características mecanografiado útiles 97

■ Capítulo 7: SportsStore: una aplicación real 107

Preparación del Proyecto 107

del servicio web REST 113

Preparación de las características del proyecto angular 113

A partir del modelo de datos 115

repositorio 117 Crear el módulo de funciones 118

Inicio de la tienda 119

componente de raíz y la raíz del módulo 121

Añadiendo tienda cuenta con los detalles del producto 122

126 Creación de una directiva personalizada 130

■ Capítulo 8: Spor tsStore: Órdenes y Pedido 135

Preparación del Ejemplo de Aplicación 135 Creación de la Cesta 135

carro en la tienda 139

La adición de enrutamiento de URL 142

Completando la característica carro Detallada 150 Proceso de pedidos 153

Extender el modelo 153 Recopilación de los detalles del pedido 156

Uso del servicio web REST 160

■ Capítulo 9: SportsStore: Administración 165

Preparación del Ejemplo de Aplicación 165