angular 6
-
Tercera edicion
-
Adam Freeman
Pro angular 6
Tercera edicion
Adam Freeman
Pro angular 6
Reino Unido
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.
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
.
Parte 1: Introducción a Angular 4 Parte 2: angular en detalle 4 Parte 3: Características avanzadas angular 4
Instalación de un navegador 9
v
■ Tabla de contenido
de tareas pendientes 28
resumen 30
Plantillas 38
Poner la lógica en el lugar equivocado 41 que adopta el formato de datos del almacén de datos 41 El
resumen 42
vi
■ Tabla de contenido
La comprensión de los elementos Void 46 Atributos Comprensión 46 La aplicación de atributos sin valores 46
Bootstrap comprensión 49
La aplicación de clases básicas Bootstrap 50 Uso de Bootstrap para mesas de estilo 53 Uso de Bootstrap
resumen 61
Definición de funciones con parámetros 69 Definición de funciones que devuelven resultados 70 Uso de
explícitamente Converting 79
vii
■ Tabla de contenido
contenido de una matriz 82 Uso del Spread 83 Uso de los métodos incorporada array 83
resumen 85
El uso de objetos literales 89 Uso de funciones como Métodos 89 Definición de las clases 90
de acceso 103
resumen 105
del archivo HTML 111 Creación de la estructura de carpetas 112 Ejecutar el Ejemplo de Aplicación 112 Inicio
viii
■ Tabla de contenido
arranque 114
resumen 133
Creación de la cesta Modelo 135 Creación de los componentes del carro Resumen 137 la integración del
enrutamiento 144 Navegación a través de la Aplicación 145 Protegiendo las Rutas 148
ix
■ Tabla de contenido
resumen 163
administración 169
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
Instalación del paquete de PWA 193 Almacenamiento en caché de los datos de URLs 194 en respuesta a los
X
■ Tabla de contenido
resumen 207
Crear un nuevo proyecto angular 211 la comprensión de la estructura del proyecto 212
desfibradora 223
angular raíz 228 la comprensión de la Com angular Ponent 229 Comprensión de visualización de contenido
229
xi
■ Tabla de contenido
resumen 236
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
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
xii
■ Tabla de contenido
El uso de las expresiones idempotente 283 la comprensión del contexto de la expresión 286
resumen 289
326 Usando el modelo de validación 329 La generación de los elementos de la Modelo 333
resumen 337
Preparación del Ejemplo de proyecto 340 Creación de una directiva de atributo simple 343
xiii
■ Tabla de contenido
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
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
de propiedad de nivel de datos Cambios 380 negociación con la colección de datos de nivel Cambios 381
resumen 399
Preparación del Ejemplo de proyecto 402 Estructuración una aplicación con componentes 403
xiv
■ Tabla de contenido
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
formato 458 Cambiar a mayúsculas o cuerdas 461 de números de serie de datos como JSON
resumen 465
469
Lo que demuestra el problema 469 Distribución de objetos como los servicios que utilizan la inyección de
xv
■ Tabla de contenido
resumen 494
Mediante el proveedor de Clase 500 utilizando el proveedor de Valor 508 utilizando el proveedor de fábrica
dependencias 522
resumen 524
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
componentes 545
resumen 550
xvi
■ Tabla de contenido
Modelo 556
Preparación del Ejemplo de proyecto 568 Entendiendo el problema 569 Resolver el Problema
La comprensión observables 572 observadores Comprensión 574 Los sujetos Comprensión 575
xvii
■ Tabla de contenido
filtrado de Eventos 583 La transformación de Eventos 584 recibieron sólo eventos distintos 587 Tomar y
resumen 591
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
La consolidación de solicitudes HTTP 606 que realizan solicitudes de origen cruzado 607
resumen 617
xviii
■ Tabla de contenido
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
Código 641 Recepción de eventos de navegación 643 Extracción de los enlaces y eventos apoyando Código
645
resumen 648
Todos 668
resumen 676
xix
■ Tabla de contenido
El retraso de navegación con un dispositivo de resolución 680 Prevención de navegación con guardias 687
de 705
resumen 713
configuración 717
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
resumen 743
xx
■ Tabla de contenido
Preparación del Ejemplo de proyecto 746 Ejecución de una prueba simple unidad 748 Trabajar
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
í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.
@NgModule ({
importaciones: [BrowserModule, FormsModule, ReactiveFormsModule],
declaraciones: [ProductComponent, PaAttrDirective],
bootstrap: [ProductComponent]})
4
Capítulo 1 ■ Preparándose
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 .
...
<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 .
@Componente({
Selector: "aplicación",
templateUrl: "app / template.html"})
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
Capítulo 1 ■ Preparándose
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
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.
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
.
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
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:
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:
8
Capitulo 2 ■ Su primera aplicación angular
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.
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
Capitulo 2 ■ Su primera aplicación angular
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
.
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.
...{
"SourceRoot": "src",
10
Capitulo 2 ■ Su primera aplicación angular
...
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.
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:
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
/ **
11
Capitulo 2 ■ Su primera aplicación angular
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.
12
Capitulo 2 ■ Su primera aplicación angular
<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3>
<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
13
Capitulo 2 ■ Su primera aplicación angular
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
Capitulo 2 ■ Su primera aplicación angular
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 .
15
Capitulo 2 ■ Su primera aplicación angular
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
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 .
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
Capitulo 2 ■ Su primera aplicación angular
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
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)]
}}
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
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
Capitulo 2 ■ Su primera aplicación angular
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.
@Componente({
Selector: "todo-app",
templateUrl: "app.component.html"})
getName () {
volver this.model.user; }}
18
Capitulo 2 ■ Su primera aplicación angular
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.
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í:
...
importación {Componente} de "@ angular / núcleo"; {} la
importación Modelo de "./model";
...
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”.
...
@Componente({
Selector: "todo-app",
templateUrl: "app.component.html"})
...
É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
Capitulo 2 ■ Su primera aplicación angular
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.
...
AppComponent clase de exportación {
modelo = new Model ();
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.
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
Capitulo 2 ■ Su primera aplicación angular
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
@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
@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
Capitulo 2 ■ Su primera aplicación angular
si (environment.production)
{enableProdMode (); }
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
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.
22
Capitulo 2 ■ Su primera aplicación angular
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.
@Componente({
Selector: "todo-app",
templateUrl: "app.component.html"})
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
<H3 class = "bg-primaria P-1-texto blanco"> {{getName ()}} 's para hacer la lista </ h3>
23
Capitulo 2 ■ Su primera aplicación angular
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:
...
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
Capitulo 2 ■ Su primera aplicación angular
Las expresiones de plantilla que quedan en el tr plantilla demostrar cómo el contenido se puede generar selectivamente.
...
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 .
25
Capitulo 2 ■ Su primera aplicación angular
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>
...
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
<H3 class = "bg-primaria P-1-texto blanco"> {{getName ()}} 's para hacer la lista </ h3>
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
26
Capitulo 2 ■ Su primera aplicación angular
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.
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({
Selector: "todo-app",
templateUrl: "app.component.html"})
getName () {
volver this.model.user; }
getTodoItems () {
volver this.model.items.filter (item => item.done!);
}}
27
Capitulo 2 ■ Su primera aplicación angular
É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 .
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.
<H3 class = "bg-primaria P-1-texto blanco"> {{getName ()}} 's para hacer la lista </ h3>
<Div class = "mi-1">
<Input class = "forma-control" #todoText />
<Clase de botón = "btn btn-primaria mt-1" (click) = "addItem (todoText.value)">
Añadir
botón </> </ div>
28
Capitulo 2 ■ Su primera aplicación angular
<Tbody>
<Tr * ngFor = "dejar el artículo de getTodoItems (); Sea I = índice">
<Td> {{i + 1}} </ td> <td>
{{item.action}} </ td>
<Td> <input type = "casilla de verificación" [(ngModel)] = "item.done" /> </ td> <td [ngSwitch]
= "item.done">
<Span * ngSwitchCase = "true"> Sí </ span> <span *
ngSwitchDefault> n </ span> </ td> </ tr> </ tbody> </ table>
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.
@Componente({
Selector: "todo-app",
templateUrl: "app.component.html"})
getName () {
volver this.model.user; }
getTodoItems () {
volver this.model.items.filter (item => item.done!); }
29
Capitulo 2 ■ Su primera aplicación angular
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 .
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
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.
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
y déjame saber.
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.
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
Capítulo 3 ■ Poniendo angular en contexto
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
33
Capítulo 3 ■ Poniendo angular en contexto
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
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.
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
Capítulo 3 ■ Poniendo angular en contexto
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
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
Capítulo 3 ■ Poniendo angular en contexto
■ 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.
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.
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
Capítulo 3 ■ Poniendo angular en contexto
■ 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
• 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
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
Capítulo 3 ■ Poniendo angular en contexto
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.
• 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 gestiona la persistencia de datos (es decir el trabajo del modelo)
38
Capítulo 3 ■ Poniendo angular en contexto
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
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
Capítulo 3 ■ Poniendo angular en contexto
■ 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
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
ENVIAR Crea un nuevo objeto de datos, típicamente usando los valores de datos de formulario como
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 .
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
Capítulo 3 ■ Poniendo angular en contexto
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 .
• 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
■ 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
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.
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
Capítulo 3 ■ Poniendo angular en contexto
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
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.
■ 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
.
{
"dependencias": { "Bootstrap":
"4.1.1"},
"devDependencies": {
"lite-servidor": ""} 2.3.0,
"guiones": {
"Inicio": "NGP plazo light", "ligero":
"lite-servidor"}}
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 .
<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3>
<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>
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
Capítulo 4 ■ un HTML y CSS imprimación
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.
45
Capítulo 4 ■ un HTML y CSS imprimación
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 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.
...
<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
Capítulo 4 ■ un HTML y CSS imprimación
...
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.
Los elementos pueden contener texto, pero también pueden contener otros elementos, como la siguiente:
...
<Thead>
<Tr>
<Th> Descripción </ th> <th>
Listo </ th> </ tr> </ thead>
...
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.
47
Capítulo 4 ■ un HTML y CSS imprimación
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.
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
48
Capítulo 4 ■ un HTML y CSS imprimación
Elemento Descripción
cuerpo Denota la región del documento que contiene los elementos de contenido
div Un elemento genérico; a menudo se utiliza para añadir estructura a un documento con fines de presentación
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
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
título Denota el título del documento; utilizado por el navegador para establecer el título de la ventana o pestaña
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
Capítulo 4 ■ un HTML y CSS imprimación
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 .
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”.
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.
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
Capítulo 4 ■ un HTML y CSS imprimación
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.
...
<Clase cuerpo =" m-1" >
...
51
Capítulo 4 ■ un HTML y CSS imprimación
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
Para ayudar a poner este esquema en el contexto, la tabla 4-4 enumera las combinaciones utilizadas en el index.html expediente.
Nombre Descripción
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
<H3 class = "bg-primaria texto blanco-p-3"> de Adán para hacer la lista </ h3>
52
Capítulo 4 ■ un HTML y CSS imprimación
<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>
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 .
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.
Nombre Descripción
tabla de rayas Se aplica fila alternativo creación de bandas a las filas de la mesa cuerpo
mesa vuelo estacionario Muestra un estilo diferente cuando se pasa el ratón sobre una fila en la tabla
53
Capítulo 4 ■ un HTML y CSS imprimación
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.
...
<table class = "mesa de ping-rayas mesa bordeada">
<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>
...
■ 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.
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
54
Capítulo 4 ■ un HTML y CSS imprimación
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 .
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
Capítulo 4 ■ un HTML y CSS imprimación
</ Style>
</ Head>
<Clase cuerpo = "m-2">
<H3> Diseño de cuadrícula </ h3> <div
class = "contenedor">
56
Capítulo 4 ■ un HTML y CSS imprimación
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.
57
Capítulo 4 ■ un HTML y CSS imprimación
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 .
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
</ Style>
</ Head>
<Clase cuerpo = "m-1">
58
Capítulo 4 ■ un HTML y CSS imprimación
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 .
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
59
Capítulo 4 ■ un HTML y CSS imprimación
<Clase de botón = "btn btn-primaria"> Añadir </ button> </ form> </
div>
<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> </ div> </
div> </ div>
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
Capítulo 4 ■ un HTML y CSS imprimación
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
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.
Definir las funciones que pueden manejar más o menos Utilizar por defecto o descansar parámetros 8, 9
argumentos que los parámetros
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
Determinar si dos objetos o valores son los Utilizar los operadores de identidad y calidad 22-23
mismos
objetos o valores relacionados entre sí de forma secuencial tienda Utilizar una matriz 27-33
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.
■ 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
.
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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.
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
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 .
sesenta y cinco
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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
console.log ( "Hola");
console.log ( "manzanas");
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
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
console.log ( "Hola");
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
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 ();
...
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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
...
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 ();
...
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
Listado 5-7. Definición de funciones con parámetros en los main.ts archivo en la carpeta src
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");
...
Hola Adam.
Hoy esta soleado
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
myFunc ( "Adam");
69
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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
};
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
Listado 5-10. La devolución de un resultado de una función en el archivo main.ts en la carpeta src
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í:
...
console.log (myFunc ( "Adam"));
...
70
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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.
Listado 5-11. El uso de una función como argumentos a otra función en el archivo main.ts
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
71
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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.
Listado 5-14. Usando dejó para declarar variables en el archivo de main.ts en la carpeta src
console.log (mensaje); }
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:
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
Listado 5-15. El uso de var para declarar variables en el archivo de main.ts en la carpeta src
console.log (mensaje); }
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.
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
73
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
};
console.log (myFunc ( "Adam"));
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:
■ 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.
74
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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 .
Nombre Descripción
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.
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
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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`;
...
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.
76
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
Operador Descripción
<, <=,>,> = Menor que, menor que o igual a, mayor que, más de o igual a
= Asignación
+ La concatenación de cadenas
si (nombre == "Adán") {
console.log ( "nombre es Adam"); } Else
if (nombre == "Jacqui") {
console.log ( "Nombre es Jacqui"); } Else {
interruptor (nombre) {
caso "Adán":
console.log ( "nombre es Adam");
descanso; caso "Jacqui":
Nombre es Adam
nombre es Adam
77
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
Listado 5-22. Usando el operador de igualdad en los main.ts archivo en la carpeta src
si (firstVal == secondVal) {
console.log ( "Son lo mismo"); } Else {
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:
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 .
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:
78
Capítulo 5 ■ JavaScript y mecanografiado: parte 1
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 .
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.
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
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