Crear aplicaciones web impresionantes con Angular 7

1. Bienvenido a este curso: angular es un marco de aplicación web de código abierto han vivido Google y una comunidad fuera de individuos y corporaciones. Si estás familiarizado con nuestro corazón del retrabajo angular de Jay, el nuevo Anglo DreamWorks es un completo relacionado desde el mismo equipo que construyen urge ángulo. Originalmente, esto realmente se llamaba angular, también. Pero esto llevó a la confusión entre los desarrolladores para gratificar el equipo anunció que separado hecho se debe utilizar para cada trabajo de marco con cárceles angulares, referentes dedo del pie, las explosiones maravillas y dolor angular dedo del pie empeoran nable tienda. A partir de esta grabación, angular ruso siete es la última. Una aplicación angular está abajo abusando de mecanografía, que, se puede decir es el video más sofisticado de Charles Estrict. Eso está bien de nosotros. Algunas de las regiones del idioma que actualmente no están en la especificación de JavaScript en él deben deslizarse . Pero como las protestas sólo entienden falda Java, el angular Fame viene con un compilador que transforma tus tipos podrían llamar a un igual en JavaScript core. Para este usuarios angulares, las aplicaciones angulares de espalda derecha son sorprendentemente farsas. Mayores te llevan al concepto de aplicaciones de pago único en SPE. Esto se logra mediante el uso de un modelo de router alimentado por angular que cancelan o componentes perezosamente. Esto es principalmente una mano a, por supuesto, lo que significa que te estaré mostrando el proceso de desarrollo de aplicaciones paso a paso desde cero. Si bien estoy usando un par de ejemplos básicos para que te sientas cómodo con el concepto, también estaré desarrollando una lista completa para una buena puntera de aplicación de pipa. Demostrar los conceptos principales fuera de angular. Siete. Todo el bien que he desarrollado en este curso está disponible para que no escriban, Instalar y ejecutar ese paso para hacerlo se muestran en las conferencias posteriores. No obstante, si quieres llamarte lo cual te recomiendo encarecidamente, puedes hacerlo escribiendo junto conmigo y pausando el video donde sea necesario. Mi nombre es ya sabes, soy un formador más suave, asesor desarrollador con una experiencia en la industria fuera de más de 20 años. Les doy la bienvenida a este emocionante curso. Hay muchas cosas que aprender, así que empecemos 2. ¿Qué esperas que you: Dado que angular se utiliza para crear aplicaciones Web, HTML se convierte en el prerrequisito número uno para realizar este curso. No necesitas ser un maestro en el tema, pero debes estar al tanto de algunos de los ataques básicos Son de equipo por crear encabezados. Dusan Spans ordenó otras listas, insertando imágenes e hipervínculos. No he usado mucho CSS en este curso, pero tener una buena idea fuera de CSS te ayuda a desarrollar bonitas aplicaciones Web para peinar. Nuestras aplicaciones web generalmente reutilizan algunos buenos marcos CSS, y en este curso he usado Twitter bootstrap CIA sistema de trabajo. Si tienes una idea sobre lo mismo, es fantástico. Pero no espero que lo sepas. Dondequiera que esté usando bootstrap, voy a explicar a qué van esas clases de CSS. Si bien HTML y CSS conforman la capa de presentación de aplicaciones Web enteras, la parte del motor de la aplicación se devuelve usando mecanografiado. Para todos los propósitos prácticos, podemos considerar mecanografiado como una extensión de Charles Bridge, por lo que si tienes un conocimiento básico de javascript, estás bien para ir. Se explicarán las características clave, como funciones de Adam y decoradores a medida que avanzamos 3. Configuración del software necesaria: en este video, te voy a mostrar el conjunto básico de requerido para empezar con una aplicación angular . En primer lugar, requerimos de Norges que se dirija hacia North Chester org y vemos un par de opciones aquí . Ahí hay unas ideas. El apoyo a largo plazo termina para cenar o dos en la actual pelea de Levin Dirt o cero Onda. Durante la instalación, es posible que encuentres algo en tu lavado aquí, así que haz clic en esto para descargar. Déjame ver. No nos importa este stock y abrimos aquello que inicia el proceso de instalación. Esta instalación se produce directamente. Es bueno a las opciones por defecto, ¿de acuerdo? Y eso se hace. No muy lejos puedo ir puntera terminal son Windows Command Brunt, Andi, busca aflicción de prueba del norte y ese es su 11.5 punto cero. Al insultar a Norges, también habríamos conseguido NPM usando el cual podemos instalar el necesario el marco angular y sus dependencias en el lavado destinado NPM y además asegurarnos de que algo como esto. 6.4 punto uno. Se puede actualizar el dedo del NPM nuevo ruso escribiendo NPM actualización que g n, p m y en computadoras Mac. Es posible que desee usar dedo del pie Sudo que podría pedir al administrador contraseña en Windows en B m del escritorio. El G indio es lo suficientemente bueno. Esto en realidad no dejará que el último ruso salga npm de Internet Onda hace eso como su cocinero instalación global. Esto puede tardar unos segundos, y una vez hecho, una vez más, podemos revisar El Bien de escondite ruso. Andi debería ver ahora 6.550. India Minutes North Package Manager utilizado para la instalación fuera de paquetes globales, frameworks y dependencias de proyectos al segundo aspecto fuera para proyectos que serían instalar angular. Ahora cuando es el angular angular es en realidad un montón de liberación de vuelo, Pero para empezar con un proyecto angular, tenemos pocas opciones. Número uno, si un buen recurso aquí tengo pocos ID que se puedan utilizar para crear un proyecto angular en, y las ideas se encargarán de todas esas cosas. Estaremos usando Visual studio court, pero que es más como una camada extra, Pero es una muy buena herramienta para trabajar con angular. Pero hay un do que poner para el techo angular es la interfaz de línea de comandos, que nos permite crear productos angulares rápidamente. Andi también tiene opciones de montones y montones de opciones para el dedo del pie de Estados Unidos generar pocos JavaScript o núcleo texteado además de construir e implementar aplicaciones también. Entonces estaremos usando esto. Y para ello, necesitamos volver al frente de mando e instalar la vista angular. Y para hacer eso, moriré cada ser sordo. G se puede decir instalado. Jack. Tachy son Daddy G. Instantáneo no importa. Y luego lo hice en Angulo. Es el año pasado. Vida. Andi. Si desea especificar un Washington en particular, puede decir por defecto, está apuntando del dedo del pie a más tardar y de nuevo, soy un requerido para usar. Por lo que debido a la instalación de Dash G para una instalación regular, no necesitas la opción pseudo. Y esta vez no lo hace el buster, porque sólo pregunta previamente. Y esta angular Seelye mira una herramienta muy útil, como una mención que pervierte mucho y mucha opción. Para empezar, tiene la opción de crear un nuevo proyecto. Tiene opción de iniciar un servidor Web de desarrollo y así sucesivamente. Tan muy bien. Si se hacen las cosas, podemos escribir n g death escondite Washington en GE es el comando que se instaló cuando hicimos la instalación angular CLI. Y aquí está la CIA angular, como Washington, 7.1 punto cuatro, ni la Pregunta de Jay, 11 punto por 11.0.0 y pocos otros lavados básicos se enumeran por aquí, que es lo que estaríamos usando. Si bien hay muchas ideas disponibles, una fuera del moster, probablemente las ideas poderosas son la piedra Web, que es comercial. Hay si también hay idea inteligente, que es principalmente hombres para el trabajo, pero también se utiliza para desarrollar aplicaciones JavaScript. Hay un angular ociosamente por. Babic vive, así que la gente estaba familiarizada con el eclipse que esto está en i d construir encima de un clips. Entonces lo cual también es muy bonito. Pero el más utilizado es el estudio visual Core, que diferente editor tastic XT para bromear por trabajar con el script de trabajo Aplicaciones industriales en que este es el que estaríamos usando. Es de Microsoft basado Off Atom, por lo que puedes visitar court dot visual studio dot com. Onda decidió antes es tus abogados y listan seres de descarga, así que ya tengo esto. Se trata de una instalación sencilla. Sólo tienes que descargar esto. Es un archivo ZIP, descomprimió y empieza a usar eso. Entonces tan simple como eso. 4. ¿Cómo usar ejemplos?: en este video. Te voy a mostrar cómo usar este zip hallazgo que has hecho al respecto. Entonces tengo que sacarlos aquí, contrarrestarlo a los actores y la agenda lo secuestra. Lo primero que tienes que hacer es remolcar descomprimir. En mi caso, solo puedo hacer doble clic en eso y se extrae aquí mismo. Por lo que abro un frente de comando en esta carpeta en particular. Entonces lo estoy abriendo. No me digas nada. Ve la mejor charla y luego baja. Si ves el contenido de esto, verás que hay un muy núcleo empaquetado o Jason, que tiene muchos dependientes, se enumera, se instala las diferencias en el empaquetado o Jason hay que tomar en el comando y b m en parada. Una vez completada la instalación, puede doblar un comando. guión servido de Ng lleno. Esto correrá los desarrollos. Había y abre la aplicación en tu defecto congelado. Se está ejecutando la aplicación. Puedo hacer clic en el incremento son determinados botones para probar la aplicación. A lo mejor cerrar el navegador. Eso es control. Ver sobre la Guerra Civil para detener esto para ejecutar la aplicación de la libreta telefónica Una vez más, voy a ir debajo de la misma y abrir un nuevo 10 minutos. Por lo que la ciudad en la carpeta de la aplicación y bajo comando NPM se siente parada para instalar todas las diferencias. Sé que la instalación es realmente vamos a ver cómo ejecutar esto. A diferencia de la aplicación anterior, ésta depende de un punto final de reposo, que, si revisas las antorchas del paquete en hay un comando. Maíz Jason, Señor Se agregaronMaíz Jason, Señor, lo que inicia un Jason. Había en 43 número de puerto doble cero, que lee los datos de DB slash más tarde Jason. Entonces la forma en que puedes hacer esto es por cualquier PM run Jason Server, y esto correrá el punto de restaurante en este Yuanan en particular. Y ahora puedo abrir otro frente de mando o puedo abrir en tu pueblo por comunidad carcelaria. Y entonces puedo decir en geezer Dash full, No, la aplicación se está ejecutando. Yo puedo ser la lista de contactos. Puedo dar click en cualquier persona de contacto en particular, y lo son. Puedo ir a nuestro nuevo contacto y tratar de agregar en su persona de contacto también 5. ¿Qué es angular?: angular es uno de los marcos más populares para construir aplicaciones cliente. A diferencia de los días angulares originales, el nuevo angular utiliza mecanografiado para desarrollar aplicaciones junto con HTML y CSS. El bloque básico de construcción de una aplicación angular consiste en directivas de componentes, tuberías sobre inyectables, que también se conocen como competencia de servicios. Vistas definidas, que son desactiva elementos de pantalla junto con su programa. Las directivas de lógica y datos son amantes de controlar la apariencia y el comportamiento fuera de los elementos HTML . Las tuberías, otro lado, se utilizan para transformar datos de componentes en diferentes formatos, por ejemplo, y donde el valor de cadena en inyectables mayúsculas son clases de mecanografiado reutilizables que definió la lógica empresarial fuera de sus aplicaciones Los servicios son de Singleton y generalmente inyectado componente tau triangular. Para que podamos utilizar cualquiera de esto en nuestra aplicación, debemos agruparlos en un modelo N G. Todo pecador tiene un módulo grosero, llamado convencionalmente como en Marty. Esto proporciona el mecanismo de arranque que inicia la aplicación. Por lo general, este modelo importa otros modelos funcionales, organizando su núcleo en distintos de modelos fijas, ayudando en la gestión del desarrollo de aplicaciones complejas y en el diseño para la usabilidad. Además, esta técnica te permite tomar una carga floja digital que está cargando modelos bajo demanda para minimizar la cantidad de cancha que se necesita cargar al arrancar. 6. Crea nuestra primera aplicación con Angular CLI: Ahora que tenemos toda esta configuración básica requerida, empecemos creando una nueva aplicación angular. Ahora es aquí donde tienes que decidir. Queremos crear nuestras aplicaciones. Me gustaría crear mi aplicación en mi escritorio y digamos que quiero crear un nuevo proyecto. Se crean proyectos angulares es en N. G. Así que vamos a echarle un vistazo basura escritorio de energía, salud dedo del pie. Identificar una de las diversas opciones que tenemos. Y es que listan comandos disponibles en sus descripciones afiladas, y puedes tomar ayuda N G, seguido de opciones Ahora en G nu es opción así que puedo decir motor que ayudas y entonces eso me va a dar ayuda en la nueva opción. Como se puede ver ahí, ¿hay un montón de opciones que tenemos. Pero lo único que tenemos que hacer es el 1er 1 es el nombre que teníamos que dar, que es el nombre del nuevo espacio de trabajo. Básicamente, va a crear una carpeta, que es tu producto. Folder también hace eso como tu proyecto por nombre también, y hay pocas otras opciones. No lo creo. registra cualquiera de estas opciones. Tiempo de desánimo. Vamos a seguir adelante y explorar eso. Así que toma tu Benji nuevo en Digamos por un jumper primero podemos cambiar el nombre que luego quieras en el futuro. Entonces esto sí te va a hacer algunas preguntas. Apenas un par de ellos. Número uno , preguntó. ¿ Qué quieres? ¿ Un eso redondeado? No. Ahora el enrutamiento es el que escribió básicamente el modelo de enrutamiento que permite que las aplicaciones angulares sean aplicaciones de trenza única y todo el propósito fuera. aplicaciones web angulares son para crear aplicaciones de un solo lugar. Aplicaciones de un solo bit básicamente significa que tienes un solo hallazgos HTML en los lotes y mucho de archivos parciales que estarán ahí en los señores del navegador. Sólo se carga un archivo html sobre todo lo demás. A sincrónicamente haciendo que la aplicación se vea muy rica en experiencia. La experiencia del usuario será muy agradable en. Hay montones y montones de ejemplos hoy en el mundo que puedes echarle un vistazo It, incluyendo Gmail, Facebook y un par de otros. Estaríamos haciendo esto en nuestro proyecto, por lo que un a pesar en el tiempo, no queremos interferir dedo angular, pero estaríamos configurando manualmente en esta información de enrutamiento. Entonces simplemente voy a decir que no, no quiero que se añada este flotante. La segunda pregunta es acerca de que es hoja de tiempo on. Voy a estar usando bootstrap para este proyecto en particular, que es un que es uno de los más populares se puede decir el en marco CSS. Es creado por Twitter. Andi on Es realmente genial. Entonces vamos a usar eso solo en dejarlo en CSS Chris Ender, y luego va a crear el proyecto. Andamios también todo tipo de encuentra su creación. A veces esto podría parecer un poco intimidante, pero vamos a mirar a remolque. A la mayoría de esto como en lo que están en nuestro proyecto. También ejecuta lo que instala el NPM. Lo que hace es que hubiera creado un archivo llamado Package Dodgers. Y como se puede ver, el paquete doctores y está aquí, el paquete comienza. Jason es el lugar donde tienes toda esa dependencia está enumerada, y es insultante. Todo el dependiente es actualmente ahora esta dependencia es incluir algo así como una elección de transferencia de trabajo mecanografiado a JavaScript se están construyendo fuera. CS es hay un There an an Rx jays que se utiliza para llamadas Http asíncronas, y hay un montón de ellos que están en stock ahora. La dependencia adicional es como bootstrap. Por ejemplo, podríamos tener que instalarnos si quieres incluir nuestra consulta J combinada junto con el angular. Eso también lo puedes hacer aquí y ahora que lo ha hecho, podemos abrir una guerra Civil que aún estoy en mi escritorio. Tengo que meterme en la carpeta llamada como primero en la Teoría. En primer lugar, me siento usando visuales al acuerdo. Deberías poder decir Poor didacta dedo del pie abrir esta carpeta en particular en tu editor. Si no, siempre se puede abrir visual Studio Court y luego se puede decir que quiero abrir ese archivo en particular. Por lo que he tenido opción de carpeta abierta aquí. Haga clic en eso. Voy a mi escritorio en escritorio. Tenía esta primera vez decir Abierto ahora. Aquí podemos echar un vistazo a todos los demás hallazgos que se generan. Dado que nuestra aplicación angular se crea usando mecanografía, que es un super set off JavaScript, tiene pocas opciones aquí. Elect es pelusa toca, y esto se trata básicamente de las reglas y reglamentos a seguir. Cuando estás trabajando con el mecanografiado en puedes habilitar algunas opciones visibles de este Jason en particular. Encuentra algunas de las reglas básicas, el conflicto obvio. Jason básicamente tiene alguna información como ¿Dónde crees que se debe crear el archivo de salida ? Pero eso es tan inteligente Se debe usar. ¿ Cuál es el ¿Cuál es el objetivo a utilizar? Eso significa que si estás compilando tus hallazgos mecanografiados en JavaScript. ¿ Cuál es el lavado? Normas de transcripción que quieres seguir para que las rosas mayores obtengan apoyo de aquí y así sucesivamente. A menos que muy tranquilo, No necesitamos volver aquí para nada para que podamos cerrar esto fuera de curso. Me leen dot MD que en realidad consiguen si estás publicando esto en remolque, consigue tina. Podrían leer todo lo del Norte sobre este proyecto en particular. se puede ignorar totalmente. Ellos son el inicio del paquete, Jason, que es uno de los hallazgos más importantes que tal vez quieras estar, uh, buscando en remolque. Y eso tiene algunas dependencias en el desarrollo. Dependencias y dependencias de desarrollo en persona. Algo así como el marco como el de Jasmine son carmín y mecanografiado. y cosas así. Por lo que sólo se requiere durante el desarrollo. Pero estos van a estar empaquetados en tus fuegos de construcción también. Estos son requeridos en sus algunos comandos de acceso directo aquí. Entonces cuando n g, este es el comando que se va a usar. El comando N G forma parte de los Módulos Norte. Andi hay poco directorio bin oscuro. Y como puedes ver que dentro de eso tendrás un N g en Windows, tendrás lesión. Dudas. CMD Entonces eso es lo que va a ejecutar. A pesar de que hemos instalado globalmente, elegirá el que está disponible localmente cada vez que estemos bajo el mando. Y eso es lo que está aquí ng. Entonces aquí es donde puedes volver y cambiar el nombre de tu proyecto. Si sientes que estás publicando este proyecto en algunos repositorios públicos, aquí es donde quizás quieras cambiar el nombre de abortos si quieres. Entonces esto es lo que pasa es el Jason angular. Este es un expediente importante. Estaríamos viniendo aquí en un dedo de la cama, entender lo que está pasando son cuáles son la configuración básica que podríamos querer cambiar. Entonces aquí, por ejemplo, dice que qué otras opciones de construcción, ya sabes. Entonces algo como cuál es tu HTML inicial ¿cuál es eso? SRC slash index HTM unzip goto SRC Verás que hay un índice html Inserto fuera de este HTML si quieres decirlo así, por ejemplo Holmdel html puedes volver y cambiar que estabas aquí Entonces también está el principal que dice que cuál es el archivo principal que tu sello angular debería empezar a buscar ahora. Lo que pasa es que detrás de la delgada, angular CLI USA la espalda que es un modelo bundler Así que lo que significa que el único hallazgo que va a investigar es este médico principal Sí, que está justo aquí bajo SRC tenemos un s sucio principal y luego lo comienza a buscar en este archivo el. Entonces entra en este núcleo de cazador en particular. Creo que puedo hacer un clic de control. No. Entonces si miras esto, si miras estos módulos de nota en angular, hay un núcleo en que tiene un indexado o hizo RTs esencialmente que va a ser indexado R J s . Ahora va a entrar en este archivo y luego se va a abrir el dedo del pie este. Entonces, así. Se inicia a partir de los 30 años principales, luego entra a toda la estructura del árbol y carga a todos los amigos que son que están en tu aplicación y luego se pregunta eso en un solo archivo o en un montón de archivos. En realidad, lo ha hecho. Por lo que hay un hallazgo principal que el polen siente cinco sobre. Si es básicamente nuestros archivos los que se requieren para apoyar al hermano mayor, sobre todo el Internet Explorer has ganado cinco aquí llamado Hollifield inicio dos años. Se puede ver que eso está aquí, y se han cometido muchas cosas por aquí, y se puede ver eso muy claramente. Yo 9 10 11 y Crume menos de 55 solicito todas estas políticas. Todo lo que tenemos que hacer abusar del dedo del pie. Seleccione esto y luego control de arma de mama. Slash en Windows y comando Slash en Mac y ese boceto un elogiado. Y ahora, si lo guardas y cuando estés en tu aplicación, verás que incluso tu aplicación se ejecuta en nuestro Internet Explorer o 1911 así como el lavado antiguo en menos de 55. Y luego hay unas instrucciones ahí todas autoexplicativas, así que no tenemos que preocuparnos por esto. Sólo voy a decir, deshacer y salir de esta pelea en particular. Entonces, básicamente, tienes todos estos archivos que son que se pueden administrar en tu aplicación. Algunas otras cosas. Por ejemplo, activos que significan cualquier cosa en tu sexo. Generalmente la carpeta Activos. Convencer a los imagers en las imágenes generalmente. Iconos son Puede que tengas algunos videos y así sucesivamente por lo que se mantendrían por aquí. Entonces en este momento, en un sexo, se puede ver que no hay nada en este punto en el tiempo. Pero en Calif tus archivos. Si tu proyecto solicita y no puede soportar imágenes estáticas, es buena idea mantener eso en ese sentido más completo. Y refiérase a que sus correos electrónicos HD donde sea que se requiera. También tiene un referente off strikes. Aquí es donde regresaremos y agregaremos otra entrada para o bootstrap. Y en caso de que si tienes 1/3 de guiones de fiesta, puedes especificar que también eres. Es un área fuera de todos los guiones que requieras, y se empaquetarán en tu comedor de aplicaciones. También tiene otras opciones para, por ejemplo, la internacionalización que es otro tema que cubriremos en Dept. Posteriormente. Vamos a cerrar esto y si vas al punto principal SRC es Dice aquí algunas cosas básicas pero no te preocupes por esto. Volverá y investigará a este médico principal. Sí, en efecto. A. Pero en lo que respecta a nuestra extensión de aplicación, los archivos que importa es el TML de almacenamiento de índices nuevamente regionalmente. No entres que estás pero puedes volver y añadir algo de CSS que no son accesibles. ¿ Por qué el norte son NPM? Se puede agregar directamente por aquí, lo cual generalmente no es una buena idea. Pero lo haremos en caso de que se requiera cardos. La única parte del es el único contenido en HTML. No tienes que añadir nada más ahora, sorprendentemente son extrañamente. Se puede ver que hay algo llamado fruta de corte de fruta, que es que no es un HTM de eso, pero parece HTML ahora, básicamente, básicamente, esto es, uh idealmente, esto es se supone que es algo así como una ruta de salpicadero de puerta. Pero entonces los navegadores no se quejan de los tiempos que no se conocen. Ahora lo que realmente sucede es que cuando corres. Por qué, cuando Irán, Tu proyecto angular, habrá archivos de guión adicionales inyectados por aquí. Eso lo verás en un minuto. Esos incluyen marco angular. Entonces, cuando el marco angular se cargue en el opio Charleston, escaneará una vez más todas estas etiquetas y buscará este tipo en particular encendido, luego comienza a inyectar componentes aquí ahora donde los componentes los componentes que crean generalmente se mantienen en el árbol de Abdullah. Es una convención. Siempre podemos decir: No, no va a ser una siesta. Va a estar en otro lugar, pero eso nos considera tu carpeta de proyectos. Entonces todo lo que vamos a cordar está dentro de esta app. Y, como pueden ver que son pocas las peleas ya creadas para nosotros. El 1er 1 es el en modelo TS. Ahora angular es todo sobre la ización modular. Dice que se llama a muchas cosas así, pero las agrupa en módulos. Hay un modelo que se crea en, pero este modelo es modelo de motor de coche es cierto como módulo de motor en su llamado a ese modelo. En este punto, siempre podemos renombrar esto si quieres, pero eso tiene un montón de referencias aquí. Por ejemplo, este bloque de declaración consiste en los componentes que creamos aquí en Google. Pasa mucho tiempo en este, y luego hay otro modelo del que pueden depender mis modelos, que es, como, en este caso, es mercado de navegadores. Por lo que el presente modelo básicamente se trata de proporcionar el navegador son abajo manipulación, Se puede decir, porque no hacemos ninguna sola manipulación hecha a menos que quieras indicar consulta g y cosas así. Pero de lo contrario no estaremos usando ninguna en la manipulación Don. Entonces eso es por aquí. Por lo que las importaciones iban a referir a algunos modelos externos. Podrían ser nuestros propios modelos adicionales, también para nosotros blancos. Uh, este es un lugar donde vas a estar empezar todos los servicios que vamos a tener. Volveremos y miraremos en esto Indeed. A en bootstrap. Dice que Hey, este es un componente que se buscará en la estrategia de índice TML. Ahora bien, si simplemente pasas a mirar el índice dot html por un minuto, es tu app. Correcto corte Desarraigo. Entonces aquí es donde va a decir cuando angular empiece a bootstrapping dice, Hey, tengo que buscar este componente de aplicación en el índice. Html en componente AB se identifica usando esta pila. La pregunta es, ¿cómo así Si voy al componente de la aplicación Así que esto es un Esto básicamente es un algo que se importa de este componente abduct, que es este Abdur componente RTs para abrir posteriormente tortillas componente. Se puede ver que está exportando un clásico en componente, pero está decorado con ese componente. Y otra cosa que verás aquí es que es ab dash route y este es un selector. Entonces como no hay ningún símbolo especial asociado a esto como dot nuestro hash, asume que se va a utilizar como ataque en rutas slash desarraigo. Y eso es lo que en realidad vemos aquí en escombro desarraigo. Entonces si lo hubiera dicho aquí, no lo hagas, por ejemplo, entonces busca una etiqueta en cualquier momento con una clase CSS off desarraigo. Por lo que esto no funcionará en este incidente. Esto podría tener que decir trato último igual al dedo del pie después de la raíz de ceniza slash hacer. Es así como se debe dar en get. Si hubiera usado el hash en su lugar, affair dot entonces debo tener que dar tu I V igual a dos iguales desarraigo del dedo del pie. Entonces básicamente esos selector de un componente determina cómo se identifica ese componente en tu HTML, así que lo voy a dejar como está. Volveremos y revisaremos eso más adelante. Cambia esas cosas en explorar, experimenta en esas cosas. Pero por ahora, lo voy a dejar como está. Voy a guardar este archivo en guardar este archivo a Andi. Se puede ver que se trata de un plan sencillo con una variable miembro llamada Title. El título de este Primero aquí arriba el día. Este título es una variable que se puede utilizar en el HTML correspondiente a este componente. Por lo que cada componente tendrá un ID de asociado HTML. Ahora mismo lo puedes ver dice Plantilla. Estás en esa plantilla. Ural corresponde a la misma carpeta que consiste en Abdullah Componente conocimiento demonio, que está justo aquí. Si abro eso, se puede ver que es un archivo HTML que consiste en algunos do con una imagen, entonces la bienvenida a y se ve esta variable. Esa variable viene de esta parte particular en este símbolo especial aquí, corchetes rizados, corchetes dobles llamados interpolación O R. Manillar. manillar es el A B I que brinda soporte para esta plantilla, Parsi. Pero de todos modos, el valor fuera del título se inyectará por aquí. Tenemos algo de ventaja a lo que tenemos algunos enlaces aquí. Por lo que no vamos a tocar ninguna de estas cosas. Y ejecutaremos nuestra aplicación y luego veremos cómo va a ir esto. Por lo que he estado abierto una nueva terminal. ¿ Todo bien? Voy a abrir una nueva terminal ahora mismo. Ya estoy en esa ciudad. Primero. Ya lo hice por Stan. Voy a decir n g resolver esto en realidad va toe iniciar un servidor web de desarrollo. Cuando empiece, va a usar eso de nuevo. Dwight back va a empacar toda la pelea que tenemos. El html que DS archiva todo. CS dice todo en un solo desempleado. Bien. Bien. Andi en. También iniciará nuestras aplicaciones. Si quieres. También puedes decir dash for toe abrir el navegador por defecto en DSO los extremófilos, el índice, es equipo lo. Entonces si hago esto, podría tardar un tiempo porque es la primera vez que se abre. Pero va a mirar a todos los amigos que tenemos combina a partir de la puerta principal 30 años para luego meterse en toda la reestructuración y construir la pelea residente. Una cosa que también hace es que va a mantener ese servidor activo y funcionando aquí. Como puedes ver , sigue funcionando. Pero como cada vez que haga algunos cambios, verán que los cambios se verán afectados inmediatamente por aquí. Por ejemplo, si vuelvo a los visuales a la cancha, permítanme reducir la altura de esto. Entonces en lugar de esta bienvenida dedo del pie Titán, puedo saludar. Este 'll está mintiendo. Y luego acabo de usar el título, y en cuanto a lo guarden, verán que hay una compilación en marcha, y esa compilación lo hará. Una vez realizada la compilación, se va a desencadenar muy fresco en el navegador. Todo lo que tengo que hacer es presionar comando como nuestros controladores y windows, y verás que es un re compilando, y en un tiempo puedes ver que se inicia en reinicios por navegador, y es Hola, este es mi primero, y en lugar de esto primero arriba, puedo irme a casa. Vuelvo a mi fuente anotada este año, y puedo decir que este es mi forzado angular siete en A y guardarlo en. Sucede lo mismo en se puede ver que la variable ahora se imprime por aquí. Mi primera aplicación Anguila siete. Y si quieres quitar esos enlaces y cosas así, lo que vemos aquí para que pueda subirlo por completo. Tú l slash Julia, Guárdalo en. Se puede ver que se ha ido, ¿verdad? Por supuesto, esto en. Entonces no necesito así que sácalo de esa Siria. Ya está hecho. Como puedes ver, es crema rápida. Andi, aquí es donde puedes seguir cambiando muchas cosas. Entonces, por ejemplo, puedo volver atrás y añadir un nuevo componente y los componentes de nuevo. Un montón de archivos CSS ds html. Eso es todo lo que queremos hacer aquí en la posterior aplicación. En caso de que si quieres nuestro bootstrap, por ejemplo, digamos por tipo tu aeropuerto on, puedo decir socio. Ahora esto tiene una abreviatura de imagen para que visual Studio court soporte Emmett Abreviation , lo que significa que puedo borrar algo como PT y botón dot bt y dark 50 y primary. Y luego puedo escuchar los corchetes rizados decir Esto es mantequilla y primero puedo ender y verás que el HTML Court completo se genera fuera de eso en Esta es una opción realmente, realmente super cool estaremos usando este tour son aplicación angular en Do usted? Al final de esto, deberías estar muy cómodo con esto y guardar esto. Volver a un navegador. Veo un botón que es bastante ordinario, pero si voy a conseguir un buen stop dot com on, verás que hay un Esto es de Tudor, que, que es un nadador CSS muy popular on Si voy a ir a la documentación aquí en allá es un botón. Como se puede ver debajo de los componentes, debería ver botones encendidos. Ahí están estos botones Éxito secundario primario, Peligro. Por lo que tendré que usar los nombres de clase CSS apropiados. Sí, se requiere obediencia sobre Bt y éxito primario secundario, Peligro, advertencia y así sucesivamente. Andi, esto está muy bien documentado, por lo que siempre puedes volver y echarle un vistazo como cómo trabajar con un botón o cualquier cosa para el caso. pero con el fin de trabajar con esto por lo que necesito instalar. Entonces, ¿qué? Yo los haré, ya sabes, control, Ver aquí primero. Por lo que los desarrollos ya están parados en entonces realmente lo hago nt m i para instalar en este momento . No dash G porque no es un marco. Zanahorias diciendo. Es solo un conjunto de peleas bibliotecarias, tu instalador, y así es como haces pull struck, y esto se instala localmente. Por ejemplo, una vez que presioné Enter, verás que va a ir a la Red y descargar las probables peleas necesarias en Objects Packaged o Jason. Entonces eso va a echar un vistazo a eso en nuestro editor. Entonces tengo tu paquete. Empieza a algunos y verás que Packaged o Jason ahora se ha actualizado con bootstrap para doctor, escribió uno. Tengo una nota modelos. Ya verás que hay bootstrap en alguna parte. Se enumerará secuencialmente alfabéticamente. Voy a bien, A veces no refresca tu ahí la opción de refrescar. Haga clic en eso en Ahora debería poder ver bajo modelos Norte. Veo que las botas se detienen aquí La médula y hay un CSS y Js. Seleccionaré ver assis te contra como este bootstrap significa doxy. Sso es el archivo que tenemos que actualizar en punto angular Jason, voy a ir en remolque el angular que puedes mandar ser nuestro control, estar en ventanas y te llevas tu angular. Se puede ver que me pongo angular que Jason. Veo que por aquí esta es la ubicación. Muy se puede agregar algo de CSS, por ejemplo. Puedo ir aquí y decir que Lord subrayó modelos. Esa es la ubicación donde tenemos bajo eso tenemos lo que se llama Boonstra. Por lo que tenemos booster dissed CSS y luego buena correa dar lin dot CSS Y con una coma sobre Siria , lo en cualquier cambio al sitio angular Georgeson que hayas hecho Para que eso surta efecto, debes detener el desarrollo ese servidor que voy a hacer y luego reiniciarlo. Puedes hacer ya sea Engy así todo lo que puedas decir npm iniciar uno en la misma esta vez no necesito el navegador pash fortuna porque ya está abierto el. Y cuando hagan esto, si vuelvo al navegador Andi, revisa mi aplicación. Debería ver un botón cambiando con CSS aplicado en eso s. Dice combinado con éxito. No refresqué aquí. Entonces hagámoslo manualmente. Entonces cuando hago una actualización, se puede ver que ahora el botón es un botón de cuello azul encendido. Por supuesto, si vuelvo a mi puntuación trasera, cambie esto de dedo primario guardar peligro, por ejemplo. Guárdalo en. Se puede ver que va a estar debajo de él, pero de alguna manera, correcto. Por lo que 20 de opciones en bootstrap. Exploremos eso a medida que avanzamos. 7. Crea una aplicación angular desde cero: En el video anterior, vimos construir el centro de software requerido para trabajar con un proyecto angular, un proyecto angular utilizando el N. G o CLN angular. Hicimos algunos cambios en nuestras aplicaciones. Entonces cómo funciona todo el asunto en este modelo en particular, quiero mostrarte como lo que es un componente angular. ¿ Qué es un módulo? ¿ Y cómo arrancas para ese componente? Todo desde cero. Entonces para esto y se utiliza el mismo proyecto que utilizamos en el video anterior. Pero voy a borrar todas las cosas que son 100 It, especialmente la parte arriba de la misma. Entonces voy a seleccionar muchas estas multas aquí. Y si selecciono en borrar, deberías ver que habrá proyecto de editores. Entonces si digo ver desarrollador en herramientas de desarrollador son Charles mantuvo preocupación, que es, Ah, nave de mando J Control Shivji. Entonces aquí es donde vas a ver a otros como hablar esto por el lado derecho para que podamos ver la página así como esta. Entonces si voy aquí y elimino estos archivos, verías que va a causar un y un puñado de adultos en un minuto porque la historia final existe la calle compilando, y está regresando con cosa que hey le falló al Señor. Ni siquiera tenemos un módulo at encendido. Y eso es una especie de eso es Eso es otro que viene porque nuestro principal Doherty s que es el punto de entrada ahora, ¿dónde se menciona eso como un punto de entrada en angular Jason? Vimos que el cinco principal no es más que SRC dot Médico principal. Sí. Si hace domaine dot ds, verás que se refiere toe app module el cual acaba de saber ser borrado. Entonces lo que voy a hacer es que me lo voy a sacar de todas estas cosas en una importación. Así que digamos importar nuestro perro slash ab slash Escuchemos, por ejemplo, mi ejemplo , uh, como samadi, como sabes, que no existe. Eso ha creado uno aquí, Así que voy a ir a la app andan voy a decir nuevo auto fino mente ejemplo APD RTs ¿Y si lo vendo? Si simplemente tardó tanto, Andi entonces tomo tu decirlo de mi ejemplo Savage. Vamos a ver qué pasa cuando realmente fresco. Déjame reiniciar los varios Angie So? Por lo que no hay dirección que pudiéramos volver al navegador. Ya verás ese hola desde mi app de ejemplo. Viene la salida, pero en este punto en el tiempo, ya no es una aplicación angular porque no hay angular hacia adentro. Entonces lo único que está en orden es que tu mochila mira a la puerta principal, desgarra en las importaciones este archivo, y en ese archivo, todo lo que tengo hasta el registro de puntos de la consola. Aquí no hay angular hacia adentro. Entonces aquí es donde queríamos conseguir una aplicación angular. Entonces voy a ir a limpiar esa clase. Entonces es una clase. Digamos que se llama Hola, componente mundial. Andi, nada ahí. Te voy a dar un mensaje para más tiempo. Cualquier cosa. Yo sólo voy a tener una clase. Pero esta clase se convierte en un componente al agregar at component a su plus. Yo lo sé porque este es un proyecto angular. El soporte angular mucho fuera es proporcionado por vía score, y también es automáticamente me dan auto import desde el núcleo angular en. Cuando hago eso, aparece en decorador en mecanografiado siempre se da con corchete rizado y un montón de opciones en. La única opción que estoy viendo en este momento va a ser un selector. Y ya que nuestro selector waas ya y desarraigo en índice filo humano probablemente pueda ver que en índice HTM y tenemos este enfoque slash desarraigo. Voy a usar el mismo selector fuera de curso. Si hago algunos cambios por aquí, puede que tenga que hacer lo mismo en inicio de índice. También es humano. Y una cosa más que quiero dar aquí es una plantilla. O bien puedo dar una plantilla, que es un contenido html de borde duro aquí o no puedo referirme a un vapor y archivo externamente. Entonces por el momento, voy a dar plantilla y voy a usar esta cadena de plantilla, que se llama Ptolomeo Type múltiples líneas. Entonces me voy a quedar puro. Es uno y luego cortarían borde uno en el ender oprimido. Ese párrafo básico en un PR un mensaje de ya sabes, slash B on. Esa es mi salida para los componentes. Dondequiera que se acerque este eslabón de desarraigo de componentes, quiero que aparezca este mensaje en particular así que en este momento hemos creado una clase sobre la clase es un componente, pero tenemos que darle a este dedo angular en Say that Hey, inyectar esto en esta ubicación en particular. Y para hacer eso, hay que hacer una parte componente fuera de un modelo. Y un modelo no es más que plantas. Llamémoslo después de lo que eres. Cualquier nombre fuera de nuestra elección. Mi modelo, por ejemplo. Pero es solo que a las plantas igual que a cómo se trata de una clase regular convertida en confiada. Usando este decorador, tenemos que usar ese módulo de motor una vez más. Auto importación desde esa cancha de corte de corte angular. Andi, aquí es donde dices eso. Hey, tenemos que bootstrap este componente en particular, a veces un booster on No digas que Hola eran componente. Pero ahora mismo, todo el componente oral no forma parte de este modelo. Y para decir que esto va a ser parte del modelo decimos aquí declaraciones. Andi, en las declaraciones iban a decir una lista de todos los componentes que vas a tener aquí . Parte de este modelo se enumerará por aquí, pero bootstrap es sólo el que se va a utilizar en el índice. Es humano. Entonces aquí es donde saludo. Componente mundial es uno de mi componente ahora, un requisito mínimo aquí es que el soporte del navegador porque en última instancia queremos dedo angular modificar esa cúpula para que no lo hagan. Las manipulaciones se realizan mediante el uso de un módulo que se llama como módulo de navegador. De acuerdo, así que no parece capaz de sentarse automáticamente vienen. No hay problema. Siempre podemos importar importar importar off de se puede decir en angular slash browser off desde más cerca en el día se puede ver que hay uno llamado módulo congelado. Eso es lo que queremos que sepan, incluyendo nuestra aplicación que viene ahora que tenemos un componente, un componente esta parte del módulo angular llamado en Marty. Ya ves, siguen ahí no hay todo puesto su refrescado, pero no hay incómodo. Eso es principalmente porque nunca dijimos modelos angulares tan vacíos. Podemos despejar un número de modelos angulares, pero nunca dijimos eso. Usa este modelo y bootstrap eso, y aquí es donde necesitamos una función. Convocatoria. Esta es la última parte del rompecabezas. Por lo que digo, importar desde en angular slash plataforma browser dynamic. Esto proporciona una función. Es uso que eso de crece una dinámica que es una función. Entonces vamos a usar esta función. Andi llama a esto y luego regresa sobre objeto. Y dijimos que Hey, impulsa el modelo para en el mercado. Entonces si voy aquí y luego digo, ¿cuáles son los modelos? Se llama en módulo. Y ahora si guardo esto, deberías ver que obtenemos nuestro componente. Pueden ver ese gran mensaje nuestro hola mundo desde que conocemos Forma negra Brother Dynamic es el que está haciendo el trabajo. Por lo que este básicamente escanea dinámicamente tus demonios con bordes índice. ¿ Por qué se busca ese índice html? Si miras la puerta angular Jason, dijimos que, Hey, este es un archivo que se supone que es bootstrapped. Entonces cuando dices plataforma browser dynamic dot bootstrap model, va a tomar este modelo y descubre el componente bootstrap. Y es una compañía hola mundo. El componente de tierra hueca se identifica como una etiqueta llamada Uproot, y se va a buscar en el html índice para este aboot en particular. Si se encuentra, entonces aquí es a donde va. Toe inyectar en este contenido en particular se va a colocar en el lugar donde Absolute Slash aprobó en su lugar. Y eso es lo que está pasando ahora mismo es Incluso es el grabado ese componente primero y luego se enciende, entonces tal vez hace una parte de un módulo. Pero Angulo inicia el trabajo una vez que esto se da, por lo que va a buscar un modelo. Y ese modelo tiene un componente bootstrap, y ese componente es estado. Entonces la pregunta es, ¿Puedo tener múltiples componentes? En un HTML? Por ejemplo, ¿puedo guardar tu Let's toe index html? Permítanme escuchar un listón de bienvenida en bienvenida marchita para producir cualquier todo puesto como tal. No hay errores, y no hay nada está pasando en este momento. Pero puedo despejar otro componente aquí y hacerlo parte del mismo modelo sobre él es posible . Por ejemplo, puedo decir su componente de bienvenida de clase, Andi. Yo solo digo aquí, quejosa un componente y tengo que dar selector mínimo en una plantilla. Te daré un selector es ab bienvenido. Eso es lo que usamos justo ahora en el índice html aquí y luego diría que la plantilla para eso es una simple H uno o H tres. Bienvenido a angular. Por lo que en entrenamiento slash extreme, lo guardo. He creado un componente. No va a aparecer principalmente porque no forma parte de este modelo en particular. Entonces para que sea parte del modelo, tengo que decir que es un componente bienvenido. Ahora ves que lo he hecho como parte de esto, pero en el índice html, está ahí. No aparece aquí principalmente porque tenemos así decir que tiene que ser una de las empresas bootstrap on. Ahora, Si fuera bienvenido, componente declaró, ojalá debería ver un mensaje de bienvenida. También Así componente bootstrap es el que va a estar buscando índice. Es alemán. Entonces si no hago eso aquí en adelante, déjame sacarlo de eso del índice, está el demonio encendido. Por lo que ahora todavía puedo hacer este componente presentado al usuario haciendo de este componente parte de los componentes hello world como no tienen, puede ver que no está incluido en mi pie. Pero puedo ir a mi hola componente on en el componente helo. Siempre puedo proporcionar. Aquí estamos. No lo sé. A lo mejor también porque de todos modos, va a imprimir extremo. Entonces voy a decir aquí, ak tash, Welcome slash. Entonces como se puede ver eso ahora. No necesito que eso sea parte de la lista bootstrap aquí porque no se va a buscar en el índice HTM. Pero en cambio, va a ser parte de otro componente. Hola, er, componentes. Entonces como asunto guardado en este momento, no está ahí. Si lo guardo y si vuelvo aquí, deberías ver eso. Bienvenida. acerca el entrenamiento triangular siete. Entonces Así es como puedes crear un componente, convertirlo en parte de un módulo N G. En nuestro caso, es el modelo APP y luego bootstrap, eso s o que Apple realmente se va a inyectar. Se van a inyectar los componentes. Tau nuestro índice html. Por supuesto, aquí se pueden reflejar muchas cosas. Por ejemplo, no es buena idea mantener todas estas clases en un solo lugar. Es una buena idea mantener esto en un aspecto laboral o mecanografiado. Módulo exportado. Exportar Este por aquí. Está bien. Otro modelo donde importas todo y luego empiezas a usar eso. Entonces eso es lo que estaríamos haciendo esencialmente. Pero sólo dedo del pie te hacen entender en un real el básicamente en el módulo de motor es el que está bootstrapped por el modelo de motor angular tiene en el montón de componentes que se refiere a Andi. Después recoge uno de los componentes para estar buceando en el índice. Es equipo, eso es lo que en realidad está haciendo. 8. Descripción eña de un compnent angular: congruente es el bloque de construcción fundamental, a menudo aplicación angular. Se demuestra la interfaz de usuario, los datos correspondientes e incluso las funciones de manejo. Además, una aplicación angular puede considerarse como un árbol de componente, con el componente raíz teniendo uno más componentes hijo y cada uno de estos componentes teniendo componentes hijo fuera de sí mismo sobre así sucesivamente y así sucesivamente. A competente generalmente consisten en. Tres Aspectos número uno, un mecanografiado son clase de seis años con variables miembro que representan los datos del modelo y métodos que representan el comportamiento fuera del componente. Número dos, una plantilla HTML que representa la interfaz de usuario que puede capturar las entradas del usuario en el modelo. Posteriormente, nuestro presente, los datos del modelo al usuario y finalmente el número tres, un puntera de hoja de estado opcional realzan la apariencia fuera de la interfaz de usuario. Tratemos de entender lo mismo con un ejemplo. Considerar que la clase en el componente contador es sólo un año ordinario. Seis clase que tiene un miembro, conteo variable de autos y dos funciones incremento y equipo. Como sugiere el nombre. Cuando llamas a estas funciones, los incrementos son perjudiciales. El valor fuera del gator miembro Juntos, esta clase comprende fuera del estado y comportamiento de la empresa con el fin de presentar lo mismo al usuario. Necesitamos un núcleo HTML. Echa un vistazo a este fragmento HTML. Como puedes ver, estamos incluyendo el conteo valioso y el método llama el acuerdo y el incremento del dedo. Este demonio de cobertura tiene acceso al estado competente y al comportamiento. El diablo Curly brackets, también conocido como manillar, une los datos del modelo en la U. N. Los cambios a los datos modernos se reflejan de inmediato. Las funciones de confianza son hueso al que estás usando las suyas propias. Brackett. Por ejemplo. El chasquido se apagó. Los botones aquí están asociados a las funciones de acuerdo e incremento definidas en la clase de competencia, por lo que al hacer clic en un botón se desencadena el método asignado. Llamar cambiar los datos de Morgan, que se reflejarán instantáneamente en el que eres con el fin de combinar el plus en HTML para hacer un componente, utilizamos tipos grupos, decorador. Esto es similar a las anotaciones y atributos de oscuridad de Joe aquí. El plus en mostrador está decorado con ese componente. Decoradores en Desesperado se pasa un objeto como perímetro para el decorador de componentes. Aquí estamos especificando dos propiedades importantes. En primer lugar, el selector define la forma en que se utiliza el componente. Por ejemplo, en contador sin ningún prefijo a símbolo implica que el componente debe usarse como un elemento HTML. Si usa dark at counter para la propiedad selector, entonces el componente se utiliza como una clase CSS. Si utiliza el registro cuadrado alrededor en el contador para la propiedad selector, entonces el componente se utiliza como un atributo, a menudo elemento html y una última. Si utiliza el contador hash up para la propiedad selector y se utiliza como idea el competente. A menudo es elemento de Gmail. La práctica general y la recomendación angular es que los componentes se utilicen como elementos HTML . El segundo plantilla de propiedad corresponde dedo del pie la parte html del componente. Como puedes ver, hemos utilizado plantillas del año seis. Cadena para incrustar núcleo html multilane. En última instancia, la definición de clase en HTML se puede mantener en archivos separados. Esto todos esos modularidad y separación de consentimientos. Para ello utilice la plantilla Ural en lugar de propiedad de plantilla y asignó las partes relacionadas a menudo externas. Html cinco 9. Usa Angular CLI para generar nuevos componentes: tomemos ejemplos de crear nuevos componentes usando la CLI angular o el Command Engy sobre el monstruo. El trabajo de los componentes Ya he creado un nuevo proyecto angular llamado Contador en un Zoo Conceit Salario ejecutado en años, así que bienvenido a contratar y ha conseguido los enlaces básicos aquí ya abrieron lo mismo en visual studio core. Esta es una aplicación totalmente nueva. Nada ha cambiado excepto que he agregado bootstrap CS es a éste. Aparte de eso, no hay nada que así que tenemos aquí en SERC app y tenemos tu app componente de lágrimas que tiene este título. Podemos cambiar eso en cualquier momento tengamos el html correspondiente a la misma cosa que ha ido en este material. Lo obtendremos todas estas cosas y nuestro propio pie de cabecera en otro componente para aplicación de contador . Y luego ahí, dice la CIA, te mostraré cómo dice este año también puede afectar nuestra opinión. No, por supuesto, no queremos dedo del pie cambiar nada en este momento, pero queremos agregar un nuevo componente toe nuestra aplicación ahora, recuerda, cada vez que agregamos un nuevo componente, tiene para estar registrado con nuestros módulos de motor, que está ahí en las ideas modernas. este momento, ahí está el único componente, como se puede ver ese componente. Ahora, voy a crear otro componente aquí, y esto se va a llamar Let a app header on at pie de página en campo de golf el contador componente. Ahora, para crear estos nuevos componentes, tengo que ir a un frente de comando, que aquí es terminal. Ahora. Yo puedo detener esto. No necesito parar, pero sí puedo. Pero en Mac, puedo abrir una nueva pestaña on por presente comando t on. Entonces tengo un nuevo símbolo del sistema aquí. Por lo que mi estrella sigue corriendo aquí. Pero tengo otro grifo que está abierto, que está en la misma ubicación. Dije que puedes ver que estoy en la app de mostrador aquí ahora para crear una nueva empresa, puedes usar el comando n g generar on, luego guardar componente. Ahora, claro, tenemos un brillante más corto fuera la misma cosa. Simplemente puedes decir n g g c g para género, t para componentes y luego necesitas dar el nombre del componente que quieres crear. Supongamos que si quiero crear cabeza un componente, entonces usted acaba de empezar a escribir. Encabezado son si su cabecera app dan capita Ahora puedo decir por ejemplo Rapido Pero lo que pasa es que va a crear todo en esta ubicación haciendo de esto una pelea más grande. Entonces, ¿qué? Podemos organizarlos como un cuatro que considero componentes slash. Entonces va a despejar lo nuevo para componentes de licor e intacto que puedo decir que se supone que me cree un componente de cabecera de guión. Ahora también agregará un dash off app perfecto para cada selector en esta demostración. Creo que tal como es y presioné Enter Onda más tarde. También voy a decir que no quiero ningún prefijo porque de todos modos, le he dado a tu app Dash other va a crear ABX dash abduction como el perfecto. Ya veremos eso en un minuto. Vamos a prensa Entrar Italia género cuatro archivos diferentes Los archivos comprenden un CSS y HTML, un HTML, Esther Spectacor y luego tu cancha de componentes real. Ahora bien, si no quieres respeto, por ejemplo, siempre puedes decir que el respeto en efectivo equivale a dos fondos. No lo subes este archivo. También se puede verificar que el archivo después de modelo de tortillas se haya actualizado con se puede ver que ha agregado después de su componente a nuestras aplicaciones. Eso es realmente necesario, porque de lo contrario tengo que hacer un seguimiento de sumar cada uno ahí arriba. Ahora si voy allá si controlo click esta pelea en particular en DSI. ¿ Qué hay en eso? Se puede ver que ha agregado un guión AB perfecto a nuestra aplicación, que no se ve bien. Voy a quitar eso. Nos lo voy a dejar en cabecera en campo de golf. Eso es sólo un encabezado por aquí. Entonces no hay nada en esto, y solo es una nueva empresa anunciada en tu fecha de regreso aquí en NGC en esta ocasión, es un pie de página de slash de componentes. Angular tiene algunas recomendaciones como cómo debe seguirse la convención de nomenclatura. Por lo que dicen usar un perfecto para que no se vaya dedo del pie colisionar con ninguno del edificio. Las etiquetas HTML son algunos otros frameworks apilar, por lo que siempre es mejor especificar tu estado de ánimo libre específico Perfecto. aquí en este tiempo fuera, así que digamos que eso es solo spec equivale a dos caídas que es solo prefijo igual a una cadena vacía. Si no das una cadena vacía. Entonces, claro, va a tomar dinero en efectivo. Por lo que en esta ocasión verás que solo hay tres sentidas que se generan. Andi, hay actualización, por supuesto, en el modelo DS on. Además, solo para asegurarnos de que tenemos el generador, se puede ver el pie de página de la app el componente. Si miras el componente a ts ves que ahora es necesario. No es ab Dash y Dash simplemente secuestraría tirador. Entonces vamos a tener un componente más. Y esta vez te voy a poner sólo a ti que un remo. Entonces voy a decir, uh, contador. Y luego, por supuesto, también tenemos un componente de contador. Por lo que en ya los usaba. Este es el selector que se tiene que utilizar. Por lo que tengo tu un encabezado de contador a pie de página. Entonces voy al at No componente html, sácalo todo aquí y luego puedo decir aquí me dirijo Ya puedes ver que me va a ayudar con esto. Lo escuché y luego puedo decir actuar contador de cenizas contador de slash off curso un pie de página de listón como otro servicio y volver al navegador. Debería ver que los tres componentes colocados ahí, pero todo lo que hace, es apt. Encabezado trabaja en mostrador trabaja hasta pie o funciona. Por supuesto, nosotros Esta es una cancha autogenerada para cada componente. Mira que los componentes se inclinan hacia arriba el encabezado. Ahí está la parte HTML de ella, y Simples está arriba. Palabras de brezo. Ya sabes, podemos sacárselo de esto y luego ponérselo. Probablemente dentro de eso puedo decir h uno. Bienvenido al colador, Andi. Puedo agregar un nombre de clase CSS aquí diciendo algo como Alert honor, Dash en cuatro Onda separada. Deberíamos ver un hermoso encabezado fuera de curso en las obras de Footer. Tengamos un tipo básico de información de copyright. Entonces vamos con un pie de página para el HTML. Se lo voy a sacar de esta app para sus trabajos. Por supuesto, podemos decir ser centro extra. Eso es como la línea central extra. Y entonces, claro que puedo ver aquí que todos los derechos por qué, eso es un https. Sabemos que en este ender esa va a ser la comida se supone que es un remitente forrado. Andi start se sienta ahí ahora, por supuesto, funciona el mostrador en mostrador. Y eso es lo que creo que quieres crear 10. Demostración : haz clic en la aplicación contrapartida de venta: en este dinero. Vamos a crear esto en el componente de contador. Entonces donde queremos toe proporcionar un valor inicial numérico en proporcionar un par de botones para implementar como límite elástico lo mismo De esta manera entendemos el concepto off data binding. Entonces vamos a echar un vistazo a eso. Déjame cerrar todas estas multas en mi pierna derecha. Tenemos un colapso sobre la abundancia. Eso es realmente necesario ahora. Por lo que tengo mi código fuente visible correctamente. Voy a mi AB y luego puedo buscar componentes en mostrador y hay un archivo T s. Entonces este es un archivo T s, que es la columna vertebral de un componente. Por lo que esto es se puede decir parte del motor de un componente. Y esta es la parte de presentación de la empresa, que simplemente dice que APP funciona en este momento, lo que puedo hacer es que puedo declarar una variable dentro de esta clase la cual se convierte en una variable miembro de la clase. Puedo comercializarnos privados si quiero otras formas. Todavía está bien. Por ejemplo, puedo decir contar a día porque estamos dentro de mecanografiado. Podemos definir la variable Toby fuera de un tipo particular, puedo decir número como este. Ahora bien, esto es realmente bonito, porque de esa manera el tiempo combinado dará otro. En caso. Si estoy tratando de ascender algo valor no numérico al conteo, también puede asignar un valor predeterminado en conseguir por asignar un valor. aquí, no hace falta mencionar que se trata de un número, pero siempre se puede ir y decir igual a 20 como el valor inicial si se quiere. Ahora el otro lugar para inicializar. Como puedes ver que hay un constructor para una clase en particular, también hay una ONG en ella. Ahora, Constructor es típico constructor de clase JavaScript. Entonces en este momento, las clases que se crean instancia no es un componente que signifique angular no va a estar monitoreando esto. Entonces si quieres dedo angular inicialmente algo no JavaScript, entonces ONG en él es la función para el trabajo. Entonces eso viene por un implemento sobre en ella en puños. El interfaz de punto ah se asegura de que tengas esta función. Por ejemplo, si no lo tengo, puedes ver que tu mecanografía está dando otro dicho que en nuestro componente de contador dice incorrectamente implementa esa interfaz en él en. Debe proporcionar eso. Entonces si ven que aquí hay una bombilla, nos escolta me da otra vez una opción. Basic Commander no se controlan en ventanas y eso te va a mostrar implementar interfaz en ella. Por supuesto que puedo seleccionar esto en la cancha viene por aquí. Por supuesto, probablemente necesitas tirar de esto hacia abajo porque queremos que eso esté en ese lugar. Ha arrojado nuevo editor. No queremos lanzar otro. En cambio, podemos decir que empiezan a contar equivale a 20 Ahora, muy importante que tengas que decir esto. Empieza aquí porque si vienes de otros idiomas como Java WASI Shop R C plus , solo puedes hacer esto donde buscaba una variable local. No es divertido. Se llevará un miembro. De verdad. Pero a diferencia de eso, JavaScript en mecanografía dice que no, si especificaste sin el disco una obra, estará buscando una variable local entre casa propia. Andi. Dice que tenemos que volver a utilizar obligatoriamente esta palabra clave. Se puede ver que hay deliciosas. Puedo presionar control oscuro y luego entrar a nuestra lata Usted allí segunda opción aquí. Así que ten cuidado cuando estés seleccionando opciones. ¿ Ese recuento equivale a 20 Y ahora tengo un valor por aquí. Cero. Puedo presentar esto en el HTML de la manera que quiera. Entonces vamos al HTML on. Probablemente sácalo que en cualquier tipo tu edad, tres en y di el conteo Actualmente está en. Entonces puedo usar un soporte rizado y luego puedo, como, toser así. Esta es una interpolación fuera de los valores, básicamente que cualquiera que sea el valor en tus plantas modelo esté ahí que en realidad se imprimirán por aquí. Entonces si vuelvo al navegador, es contar actualmente cero. Pero nos gustaría proporcionar un par de botones s para que podamos implementar nuestro equipo. Por lo que para proporcionar los botones, voy a proporcionar un Parton, Bt y Bt y primaria. Esos son los nombres de clase que vamos a usar. Dick Clement y yo voy a copiar pegar lo mismo y cambiar este dedo implemento Guardarlo indulta para colonizar el incremento del año y Dick Clement lo que quiera proporcionar una funcionalmente. Por lo que cuando hago clic en este incremento cada vez, debería ver este valor en particular ser incremental. Entonces lo que significa que necesitamos activar una función llamada desde estos botones sobre las funciones debe llevar esto a trabajar aquí. Entonces lo que hagamos, brindaremos dos funciones. Puedo decir que eres inclemente, Andi. Una función listada de trabajo regular. Considero esto un teléfono perturbado plus plus y luego, por supuesto, desacuerdo. ¿ Cuál se supone que diga esto? Comienza el recuento menos menos. Soy rojo usando el valor de descuento que Ahora más duro Llama a esto bien. Entonces es muy, muy simple en angular, porque ahora han proporcionado una sintaxis simple toe call esa función directamente por aquí . Lo que puedo hacer que simplemente pueda decir, usa alrededor de bracket on, Entonces usa el evento que quieres encontrar y puedes ver que esta retaguardia anotada me está ayudando con ¿cuáles son las diferentes opciones que tenemos? Queremos usar el click mint y el click cuando pueda decir Dick Clement. Sé que somos escuela me ayudó al mirar la clase y luego usarme la función que está disponible aquí puedo decir una vez más, un evento de click es igual a inclement del dedo del pie. Andi, guarda esto. También se pone todo en un algo llamado Container, por lo que se formará turno armado F en tu cancha salvaje. Y si vuelvo a mi aplicación en las iglesias del navegador, si a veces no se refresca, solo refresca en tu habitación. Si implemento esto, ve que se está implementando automáticamente en Deke, lamentando también bien. Se puede ver que al hacer clic en este botón en particular, la función real está en el trabajo. Entonces eso es un encuadernamiento. De lo que estaban vinculando tu es un botón para tener función en. La función cambia el valor de los datos del modelo. Y cada vez que el modelo que ha cambiado este valor en particular se refleja automáticamente , y esto se llama minería de datos. Entonces tenemos un método de enlace, y tenemos un enlace de datos. Si bien esta fecha de terminar lo que estás viendo es un one reddit al respecto, lo que significa que si tengo un cuadro de texto aquí en, quiero que se cambie el valor cuando el usuario cambie el valor. Si quiero ese dedo del pie, afecta esta variable en particular que se supone que es un enlace de dos vías Así que en este momento lo que estamos haciendo es una eran vinculantes eran del modelo. Posteriormente estamos actualizando la vista. Todavía no se hace la salsa blanca, así que vamos a ver eso en futuras radios. De todos modos, sin embargo, estamos haciendo un método de enlace en un enlace de datos de una manera por aquí para que pueda implementar así como acuerdo. 11. Descripción eña de las directrices: directores son quizás la parte más importante de una aplicación angular en, Si lo piensas, la unidad angular más utilizada, el componente es en realidad una directiva, y el componente angular no es más que un director con el plantilla. Cuando decimos que los componentes del edificio sangre siete aplicaciones angulares, en realidad estamos diciendo que los directores son los bloques de construcción de una aplicación angular. En el núcleo Directiva se encuentra una función que ejecuta cada vez que compilador angular lo encuentra en la oscuridad, se utilizan directores angulares para extender el poder apagado de su TML dando noticias en impuestos. Los directores angulares se pueden dividir en tres tipos componentes en directivas tributo y directores estructurales. Como vimos anteriormente los componentes son solo directores con plantillas bajo el capó. Utilizan a la víctima AP y nos dan una forma más limpia de definirlos. Los otros dos tipos de director no tienen plantillas. En cambio, están específicamente diseñados para manipulaciones hacia abajo. Las directivas de atributos manipulan el abajo cambiando su comportamiento y apariencia. Utilizamos directivas de atributos toe aplicar elementos de estado condicional muestran todos los elementos de ocultación son cambiar dinámicamente el comportamiento de un componente de acuerdo a una propiedad cambiante. Algunos de los directores de atributos del edificio están en el estilo. Clase NJ desactivada, oculta en solo interruptor y así sucesivamente. Echemos un vistazo a algunos ejemplos de uso fuera de la construcción. Directores de atributos aquí desactivados en Oculto. Haber asignado una expresión booleana bien, faughnder, inválida y formada son válidos. Representar el estado de la forma. Por lo que en base a la validez de los formularios, el botón está deshabilitado o habilitado, y el otro mensaje se muestra a nuestros Hijos. En este ejemplo, estamos asignando una propiedad de estilo toe do basado en un objeto ser una vez fallado propiedad de color. Aquí un ejemplo de Ley Clase N G. Un buen director. El expresión es un objeto que representa algunas de las clases CSS, pero si la clase debe usarse o no se decide en base al valor de aquello que es un lingote . Por ejemplo, si los de edad son menores de 18 años se aplica una clase CSS de peligro extra. Si el calibre de unos es mayor o igual a 80 extradites se aplicará el éxito. Las directivas estructurales están específicamente diseñadas para crear y destruir elementos Tom. Algunos de los directores de la estructura del edificio son NGF Engy, lejos de India qué caso en este que diferentes directores estructurales se utilizan en plantilla html con un truco de culo en lugar de un corchete cuadrado alrededor de ellos. Por ejemplo, la ONG. Si es directo, aquí se le asigna una expresión booleana. Entonces si los productos no prestan es igual a cero, entonces Engy. Si real aseguró que hit tres se suma a la larga. Pero si los productos de condición Shortland es igual a 20 se desvanece, entonces Engy si quitará el extra de la parte superior. 12. Demostración ngForOf, ngIf, ngStyle y ngClass: para entender a los directores. Tomemos un nuevo proyecto para que lo sepas, abran una nueva terminal, consiguiendo hacer escritorio y tomemos el comando N g nu para rechazar templo y decir no a la votación. CSS es bueno. Por lo que una vez hecho esto, me gustaría instalar Boots star como sirio a través de las directivas. Timo carpeta 10 p.m. Puse Strapped y también abrí la misma carpeta en Visual Studio Court escribiendo tos art. Queremos agregar bootstrapped o angular Chaisson ceviches. Aquí tengo que ir a la sección de manchas en una entrada aquí para cosas de tabla que está al norte. Márgenes subrayados barra inclinada ¿Cosas slash esto para salpicar bootstrap CS es no. También correremos nuestro proyecto escribiendo energía. Self crash hope Abriremos la aplicación en un nuevo navegador también. Entonces el otro es porque le di una parte equivocada a la distancia barra de distancia del partido CSS slash bootstrapped Nuestra ventana C s es ir atrás control. Ver Onda ejecutar el mismo comando una vez más. Por lo que ahora nuestra obligación está lista y vamos a añadir un nuevo componente para probar el uso directo . Por lo que abrí una nueva muerte luego ellos en g g c para generar, competentes antes de los cuatro componentes barra y componente de queremos crear Aquí para probar Envy para off ¿Lo hizo? Eso es un n g para fuera del Diablo. Vamos al componente de la aplicación html. Donde se está presentando este país y editando eso es que vemos el nuevo componente ir al componente AB html Aquí, quítate de todo. Hice la cena como clase de CSS en Judy y luego me llevo tu anuncio dash Engy para él como bolsa. Andi Ahora, si vuelvo el congelado, debería ver que se coloca nuestro nuevo componente. Ahora, vamos a entender el N g four off direccionando usando una muestra de núcleo. Entonces vamos al D. s. primero los talibanes incluso llamaron a la gente, que es un día libre de cualquier tipo de objeto. Y en el n g en él, eso es inicializar eso con algunos valores ficticios. Por lo que me gustaría agregar aquí, gente, gente, que es este inicio la gente igual se agachó sobre mí en dentro de la AM va a crear algunos valores como , por ejemplo, dejar se revela H C 45 ciudad, y se también agregan una imagen que va a estar en la carpeta Activos. Eso es probablemente chico debajo de la carpeta llamada Imágenes on. Voy a copiar unas cuantas imágenes por aquí por parte de eso se cortarían A se sienta slash imágenes en Asumamos que no es nuestro chippy en la misma cosa. Voy a copiar pegar pocas veces, hacer algunos cambios. Entonces tenemos cuatro objetos en el Ari, y ahora queremos mirar a través de esto y luego presentar los mismos detalles en el HTML. Por lo que la forma que podemos hacer es ir al HTML correspondiente a esta Onda. Vamos a bajarnos de esto. Pongámosle un H tres. Diremos que eres N g por su salto. Ahora asuma que queremos mostrar la lista de todas las personas en una combinación como Uriel . Entonces generalmente así es como va a ser. Y este es un dato. Si vuelves al más cercano, ves que tengo una bala que dice que se trata de un dato de persona, pero quiero que esto bueno se repita para cada persona de aquí. Entonces para hacer eso, usamos la sintaxis especial aquí n g cuatro fuera del director estructural y los directores estructurales tienen un delgado, oscuro iniciando su truco de culo en evidencia. A gástrico. Se puede ver que se obtiene la lista de todos los detalles estructurales aquí N g Para a pesar de que decimos Aquí es Engy por fuera la sintaxis para usar la misma es N G cuatro Onda. Le asignamos una expresión. Ahora esta expresión consiste en una declaración de disponibilidad, como dejar comer de una manera que lo tengamos descartar a la gente. Por lo que toma una persona de la gente de acuerdo, luego ascendió a una variable local Korpi on. Entonces podemos acceder al ser dentro de este particular y dejar que corte primero a Alexei, guarde esto ahora y retroceda. Deberíamos ver que los mismos datos se repiten cuatro veces porque tenemos 4% de datos por ahí. Entonces en lugar de tener estos datos ficticios, en realidad podemos sacar los datos de la persona objeto p en, luego imprimir sus detalles, por ejemplo, por ejemplo, puedo decir aquí entre corchetes universitarios p nombre del punto es de la ciudad de la puerta. Guarda esto. Y si vuelvo, debería ver ahora dice que sabemos esto de Bangla y así sucesivamente. Ahora si quieres? Ah, la imagen fuera de la persona. Por lo que también puedes poner yo soy Jean. El fuenteva a ser Peter. ¿ Imagínate qué? La imagen de Peter no es una imagen real. Entonces queremos el valor fuera de Peter imagen Toby, asociarlo con este SSC que se puede hacer poniendo esto ya sea en un calibrado como este se puede utilizar el registro cuadrado para el SRC diciendo que esto es una expresión y la expresión necesita ser evaluado. Eso me voy dedo del pie guardar esto. Y entonces cuando abrí esto, no tenía ninguna foto. Entonces si refresco aquí, ves que porque no tenemos ninguna foto, no está apareciendo el mundo con en esta copia y pego algunas de las imágenes por aquí. Por lo que he copiado las imágenes en ti se refiere a esta carpeta. Y como puedes ver ahora, si vuelvo a la actualización más cercana de Onda, deberías ver que aparecen las imágenes. Las imágenes son de tamaño muy grande. Queremos tener un tamaño común para lo mismo. Por lo que esto puede ser fácilmente actitud agregando un estilo por aquí. Pero también podemos hacer eso con la ayuda de otra directiva llamada estilo Engy. Por lo que al estilo indie se le puede asignar un objeto de arma para que pueda definir aquí el estilo de Engy es igual toe una expresión de estilo o que aquí de nuevo, estamos usando unos corchetes para indicar que esta es una expresión y la expresión aquí como una objeto. Y esta es la pocilga que queremos dar, que podría estar, por ejemplo, bastante encendida. Entonces puedo decir aquí 100 como la caja fuerte, pero puede que tengamos que dar 100 PX para pixel entonces, en cuyo caso esto va a ser una cadena, algo así son en última instancia también podemos asignar algo como ocultar. El Dr. P X es de 100. Por lo que las unidades se pueden especificar aquí de esta manera porque el inicio no se puede utilizar como parte de la clave. Se tiene que dar en cuerdas como esta y guardarlo. Y si vuelvo a acercarme, se puede ver que todas las imágenes están apagadas de 100 píxeles. momento, también podemos controlar esto desde dentro de nuestro componente hasta PS. Por ejemplo, imagina que estoy aquí una variable llamada I n g Stine's Save it. Vuelvo aquí, declaro una variable. Por supuesto, I m j Stiles es igual dedo del pie un objeto que consiste fuera de altura. Dark PX es 100. Por supuesto, esto tiene que ser en forma de cuerda. También puedo especificar radio de borde. Ah, cinco píxeles. Otra vez. Radio Barda Cualquiera tiene que ser con un guión. R Oregon. Usa ese capital en guión. R significa que puede que tengas que darlo de nuevo en los tribunales. Y cinco p salen de la cuerda. Entonces tengo que darle así Todo lo que también puedo decir aquí, radio fronterizo nuestro P X, que representa la unidad. Y entonces puedo decir que tienes cinco años, guárdelo y debes saber, Ver que se aplique el radio. Podría querer dar un poco de margen. Puedo contra especificar aquí, margen oscuro PX también está bien. Entonces habrá una brecha entre cada uno de hacerlo. Estos estilos se pueden aplicar ahora en múltiples elementos si te apetece, pero sólo hemos acostumbrado a don Yo soy los estilos. Por supuesto, esto se debe a que aún no se refresca y nunca ver que el árabe se ha ido. Ya que estamos usando bootstrap. También podemos hacer uso de las clases CSS que están disponibles. Por ejemplo, para la l. A. Puedo agregar una clase CSS de Bootstrap usando n g class on Engy class season de nuevo Un atributo contra el tenemos que suministrar aquí un objeto donde la clave es el nombre del clase a la que quieres ceder. Esta es una expresión booleana que determina si se tiene que aplicar la clase no lo son, por ejemplo, puedo ver aquí Text dash éxito es cierto ya que la paz no puede contener menos, que poner eso en un formato de cadena y en contra ya sabes que se aplicará el éxito extra de clase. Si esta expresión valora a dibujar, lo cual es cierto, siempre la guardo. Y si vuelvo al navegador, deberías verlas en color verde. ¿ Verdad? Pero puedo tener tu expresión aérea que a veces la hizo falsedad y que mericano caiga otro momento. Entonces, por ejemplo, puedo decir edad de tres puntos que es la edad de la persona de aquí en. Ya puedo comprobar tu edad Peter es mayor o igual a 2 18 Así que entonces eres texto al éxito. Entonces si guardo esto y vuelvo, deberías ver que John Doe no está en el color verde aquí. Siempre podemos tener otro, y puedo decir peligro fijo en caso de que Peter HD sea menor de 18. Entonces guarde esto. Tengo ahora que separar clases, una para adultos y otra para menores. Por supuesto, esto también puede ser una función, por ejemplo, basada en la edad de la persona. Quiero obtener una clase CSS aquí para que pueda decir obtener clase CSS sobre Peter, característica Vida perímetro para eso. Por supuesto, no tengo una función llamada get CSS class. Entonces tengo que ir aquí, despejar una función llamada get de la CIA su clase la cual toma la edad de una persona que puedo comprobar su si calibre es menor a 18 entonces devolver extra peligro grita puedo decir volver. Gracias Servicios de Dash Guárdalo. Vuelve al navegador y puedes ver que obtenemos exactamente el mismo resultado también. Ahora vamos a nuestro html en nuestro encabezado aquí para mostrar que tienes cuatro contactos, así que voy a añadir que eres un hit, hay gente no presta maíz Index guardar esto comenzó un rubro que dice que hay cuatro contactos. Vamos a reenviar un trato. Adopción por aquí tal que al hacer clic en el botón borrar cada uno apagado, éste por 1 puede ser eliminado. Por lo que vamos a proporcionar un botón VT final o comenzar el agua. Después ponemos una marca X para que represente algún tipo de habilidad Acción. Cuando el usuario haga clic en esto, quiero que esto se elimine así en Haga clic en Desactivar el botón. Queremos que Dios elimine a persona. No voy a suministrar el índice de esta persona en particular. Ahora que tenemos una expresión que dice: Dame un objeto de una persona, puedo abastecer a la persona objeto en sí aquí. Pero y si quiero suplir el índice fuera del elemento, estar en el aire un pueblo Entonces, ¿qué? Podemos hacerlo. Podemos poner un cínico aquí y decir índice como yo Así la variable de bucle ahora se me dará como yo y yo puedo abastecer ese valioso escucho el otro aquí es porque no tenemos una función llamada persona completa ubicada una en mi t s. Entonces voy abajo, luego digo aquí, borrar persona, que recibe un índice y luego puedo quitar el elemento actual. Entonces, por ejemplo, si índices uno entonces me gustaría eliminar este auto en particular. Entonces la forma en que puedes hacerlo es decir que este inicio la gente no abastece, lo que toma el índice y el número de elementos para creer en ese índice. Por lo que quiero eliminar un elemento del índice. Entonces ahora tenemos esta función. Entonces si vuelvo al navegador y hago clic en uno de los registros, se puede ver que se ha ido y se ha ido. Se ha ido. Cada vez que estoy billeteando, se puede ver que en realidad está regresando con aliso, el número porque estoy usando gente que presta. Después hago click en el último y se puede ver dice que hay cero contactos ahora. Incidente este mensaje. Me gustaría mostrar otro mensaje diciendo que no hay contactos para que pueda volver aquí y puedo decir seto porque no hay contactos en tu acabo de hacer popó. Yo lo veo, pero queremos exhibir a cualquiera fuera de ellos en un momento dado en el tiempo, dependiendo de la longitud para que pueda usar otra directiva estructural o n G. Es que le suma esto abajo todo lo que quita de arriba, dependiendo de la condición que le hayamos dado aquí. Por lo que quiero revisar. Si la gente es tierra es mayor que cero. Entonces tenemos que precisar esto. Si la gente no presta es igual a cero, entonces queremos mostrar que no hay contactos en tu libreta de direcciones para que pueda guardar esto . Vuelve atrás. Dice aquí hay cuatro contactos ahora es de 3 a 1 en detalles aquí que no hay contactos en tu libreta de direcciones. También podemos proporcionar un verdadero o botón aquí el cual en realidad puede desencadenar la llamada N g en él , que está inicializando este aviso de que esta es sólo otra función. Angular pasa a llamar a esto. El componente se inicializa al principio. Pero si quieres o re inicializar esto, siempre puedes llamar a esto tú mismo. Por ejemplo. Puedo ir aquí y agregar otro botón para un enlace aquí, o girar su 50 y o tres t y dash link. Y luego digo tu Señor en y en Haga clic fuera de esto. Puedo llamar a N G en ella así. Por lo que no hay problema en llamar así. Pero recuerda, NJ en él está destinado para el dedo angular inicializar en el principio, cuando se crea el componente. Entonces guardé esto. Vuelvo aquí, tengo cuatro contactos retrasados uno por uno cada uno de ellos se borran. Y luego dice: Señor, Señor, fecha de conducta improbable. Aprendí todos los datos una vez más. Y luego hay cuatro contactos una vez más. 13. Demostración ngSwitch: Trabajemos en otro ejemplo para entender Engy, Switch y Ng qué caso. Entonces primero voy dedo del pie el género de frente de línea, un nuevo componente llamado N g Almacenamiento. Y como queremos ver esto en pantalla o cotizar, vamos a ir a SRC arriba en el componente HTML y queremos incluir el recién generado Engy cambiarlos también, voy a cambiarlos también, comprometerme esto en comportamiento después de que sh n g lo cambiara como tintorero. Guárdalo. Volvamos a los problemas er en dsi que dice Engy switch demo funciona. Entonces lo que significa que nuestro nuevo componente rojo está disponible aquí. Vamos al HTML fuera del nuevo componente. Quítalo de esto Eso es en una historia dirá Envy switch. No eso son cuatro botones, porton dot feet, Ian Thorpe et y Primaria. Queremos cuatro fuera de ellos y luego queremos tener un dólar de botón de subtítulo que tú que se pone en un dedo del pie de un botón. Es un borrador, así que tenemos cuatro botones. También seremos cuatro ofertas correspondientes dedo del pie cada una de ellas. Entonces voy a tener aquí. Eso es todo. Este es el dólar número de Dave, y voy a tener cuatro días así. Supongamos que cada una de estas ofertas corresponde a cada uno de los botones. Cuando hago clic en el botón uno quiero que esto sea con visible encendido cuando pateo el botón a solo ustedes dos deben aparecer en cuando hago clic en el árbol. Sólo debían aparecer tres y así sucesivamente. Ahora para que esto funcione, vamos a los años correspondientes. Declarar hoy una variable llamada elección en Vamos a dar un valor predeterminado off 12 el mismo. Leemos una función llamada SEC Choice, que recibe una elección y luego asigna carga de distorsión del dedo del pie. Guárdalo. Volvamos aquí, Andi, Andi, llamaremos a esa función a través de ésta. Algunos dirán aquí en flick que quiere elección de toe set off uno sobre la misma cosa. Voy a copiar y pegar para los demás cambiando el valor de esto. Por lo que al hacer clic en cualquier apagado, estos botones en realidad estaban llamando a disfunción, lo que cambia el valor de esta elección. Na Mikel controla la apariencia de cada uno de los acuerdos porque los chinos están cambiando en base al clic que has hecho. Entonces lo primero que vamos a hacer es un trato tipo remolque ese día va a convencer en estos cuatro días. Me gustaría que tu interruptor de ONG iguale a dos opciones on No hagas eso. Esta es una expresión. Agregaremos un corchete cuadrado. Entonces los Ng's, que ahora comprueba el valor de Childs con una expresión de que voy a estar aquí en cada uno de los tratos. Ahora bien, esta es la directiva estructural que controla la apariencia fuera de cada uno de este acuerdo. Entonces que hacer estructural aquí sería estrella NJ switch kids igual dedo del pie. Te veo que si es uno, entonces éste es el que se va a mostrar. Si esto es también, entonces éste es el uno. Entonces voy a copiar esto siendo estúpido y hacer los cambios necesarios. Guarda el archivo. Si vuelvo al Rosell, veo cuatro botones. Pero dice que esto es debido número uno. Cambié 04 Y es Esto es al número cuatro, pero sí. Doy click. Dice que este es el número dos y el número trata a cada uno de ellos funcionan así. Ahora, sólo para asegurarse de que esto se vea mejor. Entonces lo que podemos hacer es añadir algún contenido. Digamos que quiero nuestro aquí. Tenía una fila con dos llamadas. Andi en cada uno de ellos a nuestra propia imagen. Deja que la primera carga corresponda a Tiger. Andi, quiero obtener alguna información sobre Tiger de la llave. Piteoso. Iré a Wiki. Muy bien. En abierto el primer ling, Esa es esta imagen en la que voy a copiar la planta y basado aquí. Y luego copié el primer párrafo en luego pegar aquí también. Entonces tenemos el 1er 1 Y igual, voy a hacer lo mismo por las otras vistas también. Por lo que copia para cuatro de ellos, Cuatro tipos diferentes de imágenes y contenidos. Entonces el 2do 1 es león. 3er 1 es guepardo. Y para este águila, sálvala . Vuelve al navegador encendido y comprueba sin Tiger Lion, Guepardo Eagle Al hacer clic en eso obtengo los detalles respectivos Ahora. En ocasiones esto podría parecer un taxi, así que eso es lo que queremos lograr. Entonces en lugar de pero en primaria puedo cambiar es demasiado importante Enlace en ahora. Por supuesto, se verá más bonito. Entonces toma un león, guepardo y águila. También podemos tener una opción por defecto en caso de que tenga una más en este momento. Digamos que copie todo esto y luego peguelo. Vamos a ello. Esta es la madera del niño. Bien. Y escribo tu algo llamado cinco, que no tengo. Entonces cuando hago clic en morder, nada aparece por aquí. Por lo que también podemos agregar otro trato y decir que este trato en particular es un incumplimiento. Por lo que la ONG cambia por defecto. Andi, no tienes que dar nada por eso. Y luego puedes escribir tu no contenido nuestro nivel para esta elección. Perdón, seguro. Guárdalo. Vuelve atrás. Por lo que ahora me encargo de águila, obtengo la salida y hago click en esto. No es contenido disponible para su selección. Perdón por los inconvenientes. Entonces por supuesto que puedo volver ahora. Un problema es que si selecciono guepardo aquí y luego si refresco la página, verás que se restablece el dedo del pie el primero 1 Porque en el componente se puede ver la elección igual a uno Es el té por valor. Por lo que cada vez que se actualiza, el componente se vuelve a cargar y las opciones se restablecen a una. Lo que nos gustaría hacer aquí es que queremos dedo del pie un signo que previamente hizo elección a esta variable. Pero tenemos que guardarlo en otro lugar porque cuando se actualiza el navegador, perdimos esos datos, así que tenemos que almacenarlos en otro lugar. Y donde podemos historias es algo llamado almacenamiento de sesiones. Puedo agregar una clave aquí llamada como por ejemplo, usan iguales de un niño. Dos. Puedo decir elección, Andi, Cuando dices ONG on, comprobaría si el valor está presente. Si sus valores presentan Ussing, dedo del pie esta elección así puedo ver aquí. Dar este valor está disponible. Entonces puedes decir que eres destructor. Elección es igual a dedo del pie. Obtén el valor de las historias de sesión para salvar esto. Vuelve al navegador. Ahora voy a guepardo y refresco el navegador encendido. Se puede ver que aún debe volver a Cheetah Goto Eagle. Y luego reflexiono esta página. Todavía debe volver del dedo del pie el águila. Si un buen desarrollador herramientas mira la aplicación, hay un almacenamiento local y almacenamiento de la estación y en el almacenamiento de la estación para este dominio en particular . Tenemos un valor llamado opción de usuario para por lo que cada vez que haga clic en una opción, puede ver que el valor está cambiando y esto se mantendrá en almacenamiento de decisiones siempre el hermano esté abierto. Por ejemplo, ahora mismo hice clic en Cheetah, por lo que el valor es tres. Yo salgo del bro junto, luego vuelve de nuevo. Se puede ver que cuando regrese, trata de Tiger, principalmente porque los datos estaban muertos en el almacenamiento de la sesión. No hay más datos porque se perdió cuando el hermano fue cerrado. Por lo que en última instancia, también podemos mantenerlo en el almacenamiento local. este momento no tenemos, pero podemos mantenerlo en el almacenamiento local para que sea persistente si vuelvo a esto y cambio de almacenamiento de sección, dedo del almacenamiento local y luego refresco el navegador una vez que esté cerca. Esta vez selecciono león y luego cierro el navegador, salgo el más cercano, y luego reviso una vez más host local por dos doble cero. Se puede ver que muestra al león por águila selecta. Salgo del cerco y luego abro cromo una vez más y luego voy dedo del pie locales por dos doble cero. Se puede ver que recuerda al niño anterior, incluso si el navegador ha estado cerca de 14. Demo directiva personalizada: También podemos crear nuestros propios directores personalizados para entender lo mismo Eso es crear un componente en un directo tú. Por lo que volvemos a la borracha ciega tomará aquí n g componente genético. Pero esta vez va a ser un demo do personalizado, y también crearemos una nueva directiva. N g g d. Para directiva. Oregon activó Directiva Generada y puedo decir en este momento una nueva carpeta llamada If Píldoras Slash Vamos a llamarlo cuadro de EU cuando presioné Enter va a género solo un archivo es porque esto no va a contener ningún HTML o CSS, y tiene actualizado. La mayoría se encuentra en la sección declaratoria sobre. Entonces volvamos a nuestro componente APP h Demonio y Cambio. Este Engy cambió la aduana de Moto. ¿ Hizo Devil slash up custom directiva demo y se abrió el navegador y digo local era para Córdoba cero. Deberías ver que es directiva personalizada Demo trabaja en. Lo que vamos a hacer es ir a ese nuevo componente y son un montón de cuotas fuera que está a tu antojo? Y dije, esto es un do un montón de párrafo en, digamos, Este es un párrafo y mucho de nuestra imagen final. SRC igual dedo del pie evaluar slash imágenes slash Goldberg jpg También tomaremos su estilo Engy igual a la altura del dedo del pie 30 p x 150 Ahora tenemos estos tres elementos Volvemos atrás, vemos este contenido. Vamos a nuestra directiva Plus que está en caja se dirigen RTs en lo llamo a esto como director de caja porque cuando se usa quiero este dedo del pie ¿Surden los elementos como una caja? No, no el selector aquí tiene un Brakhage cuadrado en caja Puedes dar cualquier nombre que quieras aquí como caja misma. Pero Angular sugirió que deberías usar algún tipo de un perfecto aquí para que no entre en conflicto con ninguna de las directivas de construcción nuestros atributos HTML Así que el corchete aquí indica que revisado Así no me fui. Nos han dado una oscuridad en barcos, en cuyo caso podría haberlo usado como clase CSS. Dejemos eso como un atributo para poder ir al HTML aquí en lo que quiero es ver aquí que esta es una caja como esta. El idea de darle director era un activo que escucharías es dedo del pie tener un acceso al elemento real donde se está utilizando sobre de control la apariencia de la misma. Entonces para hacerlo. Lo primero es que tienes remolque pide una dependencia llamada como elemento que queda. Por lo que buceamos tu fuego, it element off type llamado elemento breath, que es un miembro fuera de curso angular. Entonces nos pusimos eso. Todo lo que tengo que hacer es remolcar conseguir el elemento necesario, decir ese elemento sobre el que se ha aplicado este director en particular en un lugar y estilos a eso para hacerlo usamos una interfaz tras vista en ella. Y somos esta función faltante la cual se llama GI después de verla. Ahora, aquí podemos acceder al elemento dentro de esto en. Entonces agrega algo de hermana de la CIA que así voy a hacer esto. Yo puedo decir esto. Inicia un límite dot elemento nativo estilo punto y a qué estilo queremos acceder en realidad. Por ejemplo, si quiero proporcionar de borde es igual a dos sólidos de un píxel, vamos a sentarnos de nuevo, guarde esto. Y si vuelves al navegador, puedes ver que el trato ahora está teniendo una caja. Puedo aplicar esto a cualquiera de estos otros elementos. Por ejemplo, puedo tener tu B en Fox encendido ahora. Debería poder ver que el párrafo también tiene la casilla. Andi, puedo seguir agregando más y más cosas. Por ejemplo, como una idea. Lo mismo. Un par de veces puedo decir bar radio de muerte. Yo sólo puedo una pura pelea. Excepto que puedo decir aquí Empanadas fuera, tal vez cinco recoge y tal vez un margen también cinco excepto guardar esto y volver atrás y deberíamos ver que las cajas son diferentes ahora. También lo puedo agregar a la AMG por querer puedo decir aquí tener parques en él solo hace lo mismo para la imagen También. Ahora también puedo controlar ciertas otras cosas. Por ejemplo, si quiero suministrar el color para esta caja diferente a ésta. Por lo que esto se puede hacer yendo a nuestra clase Prickly una variable llamada tamaño que es igual toe un pixel por defecto. Entonces quiero reemplazar este y tengo un estilo aquí, que es un sólido alguien tipo año igual a dos solidos on. Pero entonces puedo decir que tu color es igual al negro, que son los valores predeterminados en. Ahora puedo cambiar esto a una expresión quitando esto usando un back court, puedo usar dólares este tamaño de punto, dólar espacial este tipo de acciones dólares espaciales este inicio color fuera de curso, ya sabes, cambia. Si vuelvo al navegador, sigo viendo lo mismo. Pero si un político cambiante aquí mismo, voy a conseguir una frontera roja. Lo que queremos hacer es suministrar estos valores a partir de los elementos aquí. Y la forma en que puedo hacer es comprar decorador idea para entrada activada sobre lo que esto hace es ahora. Puedo suministrar una propiedad llamada tamaño desde el atributo aquí para que pueda agregar su una expresión . El tamaño es igual a cuál es la expresión? Entonces tal vez pueda ver aquí tres cerdos auto se puede ver para el 1er 1 Es una obra de teatro que Streep sobresalen. Pero para el 2do 1 no lo es. También puedo agregar gran entrada para el tipo on después de que la entrada para el color. Ahora puedo usar cualquier off esto en el elemento. Por ejemplo, puedo ver su igual a dos empresas. Puedo decir que tu talla es igual a cinco fixem. También puedo decir aquí el color es igual al dedo del pie. Ver bien, Guárdalo, retrocede y se puede ver que es de color rojo. Es una doble frontera así s. es una pelea, yo grande. Puedo tener esto a cualquiera de esto. Aquí se puede ver. Color incluye dos suspiros soplados. Demasiado de la gente recoge igual muerte de heces. Por lo que de esta manera director se puede utilizar para modificar el elemento de apariencia off, que es totalmente personalizable. 15. Crea la estructura básica de nuestra aplicación de cuaderno electrónico: saber que hemos entendido los fundamentos de los componentes. Andi incluso vinculante en un poco fuera de enlace de datos. Construyamos una aplicación sobre entender más sobre lo mismo. Por lo que la aplicación va a ser una aplicación de libreta telefónica, cual va a tener el componente absoluto que comprende fuera de otros componentes para que pueda considerar un comprobado como un componente padre. Encabezado barra lateral en casa para ser componentes hijo fuera aboot. También vamos a tener ah, enrutamiento habilitado después de un tiempo donde el cibernético mostrará unas cuantas muchas opciones y asumiendo el cual deberías poder ver un componente diferente en lugar de componente doméstico, por ejemplo, a mostrar los detalles del contacto por lo que puede tener incompetentes son probablemente toe editar o añadir un nuevo componente. Podría tener un formulario de contacto. Si quieres tener una lista fuera de todos los contactos que tienes, puede que tengas una empresa más. Son si el usuario está escribiendo algo en la barra de direcciones y las páginas no teléfono. Podríamos incluso querer exhibir a otra perra, que generalmente se le llama quincena de cuatro páginas. Ahora, con el fin de ahorrar algo de tiempo, ya he creado un proyecto angular básico en y ya he empezado a serval en host local para dos doble cero. Ya he agregado bootstrap Ford, Artur a la una. Andi. También agregué que en nuestro Chaisson angular para empezar con eso, crear los componentes que sean necesarios para nuestra aplicación. Entonces voy a entrar en un frente mental y asegurarme de que estoy ahí en el trabajo directamente. Ese es mi teléfono, pero directorio APP y voy a tomar este comando motor NGC generar componente y quiero que el componente esté en componentes de tarjeta sub frontera. Esto es para organizar nuestros archivos con el estilo adecuado. Entonces quiero crear algo llamado Encabezado que va a ser el jefe de componente. Andi, puedo decir que no quiero estos casos de prueba. Puedo decir que el respeto es igual a dos granjas así como puedo oírlo a medida para arreglar algo como BB para guía telefónica. Entonces de lo contrario, por defecto, va a tomar en. Entonces esto va a crear tres peleas un archivo CSS. Un archivo de recortador de coberturas en un archivo de texto también ha actualizado el modelo de aplicación. Sucio s bien. Entonces tomemos uno más. Entonces esta vez quiero decir, fue un dedo del pie de flecha arriba. Vuelve al comando anterior y voy a llamar a esto como barra lateral uno más competente en este momento para casa y va a echar un vistazo a lo que se está generando. Notas que pueden levantarlo. Todas estas peleas. Entonces bajo SRC, tenemos AB. Ahora verás que hay un borde de componentes con cabecera home y cyberfolders. Cada uno de ellos viene con las tres peleas. Como hemos visto eso hay un CSS html DS. Si miras el HTML, dice que tu encabezado funciona. De igual manera, es su tarea en los trabajos de Sidebar, ¿ verdad? Entonces esa es una salida muy básica que va a producir. Entonces vamos a ir al componente APP bordeado Yemen, sacárselo de todas estas cosas y luego me dirijo al nacimiento fuera así como a la empresa domiciliaria. Pero mientras lo hacemos, también asegurémonos de que vamos a estructurar es igual que los babys están en esta luz. Entonces primero voy a agregar un trato con un rol como clase me en eso consiste y así solo puedes controlar el espacio y luego puedes conseguir que se generan auto, su equipo todo pobre. Y aquí es donde vamos a tener algo como PB dash header onda slash Phoebe, no Heather. No aunque no voy a tener ningún componente infantil nuestro contenido infantil aquí. Es importante que le demos la etiqueta final específicamente así, no terminando con un tiempo de impuestos vacío. Entonces voy a tener otro que haga nuestro papel. Entonces voy a decir aquí típicamente hacen roll on. Esta vez voy a tener que columnas para que te quedes aquí hasta la llamada Times dos. Y cuando presionas enter, puedes ver que vamos a conseguir dos columnas. Ahora, estas dos columnas estarán fuera de igual tamaño. Y si no quieres que sean de igual tamaño, entonces tienes dedo del pie inventar ¿cuál es el dispositivo al que vas a apuntar? Entonces eso es Emily usó pequeños dispositivos que incluyen algo así como tabletas. Entonces hay que especificar cuál es el número fuera de grupos que quieres de 12. Por lo que el mundo entero nos considera demasiado bien. Por ejemplo, si ves este visual studio core side pero está aproximadamente ocupando, puedes decir tres nuestros cuatro grandes. Para que pueda dar tres. Entonces el siguiente sería sn quedando nueve de 12. Por lo que esto sería nueve. Y así va a quedar. Entonces si le das esto como para entonces esto excede 12. Entonces creo que no va a venir apropiadamente, así que tienes que darle como ocho. Entonces esto está bien dentro de esto. Vamos a proporcionar una venta de PB dash, pero en el interior este escondite realmente color BB. Por lo que también es importante que tal vez quieras especificar esto dentro de una columna, Así que voy a ir a dar esa respuesta. Subestado diversión oscura en eso. Ponle esto a después de esto. Se puede descansar no son turno F dos años anteriores html cool. Guárdalo. Y cuando lo guardes y vuelvas al navegador, deberíamos ver a Heather trabaja CyberWorks en las tareas. Es que los componentes se han presentado de esa manera particular. Entonces vamos a algún dedo del pie CSS, cada uno de ellos el encabezado cybery home. Y solo para mostrarte cómo se vería esto así que va a sumar algún colapso por aquí. Entonces no voy a hacer prohibirlo en alerta en cuatro va a ser un fondo azul claro y ahí van a decir que eres cada uno s o el 100 sería como una aplicación de agenda telefónica. Onda. Tengamos un párrafo para decir que es polar bien enojado Lord siete. Guárdalo y no debería estar viéndolo. En un minuto verás que hay un encabezado y por supuesto puedo proporcionar una barra lateral y casa con diferentes colores. Se va un ciber-cibernético. Entonces tenemos la barra lateral html justo aquí en. No tengo ninguna opción ahora mismo. Estamos para que pueda estar alerta pura. Otros Onda Solo demos advertencia y ese va a ser un color amarillento Eso está fuera. Golpeé tres y vamos Xavier me hizo. Y probablemente eso dijo Así que eso lo va a revisar, cómo va a quedar. Entonces así es como el minuto principal de descanso, porque se puede ver que hay un gato Onda. Uh, esto tampoco está creciendo porque no tenemos muchas opciones en De todos modos, vamos a levantarlo. Este color se cambiará el color, por lo que no hará mucha diferencia. Pero si realmente quieres proporcionar esto para ser una altura completa. Entonces puedes agregar s tiempo a esto manualmente en puedes crear, por ejemplo, en clase CSS personalizada o como son de altura completa. Obviamente, eso no existe, ¿verdad? Por lo que la altura completa no existe. Por lo que no puedo definir mi propio auto CSS altura completa en los teatros correspondientes a esto Así puedo empezar con gente oscura. Está en clase CSS on. Te voy a proporcionar tu altura. O más bien, puedo decir, altura min 400 píxeles son 600 lo que sea que tenga sentido. Entonces sabemos cómo su menú que va a entrar en luz casi a plena luz. Bueno, eso no es realmente importante. Entonces solo quería mostrarte cómo usar un CSS en un componente. Entonces tenemos eso aquí mismo. Por supuesto, sólo vamos a quitar esto y añadir algunos muchos o artículos por ahí a medida que avanzamos. Una última cosa que quiero mostrarles aquí es el componente de casa. Html. Se supone que todo el componente solo menciona que se trata de una aplicación angular desarrollada por tu nombre, por ejemplo, en algunos detalles al respecto. Entonces si tienes alguna imagen, por ejemplo, puedes copiar alguna imagen y luego colocar eso correcto. Pero, ¿cómo hacemos eso? Vamos a intentarlo. Por lo que los usuarios lo hacen una vez más en el interior. Esto lo vamos a vamos a Vamos un seto. Probablemente tres o dos ahí, ¿verdad? Bueno, se puede decir sobre y impresionante Angular siete aplicación, digo aquí, párrafo. Por lo que dejó por su nota a B mañana. Y entonces, por supuesto que quería que hiciera aquí, así puedo llevarla. Yo soy g SRC igual a cuando dices SRC igual dedo del pie. ¿ De dónde quieres obtener las imágenes? Teléfono? Entonces puedo empezar diciendo slash un sexo si sabes pensado el G Andi, Asumamos que quiero hacer algunos nombres de clase CSS. Clase igual dedo del pie alta energía. Andi, esto debería darme una imagen. No, pero no tengo esta imagen, así que no va a subir. Sólo me va a dar una opción de imagen rota aquí. Ahora dedo del pie actúa esta imagen. Entonces lo que hago es que básicamente tengo que volver a mis activos SRC. Probablemente. Eso es dar unas imágenes como una subcarpeta aquí. Por lo que queremos crear una carpeta denominada Assets slash Imágenes ya tenemos activos que vas a tener en imágenes para el on. Voy a copiar Fine de mi sistema de archivos local a esta carpeta. Entonces copiaré ese archivo aquí. Corvino Tart, J p. G. Así que tengo que cambiar la extensión de p y G toe jpg y guardar esto. Y cuando regrese, del pie de mi aplicación una urgencia de que la imagen sea que, por supuesto, es, ah, ah, una imagen un poco más grande. Entonces si quieres fuera estilo directamente, es posible, Por ejemplo, puedo decir altura fuera. Probablemente. Puedo decir 100 pixel y no más que eso. Y deberías ver No, va a ser un cuadro más pequeño, que lo hace mejor. Muy bien, entonces esta es la parte inicial de nuestra aplicación. Entonces todos proporcionaron diferentes componentes del dedo del pie trabajan con nuestra aplicación de agenda telefónica. 16. Crea el contacto ContactDetailsComponent: Vamos a tener un nuevo componente a nuestro dedo de aplicación. Mostrar los detalles de la persona de contacto. Andi. Para ello, volvamos al comando, prompt y borremos un nuevo componente llamado datos de contacto que además agregan una clase de modelo a nuestra aplicación para que podamos trabajar con un día libre contactos o un contacto inusual y así sucesivamente. Para ello. Alguien diga n g generar clase Y entonces no conseguiría un modelo de auto más completo slash y luego dar contacto. Ese es el nombre que voy a dar para que despeje una clase. No se requiere ninguna actualización en after modeler ts onda sabemos volver a nuestro líder y es goto Una fuente e at folder verá que hay un nuevo componente Dios, contacto en aparte de los componentes. Ahora, también tienes un modelo el cual tiene una clase de auto de contacto tortillas encendidas, que es básicamente un simple contacto de auto clase. No hay nada diario que vayamos a outfield cosas. Entonces, ¿qué? Estás por ejemplo, si quiero un yo d para esta persona en particular, así puedo decir que d y luego puedo decir que esto va a ser oferta Número cinco on y también vamos a decir me forzaron. Uh, se puede decir string. Apellido. También puedes decir cadena Y entonces puedes nacer haciendo pocas cosas como, por ejemplo, el género una cuerda. Y también se puede asignar una D por valor de descuento. Vamos a salvarme. Entonces vamos a agregar un libro de datos que es son una tarjeta confiable d estará encendido. Vamos a darle a eso una cuerda uno, aunque ese tipo de edad tendría mucho sentido. Pero hagámoslo s d será Nos gustaría usar esto para alguna transformación. Entonces convirtiendo un puerto de datos en edad, Así que escape cadena allí, entonces puedes tener algunas otras cosas. Por ejemplo, quiero tener la foto fuera de esta persona. Entonces que va a ser un Estás en un enlace a una tu respuesta. Mantengamos esa otra cuerda encendida. Entonces vas a tener una ciudad de lechuga para que podamos dar servicio al contexto por ciudad en entonces probablemente país estatal. Ahora algunos apagados. Estos son probablemente opcionales. Por ejemplo, puede que no sepa la fecha de posponer a una persona o puede que no tenga una foto, así que puedo dejar ese espacio en blanco encendido. Todos estos son probablemente eso opcional. Si quieres que una propiedad sea opcional, entonces solo tienes que poner un signo de interrogación Attar, Fin de la variable, por ejemplo. Puedo decir que será signo de interrogación y luego decir que serán se convierte en opcional. Por lo que también mantengamos esta imagen opcional. Ciudad opcional estado on country option Ahora, ya que estamos tratando con los datos de contacto de la persona, eso también se suman dos ladrones más. Probablemente después de esto, puedo decir correo electrónico un estrictamente en un cuatro, que también es una fuerza. Y estos son los alimentos optativos. Vamos a quedarnos con eso. Entonces vamos por mi esto presionando el cambio de brazo f salvar la pelea. Entonces este va a ser nuestro modelo de datos. Eso significa cada contacto con el que vamos a trabajar. Tendremos esta información en particular ahora que hemos creado lo moderno. Eso va a crear el componente que puede mostrar una persona de contacto estudiantes. Entonces vamos a los datos de contacto. Lágrimas archivo en Dhere. Queremos toe crear una variable que diga contacto. Es un día muy culpa fuera llamado contacto y se puede ver que obtenemos el auto importacion. Si no consigues, es posible que tengas que importar manualmente lo mismo. Entonces selecciono este auto importacion o va a tomar por parte absoluta, ¿ verdad? Por lo que también podemos decir que tiene que venir de una parte relacionada porque ya estamos en la carpeta APP , así que también podemos decir aquí, hija slash Entonces puedes especificar otro doctor slash y luego puedes decir moderno on. Por supuesto, Quería que ya lo hizo. Entonces vamos a dar esto como punto, punto, slash modelo slash convento. Entonces este es un expediente que contiene nuestra clase de conducta en. Somos importantes que ahora no es que tengamos esto importante para que podamos inicializar esto. Técnicamente, se supone que esto proviene de algún endpoint de servicio web remoto, que lo vamos a hacer un poco más tarde. Pero ahora mismo estoy en inicializar que se citan valor, y la pregunta es, ¿ debería hacerlo por aquí? Se debe hacerlo por aquí ahora, como regla general del tiempo. Entonces mantenemos este constructor solo para inyección de dependencia, pero como este para toda la inicialización. Entonces, para ese fin, vamos a crear un contacto distorsionado igual a dedo del pie. Puedo decir nuevo contrato el. Tienes que suplir algunos valores para esto. Puedo decir aquí este contacto de inicio no están encendidos. Por supuesto, el mínimo siente que tenemos. Entonces vamos a dar ID igual a uno en este oscuro contacto. Nombre, ¿verdad? Entonces ese es tu nombre de pila. Voy a dar mi nombre. Entonces voy a dar no sea est'd o contacto. Nuestro apellido equivale a marcas del dedo del pie los campos obligatorios. Seré este oscuro contacto, escribió correo electrónico. Sabemos que no hacemos llamada de nacimiento en un último contrato. País del arte es igual a comprometerme, pero me olvidé. Inicia contacto o serás igual. Entonces démoslo en un año. Entonces formatear. Entonces esto va a ser así. Entonces ahora que hemos inicializado este valor como dije, esto va a venir de una espalda y saris, Así que lo haremos más tarde. Nosotros sí tenemos estos datos. Ahora tenemos que mostrar esto en el HTML. Entonces vayamos a la parte HTML de la misma, que actualmente simplemente dice que los detalles de contacto funcionan. De lo que nos gustaría mostrarlos en un bonito formato. A lo mejor etiquetas seguidas de detalles de eso. Entonces voy a usar eso. No rodar. Consiste off deal dot Llama a dos o Rho. Necesitaba dos columnas encendidas, pero ésta, por supuesto, será una. Pero esto es para nombre de pila, apellido, por ejemplo. Pero esto no me gustará tantos de ellos. Entonces necesito un aproximadamente alrededor de 11 de ellos. Si no quiero mostrar idea comiendo alrededor de un médico. Mantengámoslo alrededor de las ocho para que pueda volver atrás y guardar su multiplicado por la ayuda. Entonces voy a dar ahora ocho de esas con dos columnas cada una. Entonces si presiono el espacio controlado al final y entré y puedes ver que conseguimos por completo todos los detalles, así recuerda su nombre de pila. ¿ Verdad? Entonces ese es el primer medio en esto se va a perder. ¿ Yo? Demos tu, uh, fecha de libros. No tiene que ser ninguna secuencia yo cantidades voy a tomar tu email. Yo solo Esto va a ser divertido número on, y tenemos un escenario de ciudad, así que también tenemos un género, pero volveremos a eso en unos minutos. Entonces ahora, por supuesto, para llenar los valores, puedo usar la interpolación, así puedo decir un contacto sobre nombres de pila. Ahora, contacto aquí es la variable que hemos creado por aquí. Por lo que las variables estaban fuera del componente son accesibles a nuestra opinión. Entonces esta es la vista, y podemos acceder a ellos y traerlos de esta manera en particular. Entonces voy a copiar esto en pegarlo. Este va a ser el apellido. El sprint. Aquí serán una última. Ese es el país aquí. Por lo que hemos guardado esto. Pero si vuelves a tu aplicación, no aparece eso porque actualmente este es componente telefónico. Por lo que necesitamos cambiar eso. Y eso se hace en el componente de la aplicación HTML. Actualmente, estamos usando PB home donde, como no tengo TV segura, los dígitos de dash de contacto ceniza. Ese es el nuevo componente que se crearon. Entonces si vuelvo a tu ahora, puedes ver que antes de nombre apellido Eso es atractivo otra vez. Otra vez. A ver que está ocupando el 50% de descuento en la regla. Y si no quieres eso, quizá quieras dividirlo dando un tamaño apropiado. Y entonces, ¿cómo hacemos eso? Podemos ir a los datos de contacto H demonio on para cada una de estas columnas que tenemos por aquí. Tenemos que definir un sizer. Depende de ti definir cuál es el tamaño que quieras. Ahora asegúrate de que Studio Court tenga un día libre seleccionando una patente toma, por ejemplo, puedo seleccionar así. Puedo mejor comandante B o controlado estar en Windows. Se puede ver esto eligiendo la siguiente ocurrencia a medida que avanzan. Y para cada uno de ellos, no puedo volver. Tu puedo decir Call STM Dash, eso es un cuatro. Y entonces puedo bajar otra vez y ellos pueden optar en cada una de estas columnas para que se llamen S ellas ocho y yo guardé esto. Ahora, si vuelvo aquí, se puede ver que va a ocupar cuatro. Y entonces se trata de una campaña ocho. Por supuesto, es buena idea que escriba sus datos de contacto para que eso vaya en uno y no sea cabeza. Ah, así diría historia, creo Contacto. Excavar. Probablemente es un HR horizontal hacer bien? Entonces así es como se va a ver ahora. Ahora bien, si bien todo esto es bueno, nos gustaría mostrar esto como nombre de la persona como sabemos vienen también son Sr nuestro desorden dependiendo del género. Entonces eso va Prueba eso haciendo esto, combinando estas dos filas en una. Entonces solo mantente nombre puro fuera de la persona encendida. Entonces esto va a ser contacto. Pero nombre de pila. No necesito nada de esto ahora en entonces un espacio, Otra interpelación. Entonces esto es lo que podemos hacer ahora aquí para que veas que se va a decir nombre es que sabemos coma . Pero ¿y si quiero exhibir señor nuestro desorden? Yo puedo hacer eso en. Entonces déjame hacer algo de espacio por aquí y luego voy a usar una interpolación y decir aquí que las personas contratadas o de género son iguales al dedo del pie. Vamos a una precaución masculina, dijo Maher, Sr es el valor, lo contrario se pierde es mejor. Entonces ahora hemos agregado una lógica a nuestra opinión, que es técnicamente errónea. Pero hace el trabajo que puedes ver. Ahora tenemos señor no vamos a ser el nombre de la persona. Entonces digamos, por ejemplo, vuelvo al DS correspondiente a eso en. Cambiemos esta herramienta por ejemplos, Jane Doe. Por supuesto, se supone que esto es. ¿ Ese ejemplo? Vamos, cambiemos a mujer en una senadora. Guarda esto. Y si vuelvo aquí, puedes ver a Miss Género y está funcionando. Pero combinar una lógica empresarial a la vista no es una buena idea. Entonces esto es una lógica. No importa, aunque sea una lógica muy pequeña, sigue siendo una lógica de lo que nos gustaría hacer es remolcar convertir esto en algo que sea reutilizable. Entonces veremos eso en un minuto como ¿qué es eso? De igual manera, aquí tengo un día libre, pero correcto, entonces Pero ¿y si quiero mostrar la edad de la persona donde no tengo la edad de la persona? Pero sí tengo a la gente estar y debería poder calcular que cada una de las personas todas estas cosas se puedan hacer usando lo que una cicatriz pipa. Ya veremos que en el próximo video 17. Introducción a los tubos y crea una tubo personalizado: en angular. Entonces tenemos algo llamado pipa, que puede transformar un valor en remolque. Otro valor. Por ejemplo, Si quieres convertir esto en mayúsculas, entonces sí tenemos una tubería de construcción llamada mayúscula, así que puedo ir a mi HTML aquí. Onda. tenemos la ciudad para que pueda usar un literalmente un símbolo de pipa. Y entonces puedo decir tu mayúscula, y verás que el desenlace de esto sería ciudad en mayúsculas ¿verdad? Es tan simple como eso. Por lo que sólo tienes que alimentarte en este valor Onda. Entonces la transformación la hará este tubo en mayúsculas detrás de escena. Este a por caso es un alias para un mecanografiado, plantas que tiene una función y esa función llamada transformar. Es esta entrada en particular como argumento y luego devuelve como valor de sustitución para esta expresión completa. Y eso es lo que va a pasar. Por lo que el pecador tiene pocas tuberías de construcción. Por ejemplo, si me voy a angular Io y luego voy a perros y tienes este aviador francés encendido, ¿se puede buscar Digamos, busco sólo pipas, y estos son algunos de los tubos de uso común, y puedo ver que hay una pipa en mayúsculas. Esa es la clase mecanografiada real. Ahora digamos que podemos usar el mismo concepto. Onda convertir esto, entrar objeto de contacto en un fulling. Entonces, por ejemplo, sería mucho más fácil para nosotros escribir toda esta expresión. Entonces déjenme sacarlo de esto en su expresión, y luego teclear aquí algo como contacto. Sentimos eso en remolque. Un coche de pipa que es un nombre completo. Entonces si guardo esto ahora, ya me está dando otro aquí porque mecanografiado es capaz de reconocer que este no es un edificio angular como tan bien como no tienes una tubería fuera esta vez. Entonces si vuelves al navegador, verás que no hay ni puesto. Pero si voy a ver, entonces consola JavaScript definible, deberías ver un editor. Hablemos esto bajo la derecha y se puede ver que da un error. El nombre completo de la pipa no se pudo encontrar en su dando otro justo aquí, por lo que el contacto muerde nombre completo, y aquí es donde podemos crear nuestro propio derecho? Entonces hagamos eso yendo del dedo del pie el prompt del cliente al igual que cómo generamos componentes esta vez un militar n G generar pelea jabonosa para pipa aquí. Y luego se puede especificar cincos. Ese va a ser mi nombre de carpeta. ¿ Y cuál es el nombre de la mordida que quieres? Entonces voy a llamar a este culo para mí. Va a despejar un par de archivos El número uno sería una pipa en sí. Un segundo sería una mota. Por lo que no quiero crear ningún caso de prueba en este momento. Entonces probemos anteojos a formas onder. Si entra una prensa, va a crear un solo archivo en las actualizaciones el archivo del módulo también. Entonces eso es porque al igual que como se tiene un componente para ser parte de un módulo, incluso las tuberías también se supone que son parte de MRT. Entonces ahora que lo hemos hecho, volvamos atrás y comprobemos. ¿ Hay algún cambio? Se puede ver que no hay editor, pero no tenemos salida. También aquí por la razón de eso es muy sencillo. Entonces vamos a comprobarlo. Déjame cerrar las multas on de minimis goto SRC ab, y ves que hay despecho y nombre completo tortillas tipo oscuro es un nuevo amigo que se generó y esa es una clase con una función llamada como transformada. Recibe valor como algunos argumentos y no devuelve nada en este momento porque no está devolviendo nada. En realidad es en cadena vacía que obtenemos. También puedes ver que la clase está decorada con pipa en que tiene un nombre y el nombre es totalmente Este es el nombre que definimos en el símbolo del sistema Andi. Viene con una clase llamada full name pipe Implemente tipo transform. Ahora bien, esta es la función que nos gustaría utilizar para que tal vez hayan estado usando esto en algún lugar es como dijimos que en registro bíblico con ella contacto vida, me llena Así que lo que significa que estoy esperando la izquierda lo apaga esta pipa para ser un objeto. Entonces lo que estamos recibiendo aquí es ese objeto aquí. Entonces puedo decir literalmente que eres que esto va a quitar una discusión de tipo. Vamos a llamarlo contacto fuera de tipo de contacto. Eso significa que debes suministrar un objeto en sí si su suministro algo más que va a ser un error durante el uso y va a devolver una cadena. Entonces entre el tipo ricin off este vestido string on, Por supuesto, tenemos que devolver algo. Ahora podemos calificar, um, condiciones por aquí, diciendo que si no se está suministrando nada eso es devolver una cadena vacía. Por lo que puedo decir aquí, si no contactar en, entonces puedo decir su regreso. Puedo suministrar una cadena vacía. Porque si el contacto es un objeto real, será fuera de este tipo que las personas y Niños. Se trata de un objeto de contacto de clase. Y ahora puedo ver aquí algo como Contacto Puerta me obligó. Además un espacio un espacio más contacto o apellido Bueno. De nuevo más cerca, se puede ver que aquí consigo el nombre y apellido. Pero ¿y si también quiero incluir al más apretado como el señor y la señora y demás? Entonces definamos carta disponible Título igual dedo contacto nuestro género dos partículas a los hombres y luego digo marca de moda. Entonces lo llamo como Sr De lo contrario, se va a perder. Ahora podemos combinar eso con deudas de título plus. Entonces si lo guardo y vuelvo al navegador, no debería ver que es el Sr. Nosotros sabemos. Vamos, 18. Crea una tubería personalizada para mostrar la edad desde la fecha de nacimiento: Consigamos otra pipa esta vez. Interrumpir la visualización de un puerto de datos. Entonces, mostremos la edad de la persona. Ahora la edad de la persona puede ser en términos. Off. Los años son años y meses o años y meses y días. Entonces para hacer eso, agreguemos una tubería nueva. Volvamos al mismo comando cambia la edad del dedo del pie. Está bien, hoy está claro. Age dark pipe tortillas actualizaron el archivo módulo también. Volvamos a nuestra retaguardia. Se está bajando este encendido. Voy a entrar en la edad cañonada ts Asumamos el uso fuera. Esto pasa a ser algo así. Va a suministrar conducta, Doctor. Serás libre a esa cuerda. Andi, eso se va a suministrar del pie de la edad así se supone que. Esto debería mostrar algo así como, digamos, 45 años después. Y luego si especifico algo como esto con edad cooler one on de Así que si éste es uno , debería mostrar lo mismo. Asumamos que ese es el paseo marítimo Andi. Por si tengo opción en cuanto a entonces vamos a envejecer 45 años en día, cuatro meses y si tengo otro Eso es un por ejemplo. Tres. Se supone que son como 45 años, cuatro meses en los setenta, una RV Trevelyan tomando así esto. No, podemos ver que en este caso en particular, no estoy teniendo ninguna información adicional aquí. Tengo una información adicional, que es como una aquí. Es a una calle heredada. Ahora. El modo en que esto funciona es que el tiempo izquierdo dicho fuera de la edad de uso de pipa que está aquí se considerará en el primer argumento. Y después de eso se puede decir colon y cualquier perimetro adicional si sólo abastecen múltiples parámetros de lo que se puede decir colon ex escuela y blanco lleno y dicho y así sucesivamente. Por lo que este será el primer argumento Este será El segundo argumento es el tercer argumento, cuarto y Fear gira. Entonces en nuestro caso, sólo queremos una sola bandera aquí. Entonces si la bandera está presente, es o bien 12 o tres si es uno en algo más que a un árbol, entonces va a ser éste. Entonces esto es lo que queremos definir aquí ahora. Entonces obviamente, ahora el valor aquí es, por supuesto, el nombre de la variable Aiken define que sea cualquier otra cosa. Hasta puedo llamarlo como tú serás. Y estoy seguro de que tiene que ser una cuerda. Entonces porque sabemos lo que estamos suministrando. Entonces esto va a ser una onda de cuerda, seguido de Digamos, por ejemplo, yo lo llamo plano un opcional. Pero si eso se abastece, tiene que ser un número como éste, ¿no? Pero es opcional. ¿ Por qué es esa opción? Porque no necesito suplir eso. Por lo que aquí, las finanzas se aplican. Voy a tener 45 años. Ahora eso se hace. Ya sabes, si desde que soy Gran Bretaña en otro derecho de salida, Entonces si vas a usar esto, no te mostrará ningún valor. Por supuesto, no me lo uso de todas formas, pero es un día libre, pero a esto le sigue quiero dar cuál es la edad real de la persona. Entonces eso va a esta hora, es tm it. Por lo que voy a los componentes datos de contacto componente html on. Entonces aquí es donde he mostrado el d estará ahora junto con el será. Si quiero especificar cuántos años en alguna parte que br para romper en, entonces voy a usar y pipa símbolo y voy a decir que sí, contactar mal sea edad de vida. Entonces ahora no hay mejor. Pero esto no está produciendo ningún activo incómodo. Como se puede ver, aquí no hay salida. Probablemente no voy a proporcionar eso en un escombro redondo. Eso está bien. Va a agregar algo de valor significativo por aquí. Ahora bien, ¿cómo calculo la clave será yo distorsionada, restada de la corriente a la fecha. Es una lógica simple, pero veremos cómo se va a hacer esto. Voy a decir, si no, sólo será recogido en una cuerda vacía. Por lo que realmente no mostramos nada Adulto. Si el trato será, está disponible, sabemos que aparecerá un objeto. Vamos a crear un DT izquierdo uno igual a dos nueva fecha de desarrollo. Por lo que creamos objeto. Ahora tengo que contarlo ¿Cuál es el número de días libres son años entre ellos. Por lo que voy a decir que se deja si es igual a la fecha ahora menos DT Wonder Obtener tiempo Ahora obtener tiempo Da el tiempo en milisegundos no saben que esto es un milisegundos actuales. Entonces obtenemos una gran diferencia. Y ahora puedo crear un objeto zanja. Esa es la calidad que dos iguales Toe sabía que fuera. Nuevo esto ahora el único problema aquí es que va a oficial para los 19 setenta. Tengo que restar. Es Vamos a probar esto. Ese es tipo año igual a dedo 80 para obtener año completo menos 1970. No molesta que mes porque toe dd dd dos oscuros se ponen mes encendido. Entonces, por supuesto, esos días iguala el dedo del pie. Golpéalo para no tener fecha, y eso le va a dar a lo grande el mes. Ahora. Necesito devolver un valor basado en esta bandera para poder usar tu caja de cambio. También está claro que stream que es un let out ponerlo comillas a o puedo decir que la edad es igual a una cadena vacía. Por ahora, es una bandera de interruptor encendido. Ahora puedo decir aquí que si la bandera es a nuestra obtener el historial de la bandera, la bandera es una si la bandera es predeterminada, que si hay algo más, Entonces para estos dos, vamos a conseguir lo mismo. Pero como como, por ejemplo, puedo decir aquí todo el pie es igual al dedo del pie. Puedo usar un back take eso. Es para em prometido cosa puedo tener variables incluidas aquí. Ahora, aquí es donde voy a decir el dueño aquí. Sí. Entonces eso es como 45 años después del entonces. Por supuesto, no necesito decir descanso. De hecho, esto va a estar en la sección por defecto aquí porque si es caso 100 personas, va a ser escritorio. Pero si es un caso para, por ejemplo, yo diría que ya es cotiza los años del dedo en un dólar al mes. Waas on, Por supuesto, muy padre. Debería decir romper aquí porque si los niños sean uno, sólo este valor. De igual forma, voy a decir caso tres o poner igual dedo del pie. Podemos decir tu dólar años, años. Pongamos un dólar al mes, meses, dólar Esto es esto Así que ahora hemos dado apropiadamente. Entonces eso lo va a salvar y ver. Por supuesto, una cosa es que nunca regresé. Estos valores que tengo que decir fuera salvarían esto. Volvamos a la Rosa en que veas que ya son 44 años. Volvamos a nuestro HTML en una bandera aquí. Entonces si digo llamé a ahora, si me quedo con volver al navegador, debería decir 44 años y 11 meses. Y si tomo tu bandera es tres salvaje volver en Dice Eres yo creo que me perdí una declaración de descanso aquí. Entonces eso se va fuera de descanso. Salvaje. Vuelve ya. Deberíamos ver que dice 44 años, 11 meses y seis días si doy aquí en el puerto viejo. Entonces si digo algo más que tres tan bien tan pronto del sirio, vuelve atrás y se ve que por defecto es uno y es implícito 44 años, y así es como se podría crear una pipa, que es vistas de una sola pieza de lógica. 19. Asignación: crea tubos personalizados para relleno de una cadena con algunos personajes: Entonces aquí es que quise decir tengo manguera local abierta para dos, doble cero y la página se ve algo como esto. Y eso es porque el html aquí. Por lo que dice que el enganche uno menor de la edad de nada más. He creado dos pipas aquí l pad tortillas de pipa oscura y son malas unos 5 30 años. Entonces, realmente, usa eso en nuestro HTML. Aquí. Voy a tomar un párrafo y luego tomaré un nombre como nosotros no Andi como otro mismo esto . Verás que aquí hay una cuerda de Partridge del lado izquierdo y por defecto asignó cinco como trucos. Es otro ejemplo en el componente abducido. 30 años han definido un multi variable, que ha sido un cento. La textura que conocemos para que pueda bajar aquí y puedo usar lo mismo. Yo puedo decírmelo por cualquiera y luego puedo precisar 25. Eso significa que están totalmente dados de baja. Toda la cuerda puesta va a ser de 25 de los cuales sea cual sea el nombre que ocupe, estadísticas podrían estar en el lado derecho, pero la cola izquierda de la cual será maltratada usando un personaje fuera de mi elección por ejemplo, si pones un dólar aquí, por lo que ese es el segundo perímetro para la ayuda. Entonces lo que significa después de despedirse dólares total, sería 25 caracteres o nombre promedio, que es Actualmente sabemos que los personajes de lucha de precios en el lado derecho. El niño izquierdo se asociará con el símbolo del dólar para el número restante de caracteres firmados. Guarda esto. Deberías ver símbolos de 20 dólares seguidos por el mundo. Ya sabes, Nike maneras. También puedes usar nuestro fuego. Algunos ejemplos poco claros y otros no son decir nombre son 25 probablemente un hash en cerrar los corchetes. Guárdalo, y debería ver que los combates suceden del lado derecho. Esta vez, también podemos combinar ambos. Cualquier padre vuelve a estar juntos. Quédate Aquí hay otro ejemplo. Demos el nombre que hice en el lado izquierdo para 10 personajes con como trucos. Y si no mencionas nada, va a ser un estricto por defecto por un día. Yo colon 15 lo guardo, y debería ver el total donde sería 15 en el nombre que sabemos exactamente se encuentra en medio . Entonces esta es la tarea creo que estarías requiriendo alrededor de 30 minutos para esto en la mejor 20. Creación de la clase injectable de ContactsService: el líder para esta página en particular aquí es hardcore Did en el propio componente lesionado en la fecha de lo que esto se debe buscar de un servidor remoto son de tipo de un servicio web . Esto se puede hacer aquí mismo. Entonces no es una buena práctica. Sería bueno crear una tarjeta de clase reutilizable como clase de servicio en, luego poner toda su lógica de negocio nuestra lógica de acceso a datos en las plantas de servicio y utilizarlas en múltiples lugares son múltiples componentes. Ahora, para hacer esto, tenemos que crear una clase de servicio. Volvamos al símbolo del sistema en. Permítanme aclarar esto. Y luego voy a usar N g g. Y luego puedo decir s para el servicio. O se puede decir en encuestas degeneradas. Y luego le doy su carpeta donde quiero crear mis servicios. Puedo dar servicio nuestros servicios y luego daré lo que a nombre del servicio puedo llamarlo como agenda telefónica. Ahora va a despejar la libreta telefónica encuestas dot ts plus también me va a dar casos de prueba , que no quiero en espectáculos a pedos. Se va a despejar una sola planta mecanografiada, no hay actualización del dedo del pie el en el modelo ts. Ahora volvamos atrás y abramos lo mismo. Entonces vamos a ir aquí. Uh, mira el servicio a slash listones telefónicos en sus 30 s que ha creado un servicio clásico de agenda telefónica. Pero por ahora, queremos tener una función aquí que te pueda dar datos de contacto que voy a dar aquí. Obtener contacto Los detalles son algo así, que toma un tipo de número i d. Off. Por lo que se supone que se necesita una idee. Y de acuerdo a la idea de postularse infravalorado. Entonces, ¿qué se supone que regrese? Se supone que devolverá un solo objeto de contacto. Por supuesto. Tu importación que en entonces aquí es donde creas el objeto y devuelves lo mismo. Ahora, yo de verdad Esto se supone para hacer una solicitud del dedo del pie. Sueldos Web Http. ¿ Qué? Eso lo haremos un poco más tarde. Entonces voy a extraer esta cancha de aquí en adelante. Entonces pon eso en este servicio en particular ahora. Entonces enamorado, contacte nuestro i d igual toe one me gustaría decir que necesito que se sufra por el usuario. Ahora dice aquí que distorsionar contactó a los secretarios en otros porque no tenemos ningún miembro disponible. Llame al contacto aquí. Entonces lo que hago para que este chico arriba en estas cosas empiece a alguien que está comandando en Mac controlar el en windows y seleccionarlos todos. Y luego crea que, por supuesto, una última cosa es que voy a encontrar una variable local llamada Contacto. Por lo que vamos a contactar. Se va a un nuevo objeto de contrato, y luego estoy enviando todos estos valores. En el primer día, ascienden todos estos valores. Puede que tenga que devolverle eso. Entonces hagamos un contacto de regreso también. Entonces ahora tenemos una función que va a escribir un objeto de tipo de contacto con todos estos valores. Ahora, aquí, necesitamos recibir eso. La pregunta es, ¿cómo consigo esa función aquí? Por lo que una forma que puedes hacer es siempre puedes crear un objeto fuera de esta serie de libretas telefónicas de clanes, por ejemplo. Se puede decir dedo del pie de la gente de servicio de izquierda, nueva agenda telefónica, soviética así. Y luego puedes ver aquí empiezan contacto igual servicio de grúa. Empezar, obtener datos de contacto, derecha. Y por supuesto, necesito suplir una idea. Apliquemos ideas Uno. Ahora bien, si vuelves con un hermano, deberías ver la salida sin ningún problema. Entonces conseguimos ese Hollywood. Esta no es la forma en que deberías estar haciendo, principalmente porque la propia clase de servicio de libreta telefónica puede tener algunas dependencias de otra, literalmente u otra materia de servicio. Por ejemplo, si queremos hacer una solicitud a y es punto de razón de TDP Webster, estaríamos usando algo llamado Hits TTP Client, que es desde angular. Entonces ahora no sabemos cómo crear un objeto a partir de eso. Entonces queremos angular para darme ese objeto también. Por lo que obviamente hacer esto tiene muchos y muchos inconvenientes. En este caso en particular, funcionó. lo demostré. Pero no es la manera correcta de hacer la manera correcta de hacer eso sería dedo del pie Pide angular para crear un objeto fuera de este servicio de libreta telefónica e inyectarme eso para que cuando lo hagas sea lo definas. Tu dependencia está en el constructor. Ahora debes saber que nunca creamos un objeto a partir de este componente de detalles de contacto. Es angular, que está creando un objeto fuera de esta clase. Ahora, obviamente angular, se supone que llame a este constructor en particular en eso es cuando. Si definimos una variable aquí, llamémosla un servicio Onda. Definimos su tipo de datos de esto llamado como agenda telefónica saris. Ahora angular sabe que tiene que crear un objeto fuera de este servicio de libreta telefónica. Ahora, en este momento, donde angular hace este angular va a mirar hacia el camino positivo. ¿ Ya tenemos un objeto fuera de las encuestas de libreta telefónica? Si la respuesta es sí, se va a inyectar eso aquí. Pero si el objeto aún no ha sido creado, va a estar creando un objeto y luego pasándome eso aquí, cierto, así que eso se llama como singleton. Eso significa que en cualquier momento, tendrá una sola instancia fuera de las libretas telefónicas o clase de riesgo así sucesivamente cuando angular creó esa clase. Entonces si hay alguna dependencia mencionada por aquí, angular también se inyectaría. Esa dependencia es porque ahora es responsabilidad angular crear el objeto. Entonces ahora que hemos recibido ese objeto overoye, esta variable se vuelve local a este par de corchete rizado particular, lo que significa que tengo que crear una variable miembro aquí en. Entonces tengo que asignar esa variable local a la variable miembro y así sucesivamente. Pero mecanografía tiene una característica fantástica aquí. Puedo declarar que este argumento constructor es de alta tasa nuestro público está protegido y automáticamente hacen esto como miembro. Variable ahora, ¿verdad? Entonces obviamente en nuestros impuestos que por aquí ahora tengo que decir esto empieza que empezamos a ser contactados fuera de uno. Y si vuelves al navegador y puedes ver que la salida también viene aquí, también añadiremos un pequeño detalle más aquí. Entonces vamos a añadir una imagen de arte de contacto igual a dos. Voy a añadir un Tú eres de hoy. Este es un enlace externo, así que guardaré esto. No estamos acostumbrados a esta imagen en ninguna parte. Así que vamos al componente de datos de contacto html Probablemente justo debajo de la HR. Entonces es isla. Yo soy G on. Ahora tenemos que tomar SRC igual a dos. Ahora la pregunta es cómo me refiero Con la imagen ahora, muy simple. Siempre puedo usar tu contacto nuestra imagen así que es una expresión que la expresión se resolverá. El valor del cuadro será el ascenso a la SRC. Permítanme también agregar un poco de estilo para que eso no sea una cepa igual a dos altura fuera de que haya ganado 50 picks up en eso. Guarda esto. Vuelvo al navegador y debería ver una imagen junto con esto. Ahora bien, esto no es ningún especial, pero si estás diseñando un atributo, una expresión esto se puede otorgar en otro. Espere. Entonces, por ejemplo, si elimino esto aquí, entonces asumirá que este es el valor real. Eso significa que está buscando una imagen cuyo nombre es contactar nuestra foto, lo cual está mal. Entonces obviamente vas a tener un error, ¿verdad? Hazlo una imagen rota más un error diciendo que está buscando anfitrión local para dos estiramiento doble cero. Contacta con esa foto. Ahora queremos decirle angular que esto no es un valor de cadena. Se trata de una expresión onda. Una forma de hacer que se vea ya mediante el uso de un calibrado. El otro modo de hacerlo es rodeando a este SNC con un corchete cuadrado. Entonces decimos ahora que este brandy, lo que estamos asignando es una expresión, no valores reales de núcleo duro. Entonces cuando digo esto el tema ve la misma imagen volviendo de nuevo 21. Configuración del punto final de REST: Por lo que hemos construido sobre el servicio angular, que es inyectable, y actualmente me está dando un solo objeto de contacto. Ahora, para que trabajemos con dinero, las personas se ponen en contacto con objetos y entienden cómo obtener los datos de un endpoint de servicio Web remoto . Primero construyamos un punto final de servicio Web en sí mismo. Entonces para este fin, volvamos a un conteo de comandos y quiero instalar algo llamado Jason Server on. Se trata de un descanso muy sencillo y sofisticado un proveedor de servicios. Intentemos instalar eso. Por lo que npm I para instalar en una vida Eres Jason Server. Por lo que el decente Suroor depende de la edad está archivado, lo cual puedes mantenerlo en cualquier lugar dentro de tu proyecto. Un árbol en asilo puede ser cualquier cosa. De hecho, el posterior también se puede servir desde un Jobs podría presentar. Pero por ahora, vamos a crear una carpeta en nuestra aplicación a la victoria. Vamos a los cardos mi directorio de aplicaciones. Entonces voy a crear una nueva carpeta aquí en un archivo dentro de eso, llamémoslo nosotros baby slash data Jason. Y esta es una pelea que vamos a crear Onda esa multa va a ser un objeto. Va en el Jason va a representar un objeto, Onda. Cada punto final se representa utilizando un valor clave. Por ejemplo, puedo pagar contactos puros, que es una clave, y el valor sería un ari. Y este sería un solo objeto de contacto, por ejemplo. Puedo decir que d es uno en eso. Puedo decir nombre de pila. Por supuesto, en este ser j divertido, tiene que ser una sintaxis muy estricta. Tengo que decir en la corte uno en doble curso, Nombre en. Tengamos mi nombre. De igual forma, voy a dar el resto de los días D. Entonces tenemos nombre de pila, apellido género. Hizo teléfono Ciudad, estado, país. Creo que esos son los valores. ¿ Me perdí algo? Sí, cita fuera. Pero así que esa es una especie de fecha de nacimiento. Entonces cuál es el será el 01 al 0 de 1974. Ese es mi primer objeto. Puedo tener otro objeto solo para asegurarme de que funcionara. Encuentra una copia de esta sección para la coma y degustarla. Entonces tenemos que conducir objetos ahora mismo. Por supuesto, como damos un i d Vamos a dárnoslo, digamos John Doe son Hagámoslo tan gentil con eso va a ser una hembra. Digamos que este es un ejemplo para que pueda tener a Jane Doe en Hexham sin teléfono. Pongamos parte del número telefónico por cada cinco por 897 algún número. Entonces dicho eso, yo último Texas y hagámoslo s U S. A. On. Hagámoslo nuestro C 85. Algún otro tipo. ¿ De acuerdo? Y necesitamos algo de imagen. Y si no quiero conseguir ninguna imagen, puedo dejar esta en blanco, o incluso puedo precisar que esto es no, porque no tenemos este valor así que solo podemos borrar todo y luego hacer que sea no, porque ahora mismo no lo tengo tener alguna hecha para eso. Ahora vamos a ver si podemos trabajar con esto ahora mismo, se puede ver que los Jasons son lo que tiene instalado Bean. También iré dedo del pie empacado o Jason por hacer una entrada para iniciar el servidor. Entonces iremos aquí y despejaremos una entrada para que la entrada sea eso de ojos de colores, Jason su servidor. O puedes llamarlo el resto del servidor lo que quieras, cuál es el valor para esto Jason, su servidor. Y luego puedes especificar el puerto si quieres Test export by default rate inicia con, creo, 3000. Entonces no vamos a dar que 4200 es donde se está ejecutando mi angular. Démoslo a las 4300 en adelante. No podemos simplemente precisar que tiene que vigilar los cambios que se hagan directamente a la multa. Entonces eso está bien. Y luego finalmente con su db slash ater Jason. Y esa es la pelea que se supone que debe comenzar ahora que hemos creado una opción aquí , sigamos y corremos día. Entonces para que en orden en esto dices npm Irán seguido de lo que sea que se dé aquí, esto podría ser cualquier cosa. Voy a morir puro Jason Dash dijo, Izquierda encendida Si todo está bien, deberías ver que Dice recursos http locales Comida tres doble cero slash contacto. Entonces si se abre esto en un navegador están en un cartero de dos piernas, debería poder ver que hay dos contactos. Lo que también me permite hacer es buscar mi i d. Por ejemplo, si es una slash. Debería ver un objeto de contacto. Si dije slash dos, que es el i. D. En realidad se va a buscar automáticamente en idea y usarte esto. Esto tampoco ha visto muchas características como una paginación y así sucesivamente, por lo que podemos obtener los datos desde aquí. Ahora tenemos que tener contactos aquí, así que vamos a revisar que los datos de barras de DB sean Jason. Tenemos que conducir. Ahora. Si quiero más contactos como este, podemos obtener más datos de un backside llamado burla dot com on. Y lo que tenemos que hacer es especificar qué otros campos queremos. Qué otros tipos de datos queremos Onda. Entonces podemos conseguirlo en el formulario de CS tres, Jason y demás. Ahora, lo que haré es ir a especificar que mis ideas de campo encuentren el número de Terra. Este va a ser un nombre de pila en el tipo nombre apellido me correo electrónico. Bien. El género también está bien. No necesito una dirección i p, pero necesito para Y si hago click en la pequeña, dame uno de los pies. ¿ De los tipos para los que quieres un concierto? Para agrego teléfono que va a este tipo. Necesitamos un d será el cual es un muerto. Pero vayamos a una cita. Entonces, ¿las fechas entre qué? Voy a ir a dar algo así como 01 2019 74 a, digamos alguna fecha aleatoria. 03 23 Salí en 98. No quiero en esta forma que quería en mi formato eso. Entonces, ¿cuál es lo que hemos usado en nuestra pipa de edad. Queremos que nuestro uno más sienta esa ciudad fuera de tipo ciudad. Queremos un estado fuera del estado. Un país más. Por supuesto que quiero el país. Andi, yo también quiero la foto. Entonces la imagen es básicamente correcta. Ahora déjenme darlo como negro. Pero voy a añadir una expresión aquí. La expresión va a género el valor basado en el yo d en el género. Entonces déjame basarlo aquí. Entonces básicamente estoy construyendo una concatenación de cuerdas que en realidad va a obtener de uno de mi sitio web en mayores. Andi, si el género es masculino, entonces los hombres cortan a las mujeres, luego una slash y en el id slash store chip it Así que cuando digo aplicar, sí obtenemos básicamente una expresión ahí. Por lo que tenemos nombre apellido, correo electrónico, género, teléfono. Si quieres cambiar la secuencia, puedes cambiar la secuencia como este dragón Drop on. Creo que debería. La gente piensa que tenemos la fecha del panorama del país de Ciudad Mundial Estado. Por lo que queremos sólo 100 registros. No queremos demasiados de ellos. Y queremos dedo del pie. Consíguelas en formato Jason. Ahora puedes descargar esto o puedes previsualizar esto. Te va a mostrar algo como esto. Entonces hacemos como realmente podemos copiar todo desde aquí para que pueda presionar el control. OK, copia y luego vuelve Toe mis datos que Jason quitó este Ari Andi desmenuzó el otro que yo simplemente no equipaje, supongo. Nuestro turno tras formato cancha Ahora tengo 100 datos de contacto con datos aleatorios. Puedo seguir muy por lo mismo mirando al anfitrión local por tres contactos de doble cero slash , slash decir, por ejemplo, 88 que la persona en él es una imagen válida también. Entonces si copio esto y abrí esto en y tú papá, puedes ver que la imagen de valor que podemos usar. Entonces ahora si vuelvo, hago algunos cambios en mi salario es tal que se va dedo del pie trastes el lector desde el endpoint remoto que acabamos de saber creado. Deberíamos poder ver a alguien responde datos por aquí. 22. Puedes consumir el punto final de REST en nuestro servicio: por lo que no hay gastos generales. Servicio web de dos TB Volver en esto arriba y en funcionamiento es hora de nosotros dedo del pie. Consumir el tema en nuestro servicio. Vayamos a nuestra solicitud. El primero que hay que hacer es incluir un modelo llamado Es modelo TTP Reclamado y eso se debe hacer yendo del dedo a mi deber. Sí, y tenemos que actuar que aquí importa. Pero por supuesto, antes de eso, tenemos que importar el modelo en sí. Por lo que vamos a decir importación desde en slash angular common slash STD en lo que viene de eso es una parte de módulo como http client modern on Once hemos agregado que aquí, eso tiene que ser incluido en nuestra sección de importaciones. Ahora, otra aplicación depende de otro módulo y este modelo tiene un salario llamado cliente http , si recuerdas, podemos inyectar un servicio en remolque. Otro servicio son componente. Entonces lo que queremos hacer es ir a nuestras encuestas de guía telefónica y decimos que queremos consumir ese servicio al cliente http y la forma en que lo hacemos es escribiendo cinco lo desde American. Llamarlo'll Http on off time, es cliente de TTP y eso va del dedo a importar el 2do 1 debería estar usando desde en angular común su PIB. Entonces conseguimos eso. Ahora que tenemos Http, no podemos consumir lo mismo. Entonces, ¿cómo hacemos eso? Entonces vamos a decir aquí es inicio, http dot Get y tenemos que abastecer una u r y la orina para es muy simple. Entonces va a ser scdp local host 43 doble cero slash contacto slash Plus esta hiedra que estamos buscando Así puedo ver aquí más t ahora, esta función cuando llamas, va a rehacer lo que se llama como observable y lo observable tiene para ser consumido en lugar de decir, lo observable debe ser subíndice Así que simplemente puedo decir volver aquí sobre eso me da un error porque aquí se puede ver que hemos dicho que el tipo de datos escrito es contacto. Pero como esto va a devolver un observable sobre, lo que hacemos aquí es ahora vamos a decir que esto va a volver sobre observable, que es de Rx Js y decimos que podría ser cualquier cosa Ahora sabemos que es un objeto de contacto Pero en este momento diremos cualquier año Entonces lo que significa cuando se llame a esta función, en realidad se va al hecho en observable. Y si recuerdas donde hemos llamado fueron llamados en nuestros datos de contacto del componente y en el componente cardenales de contacto es. Por lo que dijimos aquí este contacto de inicio equivale a dedo un observable de nuevo. Eso está mal, porque el contacto es una variable fuera de tipo contacto. Pero como esto es un observable, ya sabes, la forma en que podemos asignar es así lo decimos primero, estas acciones que comenzamos obtienen datos de contacto, lo cual es un observable sobre observable, tiene que ser suscrito mediante el uso de un dark subscribe, y el sustrato da tres callbacks. El primer callback es básicamente sobre cuando obtienes el realmente, no lo hagas. ¿ A qué quieres ir cuando obtienes una edición? ¿ Qué quieres hacer? Eso un segundo perímetro. Y cuando la suscripción real esté completa, ¿qué quieres hacer ahora? En nuestro caso, sólo queremos recibir los datos. Entonces cuando los datos estén disponibles, dámelo. Me gustaría asignar contacto de distorsión del dedo del pie es igual a datos del dedo del pie, y esto es lo que estamos tratando de hacer aquí Si formatear esto así que ahora llamamos a la función y cuando se devuelve el objeto, lo observable es volver. Nos suscribimos a eso en cada vez que se disponga de datos, los datos se me dan y eso estoy asignando. Ah, inician contacto. Entonces voy a guardar este navegador go back toe. Si ves ahora, obtenemos datos de una persona diferente Ahora también, puedes ver que hay un error aquí inicialmente, Así que simplemente no se puede encontrar imagen fuera de indefinido. Hagamos una cosa que quede clara la pantalla y luego recarguemos una vez más. Onda, uh, ver que tenemos un editor aquí y la razón por la que este es otro ahora Andi no anterior es porque cuando se carga el componente, el objeto de contacto está vacío. Ahora mismo está indefinido, Rachel, porque acabamos de declarar el tipo de datos. Pero a ti no te asignan nada. No hemos ascendido nada en el constructor. No estamos ascendiendo nada en la ONG en ella. También en mejor estar asignando. En realidad estamos tiene algún punto posterior en el tiempo cuando el realmente muere disponible. Entonces Pero antes de eso, el componente se carga en la U I onda el componente HTML Si miras está tratando de hacer algún tipo de imagen aquí y esto es indefinido en este punto en el tiempo, encendido e indefinido. El cuadro oscuro es un editor y eso es lo que en realidad estás recibiendo interrupción No se puede leer imagen de propiedad off undefined. Ahora, una solución fácil para esto sería simplemente inicializada esto en cualquiera de las dos En la imagen están aquí mismo igual dedo nuevo contacto sin ningún perímetros. Onda. Ahora eso debería resolver el problema en se puede ver que el interés, Claro. principio, todavía se va a ir a una foto on No sólo no se valoran imagen, así que por eso está dando. Pero eso está bien. Todavía podemos premiar agregando un cuadro ficticio. Pero esto está bien, si acaso si voy aquí y luego en lugar de uno. Si digo 45 guárdalo ahora, debería ver persona diferente, ¿ verdad? Esto es exactamente cómo consumir un endpoint de descanso usando cliente http, vamos a hacer algo de re factoring ahora, así que si vuelvo al servicio, puede ver que esta orina ahora se usaría en múltiples lugares. Obviamente, no es buena idea mantenerlo por aquí. Entonces voy a escribir esto como orina basada, que no tengo Alguien cree una variable. Tu llamada, CONST. La orina basada es igual al dedo del pie esta y aquella cuerda. Entonces ahora tengo un mecanismo simple por aquí. Y por supuesto, vamos a escribir cada vez más funciones, como poner todos los contactos encendidos, agregar un nuevo contrato y así sucesivamente y así sucesivamente. 23. Escribir operaciones de CRUD en la inyección de ContactsService: en este modelo. Añadamos más funcionalidades a nuestros salarios de agenda telefónica para empezar. En primer lugar, cambiemos el tipo de retorno de observable fuera de cualquier dedo del pie observable fuera del contacto. Y esto se debe a que en nuestro componente, datos de contacto contactados con su componente DS realmente estaban diseñando el valor de retorno de la suscripción a nuestro objeto de contacto. Entonces mientras que aquí dijimos que es cualquiera que sepamos que cuando hacemos una solicitud a este Ural en particular, devuelve un solo objeto de contacto. Entonces cambiemos esto por observable fuera de contacto. Ahora. Cuando guardamos esto, se puede ver que me está dando otro porque por defecto devuelve la función get y observable off object, tenemos que transformar el objeto de respuesta en un objeto de contacto. Esto se hace llamando a una función llamada mapa cuyo trabajo es mapear sobre objeto de un tipo a otro día. Entonces para este fin, puede que tengas que llamar a la función mapa del auto, ya que puedes ver que no está listando la función del mapa, por lo que nuestros esmoquitos tienen operadores de radio que puedes usar. Por ejemplo, si voy a ir ni modelos Onda buscar auditorías Js Se puede ver que hay un operador de sub módulo , y hay un montón de operadores que podemos ver aquí como, por ejemplo, conquistados o atrapar. Ahí hay conteo, y muchos de ellos. Una de ellas pasa a ser un mapa también, Así que si quieres, puedes importar nuestro listón exterior r slash operativo hombre. No. Nuevamente, accede a esta función de mapa desde esta obtener funciones. Regreso vientre. Seguimos hacia el norte Habla hombre, y luego Matt tiene acceso al objeto de respuesta. Llamemos si se acumulan y necesitamos escribir un convertido o mapear el valor del líder . Simplemente puedo sentarme. Datos tiene contacto, por lo que el casting off que se llevará a cabo automáticamente. Ahora ves que no hay otro ahora para que esto funcione, tienes que agregar un paquete más a tu aplicación. Por lo que al ejecutar este comando, NPM instala ópticas Dash Compact de JIA. Eso es un esto y volver a más cerca para ver que el resultado está intacto. ADN. Está en una segunda función. En este momento. Queremos poder agregar un nuevo contrato, así que esa es función de color llamada como nuestro nuevo contenido, y el argumento sería objeto fuera de contacto. Después de agregar un nuevo contacto a través de la publicación de punto http, obtenemos un observable fuera del objeto de contacto con el 90 también. Entonces vamos a decir que eres observable en eso y luego puedo ver tu regreso. Este inicio llega a representar son causados ahora The Post Rick Waas, El Ural Muy un post que es esta base. Ural, ejecuta ese patio base y no hay idea. Asociativo, a diferencia del anterior en el segundo perímetro, serían los datos que desea a nuestro cuál es este y no que estemos recibiendo un objeto JavaScript, sino que se convertirá en una carga útil de Jason y se enviará para que no tengamos que hacer ninguna conversión de objeto a cadena aquí. También será difícil, y es para DP solicitar Encabezado Caldas contenido ID igual al dedo aplicaciones izquierda Jason Así que todo está implícito. Pero si quieres a nuestros encabezados adicionales, siempre puedes agregarlo como 1/3 de perímetro. Entonces no tengo tal requisito ahora mismo, Pero cuando sí atendemos occassión, entonces podríamos tener que enviarnos alguna autorización. Entonces en este momento, esto devuelve un observable off objetos Entonces, igual que en el caso anterior, puede que tengamos que igualar la respuesta, sea lo que sea. Una vez que nos pongamos en contacto, objetamos y eso se va a hacer. Como se puede ver, que son más o menos una Venecia. De igual forma, podríamos querer hacer una actualización. Entonces para hacer eso, se llama está fuera del contacto. Recibimos un contacto como perímetro, y el valor de retorno es igual al anterior. Tenemos una conducta off observable, así que vamos a copiar cara lo mismo en esta ocasión que regresen. Empiezan Http, alquitrán puesto que en realidad, desde entonces es ciudad la gente solicita esta vez. ¿ No necesitamos la orina base? Debe la idea de la persona que declaró que queremos modificar, que es contactar nuestro i d. Y entonces puedo decir el contacto a menudo mismo con el pálido. Entonces como en el caso anterior, puede que todavía tengamos que mapear la respuesta a un objeto de contacto que vamos a hacer ahora y la función está hecha. Otra función que queremos a Robert aquí Es esa borrar que es idéntica. Entonces el get so lo copio lleva el mismo cambio. El nombre dedo del pie eliminar contacto. Parece que las ideas un perímetro en porque la función http dot delete. Andi, A diferencia de los anteriores, no hay actualización de contacto que viene en el restaurante. Entonces esto va a ser observable fuera de cualquiera, y entonces no tengo un requisito fuera mapear esto. Tengamos una función más a esta clase de servicio, que me da una lista de conductas por página. Entonces, bueno, addio conseguir todos los contactos, que toma un número de página, que es un número encendido si el número no era así Llevémoslo a la primera página, que regresa y observable. Pero esta vez, en lugar de un solo contacto, estaremos teniendo una matriz fuera de contacto. Y para poder hacer una petición, simplemente podemos decir, devolvió este material extensamente. No pongas la base Yoran en. Pero entonces decimos tu mapa de puntos, obtenemos la respuesta y convertimos la respuesta en remolque en matriz, fuera de contacto. Ahora, esto me dará todos los contactos en nuestro punto de descanso. Queremos hacer uso de este número de página. Para ello podemos leer disponible para los padres Andi, que es un objeto que consiste en valores clave. El clave es un string car Underscore Page y el valor siempre debe ser una cadena, que es el número de página que estamos suministrando. Entonces sólo vamos a convertir eso en una cuerda. Pero la concatenación y este patrón pueden ser nuestro segundo argumento. Ahora el segundo argumento a ese get es un montón de opciones, como encabezados y perímetros y así sucesivamente. Y ya que queremos abastecer sólo los medidores de patrón, por lo que ahorraremos a sus padres de corchete de carrera. Ahora esto es tan bueno como decir que los padres es la clave. Los fondos de colon es el valor ahora en el Año seis. Si tienes la clave y el valor con los mismos nombres de variables, solo puedes escribir padres. Entonces vamos a guardar esto en ese ácido obtener todo contacto por función de página. 24. Mostrar la lista de todos los contactos con la directiva NgForOf: Ahora que tenemos todas las funciones necesarias para la aplicación, seamos más componentes en esta ocasión. Agregaremos un componente que se puede conseguir en los contactos y mostrar. Entonces eso va a crear un nuevo componente escribiendo N g G C para componentes de género. Y queremos eso en componente. Mayores, Digamos que se llama Contactar esa lista en No queremos Spec. Entonces con los espectáculos del doctor a alboroto y eso es simplemente perfecto equivale a dos PB para agenda telefónica que va a crear tres clases. Html CSS es una clase mecanografiada y también actualiza nuestra APP. modernidad es con respecto a la sección de declaración, así que volvamos a nuestro núcleo y abramos el tema. Entonces vamos a abrir el componente de lista de contactos de TS, que está aquí y declarará una variable fuera de los contactos en él. Entonces vamos a calmarlo. Pregunte a los contactos, prudente fuera de una matriz fuera contactado. Sé que me está dando otra porque tenemos toe import los mismos comandantes de ciprés están controlados en ventanas y eso importado no hemos inicializado esto, agregando, así que si quieres conseguir inicial, es esto cierto y matriz vacía como esta? Pero eso realmente no funcionó porque simplemente vamos a inicializar eso en el n G encendido en él, usando nuestra función de servicio. Entonces el servicio es un inyectable, así que obviamente tenemos que inyectarlo en nuestros constructores. Es un privado Eso es crítica. Respetables, fuera de la agenda telefónica grabada salarios, esta cirugías de plática no podemos decir ponernos en contactos y conseguimos la función, las amenazas y observables, que necesitamos suscribir. Llamémoslo un comienzo. Suscribirse. El primer argumento es el combate que recibe el objeto de respuesta, que es otro de contexto que conocemos. Por lo que no podemos quedarnos aquí. Cualquiera que sea la respuesta que venga, queremos asignar toe el contexto de inicio es igual a remolcarlo, y en realidad deberían quitárselo, recuperando los datos de primera página con el fin de probar lo mismo. Vamos al HTML on trató de recuperar los detalles de la conducta. Entonces vamos a eso y dice que la lista de contactos funciona. Pero en cambio voy a tomar tu somos de corchetes rizados. Y luego dije contactos que está disponible que tenemos Eso es solo para exhibir eso en la forma de Jason Jason en la tubería del edificio que uno trabaja. Cualquiera que sea el objeto que esté ahí en la cuerda de Jason. Por lo que si vuelves al navegador, seguirías viendo los detalles anteriores. Eso se debe a que nuestro en el componente HTML actualmente muestra el contacto de PBY tuiteado. Por lo tanto, permítanme encomiar lo mismo. Y luego sacó nuestro nuevo componente, que es la lista de contactos de efectivo de PB, como una nueva tachuela. Entonces eso es incluir eso en su momento. Guárdalo. Y luego vuelvo al navegador. Debería ver una lista de contactos, y se puede ver que el contexto esperando algunos i d un dedo i d 10 hasta si quiero los detalles de la segunda página. Puedo volver aquí a mi TS competente y luego suministrar el número de página ya que eso es un tres. Guárdalo. Cuando vuelva aquí, debería ver un nuevo conjunto de contactos del 21 a Turquía, que se supone que es una página número tres. Entonces vamos a usar esto ahora en pantalla el contexto de vista. Entonces volvamos a,Por supuesto, Por supuesto, queremos policías que esta dos páginas número uno RB Tony tendría que suplir eso porque esa genial que obtenemos la primera fase detalla cualquiera de ella. Vamos al html en ahora puedes mostrar al menos fuera de los contactos que tenían tres primero y decir esa lista fuera de todos los contactos. Eso es lo que tenía, Charlie con el fin de mirar a través y conseguir todos los contactos uno por uno para que podamos imprimir los detalles del mismo angular proporcionar algo llamado directores. Entonces visitemos documentación angular para lo mismo. Entonces vamos a ir a angular que ¿Eres Andi? Ve a los muelles. Hay una A p una sección on en la lista fuera de tipos podemos seleccionar directiva. Como se puede ver que hay muchas directivas comunes, forman actividades relacionadas y así sucesivamente. Entonces el que estamos viendo es lo que se llama N G. Lejos del motor. Cuatro de la directiva son perdedores. Toe miró a través de una colección que tenemos sobre observables fuera de colecciones, y luego podemos acceder a los elementos inusuales de la colección. Esto es bastante útil. Vamos a ver cómo se puede usar esto. Ahora usemos un trato que se supone que se repita para cada contexto que tenemos que hacer que te lleve a tu estrella. N G cuatro es igual a dos, y tenemos que dar expresión Expresión será como dejar ver fuera contactos. Ahora, los contactos es la variable miembro en nuestro TS Here. Este es un miembro confiable y queremos dedo del pie Obtener un solo contacto en Nómbralo como se ve. Entonces ahora, si se puede pensar, ver es un contacto puedo mostrar los detalles de eso Ver aquí, por ejemplo, ver bastante completamente. Por lo que si vuelves al más cercano, deberías verlos todos mostrados en forma de nombres completos. De acuerdo, así es como podemos realmente agrupar. Y Ari, en caso de que este Eric crezca automáticamente, esto también va a crecer. Por ejemplo, pongamos apartamento aquí diciendo que, digamos, importante para Bt y nuestro tratado y familia en. Entonces diremos tu Señor más el talento click manejador de eventos para la misma junta llamada Lord . Y por supuesto, no tenemos esta función que va a dar otra. Eso es salvarlo. Vuelve por aquí. Eso está en una función para normal, que se supone que incrimina el número de página. Y no tenemos el número de página it variable solitaria llamada Asian Off número cinco, inicialmente a una onda, tenemos que implementar ese número de página dirá este inicio ocasional plus. Ahora necesitamos abastecer esta página. El dedo del pie entumecido el servicio No obtenga toda la función de contacto. Por lo que dijimos este servicio de inicio No obtener todo el contacto en este número de página de inicio es la variable que queremos suministrar a la función de subíndice. Suministraremos callback, que recibe los datos que es ah, correspondiente a un día libre contenidos. Tenemos dedo del pie contacto innato dedo del pie este adicto existente y esto se puede hacer en base diferente . Una de las formas de hacerlo es iniciar contenidos iguales a la anualidad que consiste en todos los valores de contactos distorsionados, como con nosotros, los valores de los datos. Por lo que a esto se le llama operador de spread en el año seis. Por lo que en realidad se va a difundir sobre los valores del contacto y luego difundir todo el valor de los datos se convierte en una nueva distancia. Y eso es un Centobie inicio contactarte si guardo este núcleo ahora. Y si vuelves al navegador, Así que echemos un vistazo a eso. Obtenemos el primero en apagar y cuando hago clic en Lord More, se puede ver que 10 más está cargado. Y cada vez que haga clic en esto, vas a conseguir 10 más cada vez. Entonces para embellecer lo mismo ahora volvamos aquí. En lugar de solo mostrar esto, probablemente pueda mostrar la imagen del nombre de la persona de la persona en Probablemente City de donde viene la persona. Entonces vamos a tener algo de CSS tan preocupados. El final con lo que se llama grupo de lista en ese grupo de listas va a contener estos elementos de grupo , por lo que eso está fuera de tu clase es igual a toe list Elemento de grupo. Probablemente yo quiera tener un rol con dos columnas que estados gobiernan con un llamado SM cuatro que para la imagen plus llamado S ellos edad para la pieza restante de datos se supone que el 1er 1 contiene y da cada uno Esa es nuestra imagen, la muerte y la imagen. Doug va a consistir en el SRC proveniente de Cedar Picture. Pero si recuerdas, se supone que la imagen de cedro es una expresión para que podamos ver que es una expresión agregando una vuelta cuadrada al SRC. Atributo. Entonces esa es una foto. No, también nos puedes dar talla. Vamos a dar una tensión de piel por ejemplo, off, digamos 100 pixel de 1 50 imagen y eso debería ser lo suficientemente bueno. Y este es un lugar donde quiero mostrar los nombres de las personas. Tengamos una cabeza para la cual consiste fuera ver pero me llena encima. Y también estamos al tanto del párrafo que consiste fuera de Cedar City y ver que ese estado lo guarde . Volvamos a la Rosa en DSI que los datos se desesperan muy bien. 25. Configuración de la ruta y cómo cambiar las vistas: Ahora que tenemos múltiples componentes en nuestras aplicaciones que tiene componente de lista de contactos y componente de detalles de contacto, deberíamos poder remolcar cambiar entre ellos haciendo clic en una persona de contacto en particular, probablemente en la imagen o en el nombre. Si hago clic en eso, debería mostrar los detalles fuera de esa persona específica. Obviamente, tenemos que identificar de dónde debe venir esa información. Por lo que nos gustaría probablemente eliminar esta lista de contactos. Y en ese lugar, queremos mostrar los datos de contacto de la persona. Y esto se hace mediante el uso de algún concepto llamado conceptos de enrutamiento. Lo primero que hay que hacer es remolcar identificar la ubicación donde el componente tiene que ser destruido dinámicamente. Ahora, para ello, iremos a nuestro componente ab AB HTML. Y aquí es donde visualizamos los componentes cambiando manualmente. Lo que voy a hacer es quitarle eso y luego colocar un componente llamado rotor fuera. Es un componente de construcción desde angular, pero esto va a venir sólo si estás usando algo llamado Escrito de moderno. Ya que no estamos hechos eso. Entonces no me está ayudando aquí afuera, pero sin embargo, agreguemos ese poco de chocolate como ataque. Entonces, obviamente, si vuelves al navegador, lo haces mejor aquí diciendo ese total de fila. No es un componente válido. Si vuelves a la consola, puedes ver. Cero Para rotar no se desconoce. Elemento ahora que se puede arreglar muy rápidamente yendo a nuestra aplicación están en la modernidad es , y tenemos que adherir un modelo llamado modelo de rotor. Entonces vamos a publicar sobre nuestra modelo. Entonces eso es una importación. Andi de en tu carretera slash y esto me va a dar un modelo. Está en un modelo llamado Rotor Modern. A diferencia de las anteriores que usamos aquí, es posible que no puedas usar este tipo de modelos directamente, y eso se debe a que tienes que dar algo llamado configuración vial. Entonces, ¿cuál es otro que es crear eso aquí mismo? Podemos desplazar esto a otro lado más adelante, así que vamos a declarar una variable. Eso si Const. Carreteras, que es tiempo fuera llamado, lo escribió citas dedo del pie y y para el tiempo, dejémoslo en blanco y luego bajemos a nuestra sección de importación y luego escucho Módulo Rotor pensado para Route on. Entonces abastecemos esos caminos. Entonces salvaste esto. Ahora bien, si vuelvo a la Rosa, no debería estar recibiendo un error. Pero no tengo ningún componente porque tuvimos que especificar dinámicamente ese componente. Ahora la parte del Ural aquí puede identificar cuál se supone que es este componente en particular . Por ejemplo, si digo slash, quiero que venga aquí el componente de casa. Pero si digo que sí, slash lista de contactos como ejemplo, Así que esta parte debe identificar la lista de componente y ese componente debe colocarse por aquí. También podemos decir que sus datos de corte son datos de contacto. Esto debería identificar un contacto intenso por aquí que aquí es donde entra la configuración vial . Te imaginas para especificar qué parte de la olla debe identificar trabajo, componente lo beneficio bastante simple. Ve aquí y luego crea un objeto de configuración vial que tiene básicamente parte on Decimos que hogar es la parte y luego eso debería descansar Oneto un componente llamado componente home on. Ahora si su servicio será un espacio en blanco aquí en este momento. Pero una vez que está muy cargada, podemos checar aquí escribiendo barra barra mantenga presionada enter Debería ver el componente home. De igual forma, también puedo especificar que otra parte llamada lista de contactos, debe identificar un componente llamado como componente de lista de contactos. Onda se pot datos de contacto deben identificar un componente llamado datos de contacto componente. ¿ Verdad? Por lo que ahora se puede ver que tengo tres spots viales diferentes, por lo que cada parte identifica a la empresa específica. Ahora la parte que el texto puede ser cualquier cosa que quieras, pero en realidad no mantuve lo mismo que la sugerencia fuera del componente en sí. Entonces volvamos aquí en eso es todo. Si digo que eres lista de guión de contacto y prensa licitación, puedes ver que me está dando la lista de contactos. Y por supuesto, si dije Contrato de gusto, va a volver y mostrarme contacto con nativos de una sola persona. Entonces obviamente, también nos gustaría tener una raíz fuera de su aplicación señalando dedo del pie algunos antes componente, y eso se puede hacer especificando que la raíz fuera de su aplicación debería redirigir toe uno de esto como home. Nuestras listas de contactos depende de ti generalmente rehaciendo al principio. No es necesario, pero comenzó, Seyfarth equivale dedo del pie a una cuerda vacía y luego especificamos cualquiera de los componentes son lo puedes decir directamente a casa en este caso, redirigió las tareas porque la forma es una parte que corresponde al texto. También puedes tomar directamente tu componente está seguro de casa. Pero sólo un problema es que soy distrito es parte de cada parte que queremos decir que la cuerda vacía debe ser lo único en las partes, no sólo parte del parque. Por lo que eso se hace escribiendo para partido en la misma comida de esta manera. Sólo si toda la parte es una industria, entonces se redirige el hogar. Entonces si vuelvo al navegador, deberías ver ahora que el agujero se va a mostrar por el frente. Entonces aunque no visito esto, elimino esto y presiono enter, verás que se redirige. Dedo del dedo del pie a casa en que aparece automáticamente. Ahora que tenemos configurado el enrutamiento básico Ahora, también nos gusta brindar muchas opciones. Entonces si hago clic en la opción de menú, debería ir de pie a una empresa en particular que esto se haga mediante el uso de algo llamado patas de enrutador que simplemente se ponen hipervínculos. Entonces vamos a ver cómo se puede hacer eso sin un par de menús por aquí. Uno es entero. Uno es la lista de contactos en fuera de curso. Debería poder cambiar entre ellos usando los hipermedios, no escribiendo manualmente en ese lugar. Entonces volvamos atrás el componente cibernético. Html. Sube este H tres y en unos botones aquí. Entonces eso es adelante. Un arma con Bt y encendido. Puedo guardar Bt y dash Primary en el botón. El epígrafe estará en casa. Digamos esto. Vuelve a empezar. Verías que hay un fondo y si quieres un botón más ancho, puedes especificar año Bt y Dash long que va a ocupar el completo arrancado del costado. Pero, ¿cuál sería lindo? Y luego, claro, puedo copiar y pegar esto un par de veces. Un 2do 1 sería lista de contactos para que esa sea una lista de todos los contactos. Y si no quieres familia, puedes llamarlo así Segundo Billy. Es así como miramos eso, y esto está bien. Entonces ahora ya ves, tengo dos botones, pero claro bromeando sobre el que no pasa nada así a este fin, lo que tenemos que hacer es proporcionar lo que se llama como directiva de enlace de router. Entonces están fuera diciéndole Directiva se da así estoy soportando para que pueda tener algo de espacio aquí así puedo decir Router League igual. Do now Recuerda, el registro de pantalla significa lo que sea que hayamos dado aquí es una expresión. Entonces este es un atributo regular, pero se les dio una camisa de fuerza para indicar que esto es una expresión. El término es un Ari que consiste fuera de la carretera. Qué Entonces, por ejemplo, concurso almuerzo ar barra casa en que debería corresponder dedo del pie el hogar. De igual manera, te puedo dar un totalmente encendido, entonces es igual a una expresión que consiste fuera de lista de contactos. Aquí, guárdalo. Y si vuelvo al navegador, debería ver dos botones encendidos. Al hacer clic en la lista de contactos, se puede ver que este rotor Oakland ahora muestra una lista de contactos. De igual manera, cuando me ocupo de esto, se puede ver que ahora soy capaz de volver a casa. De igual manera, también puedo proporcionar una ruta temprana para cada uno de estos dos. Haz eso. Volvamos a la lista de contactos. Html Andi. Si ves, aquí es donde tengo la imagen. Aquí es donde tengo un nombre completo por lo que puedo agregar una ruta solo tampoco. Con esto son hoy que se añade borde del dedo del pie para Así cuando voy al borde por nuestra una fila girando igual encorvado y Ari. Pero esta vez queremos suministrar días de contacto de slash en guardarlo. Entonces cuando volvamos aquí, tenemos la lista de contactos. Ya ves que no consigo un hipervínculo son que no consigo un ícono de cultura, pero al hacer click en esto, deberías ver que soy capaz de poner a su diferente persona. Por supuesto, lo que queríamos hacer es hacer click en una persona en particular para ver los detalles de esa persona. Ahora mismo, no estamos suministrando ningún detalle de la persona que tenemos aquí. Esa es la razón por la que no estamos entendiendo eso. Entonces lo siguiente que tal vez tengamos que hacer es remolcar quiere en la información, como una idea fuera de esta persona a los datos de contacto. Entonces, como, por ejemplo, junto con este contrato, es que quizá quiera suplir la semilla o idee, y eso es lo que les podemos dar. Vamos, semilla sobre hiedra. Entonces esa es la razón por la que esto es una expresión. Ya ves, este es un día libre. Dos valores ahora uno es un arroyo. Esa es la parte. Y la segunda es la idea de la persona que estoy enviando. Pero desafortunadamente práctico en esto, se puede ver que estoy consiguiendo un editor. Eso se debe a que está mirando contenido. Detalles slash tres on. No tengo ningún mapeo para esta parte. Al igual que tenemos el mapeo para contacto. Lo es, pero no para datos de contacto barra tres. Entonces si aclaro esto y me enfrento a esta persona ahora, puedes ver que me está dando otra cosa. Ese contexto se corta. Cinco es uno inválido. Entonces, ¿cómo abordamos esto? Es muy sencillo. Vamos a la app modelo TS y decimos que qué? la par de las evidencias de contacto, también nos gustaría suplir un yo D. Y si yo este tipo aquí, me ve Entonces asumirá que la hiedra también debe ser difícil ponerla. Pero sabemos que esta idea debe ser como un dedo del pie. Tres son así. Entonces para mencionar que esta es una parte valiosa de la parte que le damos tu colon, Heidi, Heidi, y esta variable ahora puede identificar cualesquiera que sean los números que estaban suministrando. Entonces si vuelves de nuevo, ¿ves que no hay otro dice off? No. Cuando hago clic en esto, se va a la persona crítica. Pero abastecemos a los únicos cinco, pero no lo estamos usando por aquí. Y si solo das un paso atrás y vas al contrato, es componente DS. Ya verás que siempre estamos suministrando 45 como número. Entonces a pesar de que estamos aquí de pie bien, son uno, por ejemplo, siempre estaban enviando para una pelea. Ahora lo que tenemos que hacer es captar este valor que estamos enviando, que es parte de la parte para yo d Andi. Entonces consigue que yo d. Y luego trabaja con eso. Entonces en lugar de enviar, 45 fueron toe enviar Esa idea suministrada por el usuario 26. Cómo acceder a los parámetros de la ruta en ContactListComponent: Entonces en esta mañana, digamos cómo recibir los parámetros redondos y luego sacar los detalles de esa persona de contacto en particular . Y para ello, tenemos que convertirnos en un servicio. Lo trajo por módulo de rotor angular llamado como activado escribió para que podamos declarar una variable Say, por ejemplo, privado después de una nominal sobre off tipo activado ronda. Por lo que los nombres de las variables pueden ser cualquier cosa menos tendencia general es que se mantenga el mismo nombre del nombre de la clase con un menor obtiene costo más adelante. Esto ahora tiene puntera de acceso en los parámetros de carretera. Podemos hacer uso de eso en la imagen. Por lo que ahora podemos decir aquí que este inicio activó firmas al aire libre, que es un observable al que se puede suscribir. Y ahora tienes acceso a todos los inusuales para metros. Digamos foros datos sobre ahora usar ese término estado son que probablemente quisiéramos hacer una solicitud a este. Entonces voy a cortar esto desde aquí y paginé por aquí en lugar de 45 donde queremos abasto está apagado. Yo para que nos consigamos la idea y de ninguna parte viene esta idea. Si nos fijamos en este ABT orejas modeladas. Definimos aquí la variable llamada Idee. Entonces esta es la variable a la que estamos tratando de acceder desde el estado barómetro. Entonces si guardo este número aquí y luego vuelvo al navegador encendido, tenemos acceso a los datos de contacto slash uno. Entonces si voy a la lista de contactos y hago click en el segundo contacto, ves que estamos suministrando a aquí y también estamos consiguiendo los detalles de esa persona. Entonces si voy a otra persona y luego consigo las pruebas, puedo acceder a esos detalles en particular Además, un par de cambios te haremos porque vemos que hay muchos errores que se están acercando. Y eso es principalmente porque fuera de la barra no aquí. Ahora bien, si tengo algún cuadro deformado, eso sería fantástico, por lo que podemos asignar un cuadro diferente. Estás así para que podamos ir a encima de Martin el. Tenemos esta conducta tortillas. Hay una imagen que es opcional, y también puedo asignar una cadena aquí la cual se supone que debe ser cortada, una barra sexual en mayores, y luego puedo decir que estás fuera de punto de vuelo PNG Andi que nos debería dar un perfil por defecto imagen. Ahora si vuelves al más cercano, vemos que no tenemos editor. Y eso es porque sí tengo una foto llamada activos Imágenes perfil que PNG. Entonces si retrocedes el dedo del pie SRC y sientas imágenes, puedes ver que tengo este proveedor, el motor que se puede utilizar en el futuro. Una última cosa que vamos a arreglar es el tamaño apagado. Esto probablemente es demasiado grande, así que quiero O district US 200 pixel instalado en un excel efectivo. Por lo que vamos a la lista de contactos html on. Te tenemos aquí algo así como 1 50 pixel. Redujamos el remolque 100 pixel y eso debería estar bien. Una última cosa es que éste no parece un icono clicable, pero es explicable por todo el vinculador del rotor. Podemos agregar un poco de estilo aquí para que puedas decir que el estilo es igual al dedo del pie del puntero de colon concierto, y eso hace que parezca un icono que se puede hacer clic. Se puede ver que consigo la yema del dedo para que pueda enfrentarme a esa persona cuando consiga los detalles de la misma cosa 27. Eliminar un contacto: No, el proyecto de ley vio cómo funciona el enrutamiento en ¿Cómo podemos cambiar entre diferentes componentes mediante el uso de un lanzamiento de ruta? Echemos un vistazo a una característica más fueron programáticamente podemos navegar a una vista diferente también. Por ejemplo, si tomo a esta persona y me dan los días D, eso es lo que queremos proporcionar. A borrar puesto aquí. Onda. Cuando hago click en el pueblo, quiero que me pregunten. ¿ Estás seguro de que quieres creer esto? Y si la respuesta es sí, debería borrar esto. Pero como se borran los datos, no quiero estar aquí. Pero en cambio me gustaría volver a la lista de contactos donde puedo ver son eliminar más personas. También puedo proporcionar una adopción de acuerdo aquí mismo para que pueda patear en esto. Y lo mismo debería pasar fuera de curso, en cuyo caso no tengo ninguno para que suceda el dedo del pie de redirección. Pero primero, vamos a ver que podemos proporcionar un botón de borrar desde aquí para hacer eso. Vamos a los datos de contacto Comando Componente V o control, ser datos de contacto. Sí, vamos a proporcionar una funcionalidad de eliminación aquí. Entonces eso son días festivos. Eliminar contacto Onda. Cualquiera que sea el contacto que se esté mostrando actualmente, la gente toma para hacer lo mismo. Ahora cuarenta. Queremos hacer fuera de estos salarios con los distorsiones nuestro reinicio eliminar contacto. Y eso toma una idea. El perímetro así abastecerá a estos contactos. Estaré así si empiezan a contactar a nuestro i. D. Onda. Este Rettton es un observable sobre cuando se completa la suscripción. Nos gustaría hacer algo tal que la vista actual se despegue en otra vista se coloca en la ruta o fuera tarde. Esto se puede hacer usando otro servicio, probablemente mejor después de Madi y esto se llama como router. Entonces vamos a proporcionar aquí una variable cinco lo alrededor de su tipo fuera en todo. Y eso es importante aquí y ahora esta variable tiene acceso a su función llamada navegar dentro del router distorsionar No navegar. Tenemos que abastecer un día libre todas las piezas de repuesto en nuestra conseguirlo muy sencillo con una lista de contactos . Ahí es donde nos gustaría seguir dando esto toma cualquier camino para medio. Podríamos haber suministrado eso como algunas variables aquí, así lo único que tenemos que hacer ahora es proporcionar una parte para su lugar. Vamos al extremo y correspondiente a esto probablemente fuera hacia algún lugar aquí puedo ver por $10 mediana BT en peligro. Entonces debido a que es un botón de borrar, también puedo proporcionar escuchar un manejador de eventos de clic es igual a la función de borrar dedo del pie contacto. Una última cosa que queremos proporcionar aquí es el dedo del pie. Pregunte al usuario. ¿ Estás seguro de que deseas eliminar? Y decimos aquí mediante el uso, si no conformarse? Confirmado por cierto, es una función de ventana para que podamos ver tu ¿Estás shoud encendido? Si el usuario dice que no, sólo vamos a regresar de este lugar en particular. Si usan su dice Sí, esto va a ir. Si usan esto, no hay sólo está regresando de él desde aquí mismo. Por lo que salvó esto. Vuelve al navegador. Ahora tenemos un botón A al pueblo. Entonces si hago click en esto, me va a preguntar ¿Estás seguro? Yo digo cancelar. Voy a quedarme atrás. Si digo pueblo y digo OK, ahora se puede ver que se borra el. También estoy navegada lista de contactos del dedo del pie 28. Formas basadas con la plantilla: en las aplicaciones. Las entradas del usuario son manejadas por Alphonse. Una granja es una agrupación lógica de elementos de entrada como cuadros de texto, botones de radio, casillas de verificación caídas en sup, importancia y así sucesivamente. Pervertidos angulares, dos enfoques diferentes para manejar las entradas del usuario a través de formas, reactivas y plantillas. Ambos pueden capturar su entrada desde la vista, validar la entrada del usuario hasta ahora modelo en modelo de datos, rematarlo y proporcionar cada cambio de pista del dedo del pie. No obstante, tanto estos un proceso de protesta como gestionan los datos del formulario de manera diferente y ofrecen diferentes ventajas. En general, las formas reactivas son más robustas. Son más escalables, reutilizables y comprobable. Si los formularios son un guardián de tu aplicación o ya estás usando patrones reactivos para construir tus aplicaciones, entonces usa formularios reactivos. formas individuales, Lasformas individuales, por otro lado, son útiles para agregar un formulario simple a una aplicación como un usuario formulario de registro que fácil dedo del pie a otra, pero no escalan como realmente dos formas. Si tienes una forma básica, requisitos y lógica que se pueden administrar por completo en la plantilla. El Noticias Templario dos informa 29. Trabaja con un formulario de plantilla para añadir nuevos contactos: Por lo que nuestra aplicación Ahora este coloca una lista fuera de contactos o puedo hacer clic en una persona de contacto en particular dedo del pie usted. Los detalles son Si quiero eliminar, puedo dar click en el delete. Yo consigo un pop up. Puedo decir Está bien para ser cancelado. Dedo del pie. Quédate atrás. Supongamos que si quieres agregar una nueva conducta, entonces tenemos que trabajar con formularios. Un anular comenzó a trabajar con formas de dos maneras. uno se le llama formas impulsadas por plantillas. Otra se llama formas reactivas. En este video en particular, estaremos trabajando con plantilla para informar. En primer lugar, vamos a tener un nuevo componente y vertimos un profesor para que pueda salir adelante formulario html para agregar un nuevo contacto. Por lo que voy al símbolo del sistema. Asegúrate de que estoy en el directorio de trabajo. Son que n g generado computadoras de componente slash contacto. Si no quieres dedo del pie, ten la expectativa. Con esta técnica fue Toe Falls Onda. Podemos levantarlo los gráficos antes y otros gráficos nuevos como Tha's Perfect iguala Toe BB para agenda telefónica. Otras carreras tres archivos un CSS y HTML en una T s pelea por lo que se ha actualizado son más deberes. Entonces vayamos al núcleo y abramos los componentes de la aplicación SRC, y tenemos su honor conducir nuestro componente de conducta su demonio. Entonces si quieres que nuestro formulario de contacto puntera aparezca por aquí, probablemente tendremos un botón de barra lateral. Vayamos al estado de nuestro complemento cada uno a Yemen. Copiar este enlace lo basó que está soplando algo pierna que es contacto con público en la nueva conducta. Entonces tenemos el botón aquí. Pero claro, cuando hago clic en eso, obtenemos un editor diciendo que me pongo en contacto no es una ruta de valor. Entonces tenemos que ir a nuestro en las ideas modernas. Tenemos que definir una nueva ruta para que cuando Pero yo eso es contacto sea encuentro. coloca un nuevo componente llamado nuestro componente de conducta en el demonio Paige. Si vas aquí ahora y está muy fresco, si hago click en este nuestro nuevo contacto, ya ves que obtenemos página HTML aquí. Por supuesto, para hacer esto como un HTML válido, vamos y en alguna forma humana rica. Entonces ve a esto. Sube esta historia y tu contacto. Pongamos un sencillo formulario HTML. Voy a utilizar su forma de punto. Esa va a ser nuestra clase de CSS bootstrap. Aquí no necesitamos acción porque no estamos sometiendo. Este año s son más de 30 fuente, pero nos gustaría tener una etiqueta y toma parte para cada una de las propiedades. Hagamos un trato con grupos de formulario y luego consistentes fuera de etiqueta plus en entrada con control de formulario . Como clase, la etiqueta tendrá nombre ya que se supone que la leyenda en el cuadro de texto de entrada es para el primer nombre. El actor buena forma debe corresponder a la idea de esta caja de entrada en particular para que te pueda dar nombre. No tengo idea. Démosle una identificación igual a dos primero yo. Ahora, el propósito detrás de esto es cuando vuelvo a la forma femenina. Ya ves, puedo dar click en esta etiqueta el. El cursor aparece por aquí. Entonces me pongo si no tengo esto para guardarlo. Vuelve por aquí y puedes ver puedo dar click en esto, Pero no pasó nada. No transfiere el control por aquí. Entonces al agregar un cuatro igual dedo del pie primero yo, Usted haciendo clic en esta etiqueta traerá el foco en este particular libros de texto que se da bajo uno. Entonces no soy, Hacer algo de espacio más. Aquí, haz una copia de esto para apellidos. Esta va a ser una etiqueta llamada apellido. Andi debería igualar lo que sea que sea una referencia por aquí. Y tenemos dos casillas de texto. Nombre y apellido. Ahora, el siguiente probablemente sería el género. Entonces voy a copiar esto en Pieced. Pero esta vez quiero tener un realmente lo haría. Entonces esto va a ser una buena entrada. Porque al video, tenemos que dar un nombre común para ambos que se da como género. Esto no es realmente requerir i d Eso no se requiere. Yo lo puedo levantar. Este valor de 80 aspirinas equivale a escuela hecha. Andi, puedo decir aquí, etiqueta escribe tu trabajo de barra principal en la misma cosa. Voy a café a base de hacer un otro realmente? Con el mismo nombre. El valor sería femenino. Y por supuesto, el epígrafe que se exhibiría también sería femenino. Entonces si guardo esto y vuelvo, deberías ver que hay un botón de verdad que dice masculino o femenino. Por lo que hago click en esto que está seleccionado. Doy click en esto, otro botón realmente seleccionado. Entonces permítanme completar el formulario agregando un set off do slash trato para cada uno de los datos de contacto . Entonces no, he añadido un campo para cada uno de ellos y tenía un submarino Gran Bretaña, debajo de la imagen tan buena en su a la mediana bt y primaria. A esto nos llamaré pronto. Por lo que sí tenemos un dedo del pie importante en como angular un suelto los elementos de forma a asociarse con modelo más adelante. Por ejemplo, si tengo una variable llamada nombre aquí, puedo asociar ese nombre con este libro de texto en particular. Ahora esto se puede hacer en ya sea uno eran vinculantes o dos eran por mí. Wonder doblar es donde simplemente podemos ir y decir que el valor es igual al dedo del pie algo. Por ejemplo, si digo aquí primer nombre off spring igual dedo del pie que no lo haces Y si quiero que este valor se asocie a este cuadro de texto, siempre puedo venir aquí y decir valor igual dedo primer nombre fuera de curso. Si se trata de una expresión, esto se puede dar de dos maneras ya sea con un corchete rizado doble. O simplemente puedo decir que esto es una expresión agregando un corchete cuadrado. Si vuelves al navegador ahora, puedes ver que el nombre se cambia de dedo del pie. Sabemos porque el valor viene de aquí. Pero si quiero ver cuál es el valor del modelo más adelante, cuando haga los cambios en el cuadro de texto que va en un párrafo donde uso un nombre de primer corchete rizado doble , que es el lector moderno encendido entonces si vuelves aquí y luego checa aquí muestra, sabemos que eso viene de lo actual moderno. Entonces también es éste. Pero entre esto decir: Vamos, Vamos, esto no cambia. Eso se debe a que es una reunión que recuerda. El valor de los datos modernos se ha asociado con un estilo unidireccional. Por lo que si realiza los cambios en el cuadro de texto, no se refleja en el modelo real. Entonces para hacerlo, podemos agregar uno llamado motor moderno. Entonces la forma en que puedes especificar eres tú. ¿ Se pueden los restos cuadrados porque una expresión y también se asocia con su on key up evento. Entonces vamos a morir puro modelo N G y luego asignó la variable, que es confíe en mí, esto causa un problema, ya que se puede ver que ya me está mostrando otro. Ese modelo de motor no se puede utilizar directamente así. Tiene algo bonito con él. Por lo que si vuelves al navegador, puedes ver eso en la consola. Debo estar consiguiendo unos cuantos más. Y la razón de esto es que si quieres usar modelo de motor, tienes que trabajar con otro modelo. Caldas forma modelo. Entonces conseguimos nuestros ts modelo y luego primero decimos importar desde en formas de barras angulares y lo que queremos importar es algo que nuestras formas modernas y este módulo de formularios tiene que ser agregado a nuestra sección de importación. Vamos a ello por aquí, y este es el primer paso. El segundo paso es siempre que estés usando modelo de motor, este campo en particular debe tener un nombre de propiedad. Puede ser cualquier valor, pero regionalmente ver el mismo nombre que el nombre moderno. Entonces, dado su nombre de pila y vuelvo al navegador, deberías ver que está mostrando el valor que conocemos, viniendo de lo moderno. Aquí viene lo mismo. Pero si empiezo a levantar, deberías ver que también está cambiando en esto porque ahora el cuadro de texto está asociándolo con lo moderno en un estilo de encuadernación de dos vías. Entonces si cambia el dedo del pie vamos, se puede ver que el modelo también se está cambiando. Ahora, lo que haremos es que tengamos que repetir lo mismo para cada off esto. Pero en lugar de declarar una variable para cada uno fuera de los miembros, también puedo despejar, disponible fuera de tipo de contrato e inicializado este contacto de inicio se va del nuevo contrato. Volvamos aquí y digamos que el modelo corresponde toe contract dot Nombre en. Eso se debe a que los datos modernos esto es una propiedad de eso ahora. Por lo que ahora podemos dar aquí nombre igual dedo del pie. Apellido N g modelo es igual a dos conductas dot el año pasado y de igual manera quizá también quiera dar por éste. Ahora sé que este es el botón de radio. Ya hemos dado una propiedad de nombre desde hace días. Todo lo que tenemos que hacer es remolcar asociado un n g asesinato es igual al género del dedo del pie para ambos. Entonces voy a pasar esto por aquí también. Aquí en esto va a ser género y poner los lugares que conoces, ya que el valor por defecto para contacto nuestro género es masculino. Si lo guardo y si vuelvo al navegador, debería ver que el correo ya está seleccionado. Por supuesto, si selecciono esta hembra que los modelos, los resultados de género cambiaron a femeninos. Ahora déjame en lo mismo para cada uno de estos cuadros de texto. Y una última cosa es que te dice, levántalo esto primero porque no tenemos ninguno de ellos. Pero en cambio podemos mostrar contacto. Pero ese es un objeto que has exhibido en una forma Jason lo. Acabemos de tener una pelea con Jason dedo del pie. Ver el contenido fuera de que regresen con el hermano y echen un vistazo a eso. Está mostrando un objeto de contacto vacío, cual tiene un género y una imagen por defecto. Pero si empiezo a sumar en los otros detalles, se puede ver que está agregando me obligó. Apellido género ya está ahí. Por lo que llevo aquí. Sabemos que conoces a Burke con un correo electrónico, y eso se agrega y demás y así sucesivamente otra vez. Simplemente verifica que agregando cada uno de los campos Así puedes ver ahora que el objeto de datos se compone de los valores del cuadro de texto sobre que tenemos que hacer ahora es toe escribir una función que pueda manejar la funcionalidad son. Para ello, volvamos al núcleo. Conseguimos el componente de contacto del anuncio DS. Está claro una función llamada al contacto Onda. Tenemos este objeto de contacto queremos toe agregado sobre repositorio existente. Para ello, inyectaremos el servicio que es extranjero libros arterias. Una vez que conseguimos el servicio, podemos ver aquí que este servicio de inicio inicia nuestro nuevo contacto. Necesita un objeto de contacto, que no es más que esto consiguió contacto el vientre de retorno apagado. Nuestro nuevo contacto es un observable y se suscribirá fueron para suministrar una devolución de llamada y la devolución de llamada obtiene el objeto de contacto de identidad y podemos decir lo que queremos hacer con eso. Entonces tal vez temporalmente solo puedo mostrar la idea fuera de eso en la consola canalizando ley consular y te contactas con Ivy plus contratista i d Ahora, después de agregar me podría interesar dedo del pie Ir a la página, que muestra los detalles. Entonces para lo cual podríamos querer usar un servicio más esta vez servicio de rotor, fuera de tipo llamado Refugio. Y una vez que tengas este rotor, ahora podemos decir que este motor de arranque no navega. Y luego suministramos la parte donde queremos ir en la tarjeta de la fiesta. Datos de contacto junto con la idea recién generada que es contacto que yo d. Y deben tomar el dedo de control. La página de detalles de contacto donde se muestran los detalles. Persona de contacto. Por lo que guardé esto y llamo a esta función en el click off este compañero en particular. Entonces vamos al botón. El evento click. Cita dedo del pie la función, agrega conducta. Entonces digo esto para volver al navegador. Oigo mis pies es y como el Abberton on una vez en esto deberíamos ver que los detalles se han sumado con éxito a la prensa 10 punto 30. Validación de entradas de usuario en una forma basada en una plantilla: por lo que usando el formulario de conducta, pudimos agregar una nueva información de contacto. Andi, volvamos allá. Entonces para la cosa es, salgamos de esta parte que se da en el HTML. Entonces tenemos esto sea con Jason, así que no necesitamos eso. Volvamos atrás y veamos que eso justo debajo del nexo. No. Pero una cosa es que sin escribir ningún nombre, apellido, correo electrónico o número de teléfono, todavía puedo agregar un nuevo contrato. Y eso viene con una nueva idea. Además, no hay apellido de pila. Ninguno de estos detalles existe. Por supuesto, no queremos que se acepten tales detalles Todo. Eliminemos esto y veamos cómo se puede manejar esto. Entonces en el formulario de conducta publicitaria, lo primero es, si no se soportan los campos mínimos obligatorios, no quiero que esta persona esté habilitada en absoluto, por lo que los usuarios no pueden tomar eso accidentalmente. Además, supongamos que el nombre es obligatorio en mínimo que tres letras deben estar ahí y máximo 15 letras. De igual manera, quiero tener Ah, restricción que el correo electrónico es un número telefónico de campo obligatorio debe ser ender, y tiene que ser un pozo numérico de 10 dígitos y así sucesivamente y así sucesivamente. Entonces si quiero brindar este tipo de validaciones, ¿cómo hicimos eso? Para entender cómo el formulario medicación euston Primero, echemos un vistazo a la documentación. Por lo que goto punto angular io que es muelles fundamentos formas on. Se puede ver que hay algo llamado forma brandish. Y aquí han explicado cómo se realiza la validación telefónica tanto en Templin impulsado como formas menos reactivas. Pero si garabateó aquí Así que básicamente lo que dicen aquí es que hay que definir una variable, que es la variable de plantilla aquí. Nombre hash. puedes dar cualquier cosa. Por ejemplo, en nuestro caso, esto podría ser el nombre hash y es igual al motor del dedo del pie Más. Ahora con esto, lo que sucede que angular crea un objeto correspondiente dedo del pie del campo. Podemos acceder a eso usando este nombre hash en particular, por ejemplo, ahí. Dado aquí algo así como si nombre corresponde toe motor modelo de lo que se puede decir nombrado, son inválidos o nombrados son sucios etcétera. Entonces vamos a echar un vistazo a esto. Es así como se puede hacer esto. Entonces lo primero que queremos hacer es remolcar Goto, uno de los campos hash primera media equivale al modelo de energía del dedo del pie que también son algunas otras validaciones básicas . Por ejemplo, puedo decir que este campo es un pie requerido. Continental es igual a tratar en excelente igual a 15 por ejemplo Steve it on. Si vuelves al navegador, vemos la granja. Vamos a echar un vistazo a este campo en particular. Por lo que selecciono este patrón aquí y luego elijo mi primer nombre feed on. Cuando selecciono esto, obtengo el elemento de entrada generado real. Si bien hemos dado pocos atributos aquí como clase de tipo Islay Editor, puedes ver que hay un atributo adicional también, uno de ellos es la clase. Por supuesto, hemos dado la clase pero se puede ver que sólo hemos dado control de granja. Pero ahora tenemos Engy intacto adicional Inger Ingli prístino N G inválido thes clases CSS se agregan en base a la etapa fuera de este extractos en particular. Desde que dijimos que se requiere esta hinchazón de libro de texto sobre no hemos entrado. Aquí dice que no es válido y ese nombre de clase se ha aplicado De igual manera, el motor prístino apellido CSS es una obra de teatro porque no hemos hecho ningún cambio a eso. En el momento en que haga algunos cambios a esto y aunque la traiga de vuelta a su estado original, ya no será considerada como prístina. Pero será considerado como sucio. Por ejemplo, si voy y temo a X encendido, entonces es que se puede ver que ahora tiene el nombre de la clase CSS aquí diciendo ese control de formulario que es lo que le hemos dado, dice Engy inválido porque no hay valor en eso. Ahora dice NJ sucio en lugar de apagado n g prístino Del mismo modo, hay waas antes Engy intacto. Ahora es motor tocado y esto sería útil para dispositivos móviles. Por lo que los datos CSS de Engy inválidos pero se eliminarán automáticamente tan pronto como un satisfecho los requisitos de campo. Por ejemplo, si escribo aquí, sabemos como pueden ver que me he asegurado de que se tomen los valores ingresados tan requeridos, levántate, levántate, también han ingresado cinco letras, Así que la propiedad continental también ha sido tomado. Bájate porque originalmente, si ves el nombre de la clase CSS, es tu Engy valorado. Por supuesto, si traigo este dedo atrás, di dos letras que puedes ver ahora es n g inválido porque ahora no está satisfaciendo el requisito de campo . Entonces esta es una clase CSS que nos ayuda a entender cuál es el estado fuera de este campo en particular Ahora, junto con los nombres de clase CSS como aquí, también tenemos propiedades para que podamos hacer uso de estas propiedades como prístina, editor válido no válido fuera de un campo en particular para disuadir a la mía si mostrar un mensaje de error . Aquí no se dan cuenta también de que los dólares extra aquí es parte de un formulario. Y si vas al elemento de formulario por aquí, puedes ver que el formulario también se considera inválido tan pronto como tipean en información significativa . Por aquí, se puede ver que la forma en sí es ahora considera valor. Por supuesto, si refresco, ahora la forma está en estado prístino, por lo que podrías volver a la forma. Se puede ver que un formulario está en estado prístino y no es válido porque uno fuera de los cuadros de texto no es válido, ¿ verdad? Por lo que ahora podemos aprovechar esta propiedad y decir que deshabilitado este Wharton se cambian el color dedo del pie rojo eso cuando la forma es inválida. Entonces, ¿cómo hacemos esto? Vayamos a comprobarlo primero. Entonces ahora que he dado tu requisito básico aquí, requerido continente y máximo vamos al botón y vamos a ser una propiedad para discapacitados por aquí. Si el formulario es inválido, Lo primero es que tuvimos que darle hash algún nombre de formulario que nos llama F uno igual a grúa N forma G. Una vez que damos esto ahora, podemos acceder a todo el formulario en la finca fincas usando este F uno para poder bajar a mi pareja y puedo adherir a esa ruta deshabilitada en realidad. No es que el registro directo indique lo que estábamos ascendiendo es una expresión. Por lo que puedo decir un formulario dot Invalida. Entonces culo en un serio. Y si vuelves a la plaza, puedes ver que el formulario está en estado inválido. En tengo el botón siendo desactivado por lo que puedo hacer clic en esto ahora. ¿ Verdad? Entonces si bajo al botón, se puede ver que el atributo deshabilitado se ha agregado por aquí. Por supuesto, si escribo aquí algún nombre de pila, tecleemos aquí Not. Si bajo ahora, podemos ver que el patrón está habilitado debería poder agregar un nuevo contacto con sólo el nombre. También podemos cambiar el color de esto cambiando esta propiedad en particular. No es que esto sea una cuerda aquí y podemos sustituir esta primaria por peligro en cerrado, los agricultores inválidos. Entonces, ¿cómo hacemos esto? Bajémonos de esto por un minuto y pondremos un puntera doble rizado. Indica que vas a poner una expresión con el F one dot inválido. ¿ Eso es cierto? Entonces puedo poner un signo de interrogación si está invitado con sobre un peligro y de lo contrario diré aquí que es privado. Por lo que como inicialmente el formulario es inválido, será Bt en peligro de efectivo. Una vez que entre algunos valores en los libros de texto, verás que esto se convierte en BT y Dash Primary. Entonces volvamos al navegador en el formulario ya está dividido y se puede ver en la parte inferior . El botón está desactivado y está en color rojo. Al igual que en otros tipos y nombres como la nota, se puede ver que ahora tenemos el botón de color azul, que también es un vecino en las mismas líneas. Vamos también a ser un par de otras violaciones. Por ejemplo, también quiero que el correo electrónico sea obligatorio para que pueda escribir tu hash. Correo electrónico equivale a dos n g. moderno y luego lo puedo ver tranquilo. Por lo que eres un par de cosas como hash phone P igual a dos N g. moderno. Esto se requiere porque estamos tratando con contactados. Está a igual. Pie barra de cuatro dígitos. Esta es la típica expresión regular, pero también quiero decir un mínimo de dígitos fuera de licitación y un máximo de 12 dígitos a este número de teléfono en particular. Entonces vamos a guardar esto. Andi, vuelve al Frozen. Ya veremos que los campesinos en el estado discapacitado que va bajo nombre, soy ustedes pueden ver todavía hay discapacitados. Ese correo electrónico del centro que decía por ejemplo punto com así pero aún está deshabilitado. Número de teléfono I bajo algunos números. Ahora podemos ver que aún está desactivada, pero en cuanto ingresen los 10 al juez, puede decir que está habilitada ahora. Pero si entro 11 sigue bien, 12. Está bien, pero 30 letra no Está bien, Entonces así es como podrás usar ciertos patrones también en tus validaciones. Entonces ahora que hemos habilitado o deshabilitado, Pero en base a la validación, también tenemos que decirle al usuario que por qué este botón en particular está deshabilitado en caso de que cometas algunos errores como por ejemplo, eliminé el nombre, debería decirme aquí que el nombre es obligatorio. Entonces volvamos a nuestro núcleo al agregar un par de días para mostrar otros mensajes. Ahora el mensaje de error número uno sería que el campo de nombre es obligatorio, y eso debería aparecer sólo si el usuario aún no ha ingresado nada. El 2do 1 sería Milland igual al dedo tres. Eso significa que tenemos que decirle al usuario que un mínimo feeler hace debes subir de línea y que no me voy . El usuario aún no lo ha hecho. Y por supuesto, el 3er 1 No necesitamos respetar, porque si tienes una propiedad Max terreno, los browses no te permiten teclear más de 15 caracteres en absoluto. Entonces eso va a sumar un par de ofertas. Por lo que tengo un trato de padres en el día dos Niños ofertas adelante aquí. El 1er 1 probablemente diría que forzado significa estos requieren en obligatorio en el segundo mensaje de error sería como, um así que por favor ingrese en mayúsculas tres letras para el nombre. Veo esto. Vuelve al navegador y verás que no tenemos mostrados estos otros dos mensajes. Por lo que también podemos agregar algo de estilo a esto, como, por ejemplo, tiene que ser en un poco de color rojo. Tiene que ser un poco más pequeño que el resto de las etiquetas también. Se puede decir que se tiene que cursiva para hacer eso. Tenemos Odiseo esta clase. Llamemos a esto como una clase para ER de disfraz de plástico. Jara. Y no tenemos esta clase CSS en particular. Entonces vamos a sumar uno. Entonces voy a abrir ese CSS fino dedo del pie correspondiente son componente de contacto. Dice la CIA que pensaron ER, que crea una nueva clase, le ha dado color oferta lo extranjero se quedó. Vamos a dar cursiva en. Queremos reducir el tamaño de la diversión a alrededor de 80% de descuento su original ahorra perdonando 800.8 p. M. Así que si guardo esto y si vuelves al navegador debería ver que los otros mensajes son como se esperaba. Lo único que no queremos esto es que no queremos asustar al usuario mostrando todo el embarazo. Justin Edwards. Entonces lo que queremos hacer es que tenemos que asegurarnos de que el usuario haya empezado a escribir el nombre , y luego no ha escrito lo suficiente. Los personajes son, si decide y borra todo, se requiere el nombre de pila. Aparecen Ademas destacadas. Entonces para hacer eso, eso está en una condición if por aquí. Entonces vamos a añadir una directiva. Col. N g Dar igual dedo del pie. Decimos que el nombre de pila, que es esta variable en particular, está sucio ya que se invita al apellido de pila. Entonces muéstrale esto solo si está sucio. Eso significa que algo se ha cambiado en los próximos así como es inválido. Ahora, si vuelvo aquí, verás que no es molesto de inmediato porque está en estado prístino. Y si escribo aquí algo como esto y puedes ver ahora se acerca tan pronto como un pañal valor válido, verás que los elementos se han ido porque tenemos asegurados de que se va a mostrar sólo si es inválido. Y por supuesto, si cometo un error, verás que ambos aparecen en la misma lógica. También podemos serlo. Si condiciones por aquí, por ejemplo, puedo decir, estrella Angie, si aún estamos forzados a salir, no se detengan Errores nombrados primero, un objeto que representa sobre los demás. Si existen, voy a decir, si a uno de los otros se le llama coro, entonces queremos que se muestre esto. Entonces decimos que seguro, este mensaje en particular sólo si la colección de errores contiene requerido. Entonces lo mismo que vamos a copiar y pegar para el siguiente hacer un poco de cambios. Entonces, básicamente, queremos decir que esto debería mostrarse sólo si la validación continental está fallando. Copia esto y basado aquí ahora guardé esto. Vuelvo al navegador, verás que no hay otro mensaje. Tan pronto como empiezo a escribir una sola letra, se puede ver que dice favor bajo al menos tres letras para el nombre. Ender más que árboles. No hay problema ahora, Así que si empiezo a subir, verás que el otro mensaje aparece menos atrás. Si es completamente esto verás que lo es. requiere nombre de pila. Por lo que así es como puedes agregar mensajes de error personalizados en. Entonces Entonces volvamos atrás. Copia esto en pegar para correo electrónico. Por lo que el correo electrónico solo tiene una valoración, que es que se requiere alguna pasta por aquí y decir que esto es básicamente correo electrónico en este es correo electrónico. ¿ No se requieren errores llamados mostrará que se requiere la dirección de correo electrónico? No tenemos la validación continental para esto, así que nos levantaremos esto. Copiemos lo mismo para cuatro. El número en número telefónico tiene dos elevaciones esta vez, por lo que uno es un requerido. Así que así como eso. Entonces voy a decir que eres porque esto para así el teléfono está sucio ya que un teléfono menos es inválido ya que un último teléfono tiene una puntuación de editor requerida. Y, por supuesto, el mensaje debe decir número de teléfono es requerido. Andi, voy a copiar esto. Teléfono probado tiene un editor llamado Patrón. Podemos dar a los clientes señora diciendo que agradar a Bush. A lo mejor se puede decir de 10 a 12 dígitos para guardarlo en. Volvamos al dedo del navegador Refrescar completa una vez. Andi, veamos si podemos hacer algunas violaciones de valoración. Entonces voy a ir a escribir mi nombre y gratis. Pero si empecé a levantar hay un editor. Si elimino por completo esto, hay un error similar yendo aquí. En realidad no sé nada de CO, no hay problema. Pero si empiezo a levantar por completo, verán que dice que se requiere a los militantes. De igual manera, si me dieron un número telefónico, si escribo incluso un solo dígito, dice ese lugar importar 10 a 12. Es por cuatro número. Así que empecé a grabar algunos números telefónicos aleatorios. Ahora sujetador que a los 10 dígitos verás que los otros mensajes se fueron. 11. No hay problema. 12. No hay problema. Pero proteger el 13 1 Lo consigues, Ademas lo otra vez. Ahora bien, si es esto por completo, verá que todavía dice para los números requeridos. Entonces así es como deberías poder agregar validaciones personalizadas para tu formulario, tal manera que no se introduzcan datos inválidos en tu base de datos 31. Cómo editar un contacto con la forma reactiva: saber que hemos visto las formas impulsadas por plantillas. Echemos un vistazo a las formas reactivas. De verdad. Las reformas se basan en dos clases angulares denominadas control de forma, grupo y forma, para entender cómo funciona esto. En primer lugar, agreguemos un puesto aquí para una reunión los datos de contacto de la persona seleccionada haciendo clic en, lo que me lleva a un formulario el cual está precargado con estos detalles en particular. Entonces primero, vamos a salir del agua. Entonces vamos a los datos de contacto del componente SRC AB y en su lugar que el HTML actualmente tiene un botón de borrar que ha tenido otro endurecido. Antes de eso, eso es un botón con Bt y Bt y basura Primary como los nombres de clase. Y luego se movió tiene el gumption. No asumir esto debería llevarme a una pantalla diferente, y esto se puede lograr de dos maneras. Uno es usándolo temprano. El segundo va programáticamente hacia otro componente. Vamos a salir. Para salir. Rolling es una expresión porque aquí damos un corchete cuadrado y la expresión incluso agregando no consistía en varias partes de la parte. La primera parte va a ser el combate de élite slash, que es un aparte fijo, seguido de la idea fuera de los usuarios sobre la idea de usar eso que lo queríamos. Es este Contactar nuestro i d. vamos a dar contacto. ¿ No lo guardo? Pero este particular sobre la definición no existe. Vamos a ir a nuestra APP Modelo DS y en la APP modelo DS. Tenemos toe definir una ruta para la cosa, pero aún no tenemos un competente, así que sigamos en un componente. Por lo que vamos a una nueva pestaña, aseguramos de que estén ahí en el directorio de trabajo. Tendremos cualquier componente G generar. Queremos iniciar en la carpeta de componentes lo contacte es el nombre del componente. No queremos especificaciones de muerte en este punto hoy. Y entonces también queremos un auto de prefijo. PB para quien libro Este género es el CSS HTML en archivos DS correspondientes al componente. También arriba, es el SRC slash ab slash AP Modelo DS en la sección de declaración. Entonces volvamos a la mayoría de APP. Sí, agreguemos una nueva definición de ruta para cualquier cosa. El contacto es una parte. Se pone en contacto con lo que por un dado. Heidi. Así es una idea de colon haciendo esto como una variable en el componente que queremos. El Señor. ¿ Cuál es? Componente contractual. Guárdalo ahora. Si vuelves con el hermano, deberías ver que hay un botón de edición haciendo click sobre el cual me va a llevar el dedo del pie. Un nuevo componente que se dirige Contacto funciona ahora cuando se carga este componente, nos gustaría obtener los datos de contacto para el correspondiente i d. Sobre el trabajo con eso. Entonces volvamos al componente asistido a Sí, y aquí primero queremos dedo del pie recibir un par de dependencia es el número uno sería toe conseguir la ruta activada para que podamos sacar eso. Perímetro segundo es los servicios de libro de formularios a través de los cuales podemos bajar los datos de contacto correspondientes . Y es cierto que primero dijimos híbrido tras redid carretera off actividad garganta. Qué City girl Privada estudia Oh, para otros y al final, G en ello. Hagamos la parte de carga. Entonces si inician actividad, desarrollen hacia Adams, que es un observable, y nos suscribimos a eso pasando una devolución de llamada, y el llamado Imprudente es el Ari del Barón. Entonces la firma es Onda nos gustaría trabajar con el i D. Así que decimos que estás preocupado por firmas fuera de Heidi Sólo cambios que fueron capaces de acceder al i d desde la actriz Park. Entonces volvemos al congelado en. Cuando esta página esté cargada, deberías ver que dice Got the idea tree. Entonces, ¿cuál es la idea viniendo del perímetro vial? Y ahora que tenemos la idea, por lo que deberíamos poder hacer una petición. Entonces vamos a copiar esta parte y bajarnos de ésta, que distorsionan servicio, inicien, saquen líderes de contacto del particular I D, que devuelve otro observable, el subíndice que al suministrar un combate que persigue los datos de contacto que se recibe el. Entonces nos gustaría traer lo mismo sólo una muy multa. Volvamos a la Rosa y veamos que obtenemos los detalles correspondientes a la voy a ser Así obtuve la lista de contactos. Selecciono aleatoriamente algún otro detalle, y luego contendió, y deberías ver que obtenemos los detalles de esa persona en particular Ahora Todo lo que tenemos que hacer es remolcar estos detalles a una forma que aparece por aquí. Para ello, usaremos unas formas reactivas en lo primero que tienes que ir para trabajar con las formas activas es ir al modelo APP DS e importar otro modelo de las formas angulares llamadas formas reactivas. Por lo que tienen modelo de formas reactivas. Esto tiene que agregarse a la lista de importaciones que tenemos aquí porque ahora nuestro modelo depende de otro módulo. Una vez disponible este modelo de formas reactivas, lo que podemos hacer es ir aquí y borrar la variable o forma de contacto fuera del grupo de forma de vida y podemos inicial. Es esto en el en él en algún lugar Aquí, iniciar formulario de contacto es igual a dedo nuevo grupo telefónico. El nuevo constructor de grupo de formularios toma algunas configuraciones y la configuración es sobre el elemento de formulario. Por ejemplo, imagine este objeto de formulario de contacto representa toda la forma. El formulario se hace sobre elementos de formulario como cuadros de texto Y cuáles son los valores para cada uno de estos cuadros de texto nos interesaría mencionar. Y ahora queremos toe pre Lord esta información de contacto en este formulario. Por lo que obviamente queremos tener un libro de texto para cada uno de ellos. Por lo que tendremos tus variables como hiedra con una nueva forma controlan la forma. El control puede ser un constructor vacío o también puede dar un valor predeterminado. Por ejemplo, dejamos eso tal como está, por lo que verás que el yo d no será ninguno. Porque tenemos un control de formulario sin ningún valor suministrado sobre eso por la razón que no suministramos el valor aquí es porque en este momento, no tenemos el contacto real. El contacto se carga utilizando un observable. Por lo que tenemos que establecer los valores que forman en este apartado en particular. Eso haremos en un minuto, pero primero definirá los objetos de valor. Ahora que hemos inicializado todos los elementos fuera del formulario de contacto, también podemos dar una D por valor a la imagen que corresponde al té para foto de perfil de contacto que está ahí en el contacto 50 años. Tengo esta cuerda. Algunos copian esto, y si vuelves aquí, el constructor tiene el primer valor predeterminado opcional perimetral que se dieron aquí. Ahora vamos al HTML correspondiente al componente. Quítalo del párrafo Formulario Creador en el formulario. Diremos que esta forma debe estar relacionada con la variable de forma que se crearon aquí , cual se llama Formulario de Contacto. Y es muy sencillo. Utilizamos una nueva directiva llamada Como forma Igual Toe Fund que se forman en. Toma esto. Ahora podemos tener cajas extra que representen los valores de cada uno de ellos. Eso es bueno. Hacer consistente a partir de una etiqueta. Es en nombre de pila esa entrada y diremos que estás controlado por forma. Nombre es igual a dos nombres de pila. Ahora puedes ver que aquí usamos una expresión y simplemente usamos un atributo. Esta es la sintaxis ahora comprometida. Si no estoy usando un grupo de formularios y usando un nombre de control de formulario directamente, entonces se puede decir control de formulario como una expresión es igual a dedo del pie. El nombre en este caso, se asume como formulario de contacto punto Nombre. Ahora es esto. Ahora bien, si comparas esto con un enfoque impulsado por plantillas, no tenemos que definir un nombre para esto. No tenemos que definir modelo de motor. No tenemos que definirlo. Nombre empleado con efectivo. Nombre igual a extraño un modelo. Entonces por eso es mucho más sencillo. Además también comprobable porque ahora todo está lesionado óptico por aquí incluyendo las validaciones, que veremos en el siguiente video. Todos podemos poner los datos de formularios mediante el uso de ese párrafo, y decimos aquí, formulario de contacto, Valor oscuro. Podemos poner esto como cazador. Entonces eso va a verificar Esta tontería volverá al navegador. Deberías saberlo. A ver que hay una caja extra. Todas estas variables miembro fuera del objeto formulario no es ninguna. Bueno, si voy aquí y escribo algún nombre, se puede ver que aparece en este objeto de forma particular. Entonces, lo que significa que las cajas extra tienen bean mágicamente asociado con el objeto de forma. Entonces volvamos atrás y sumamos un par de elementos más. Entonces voy a copiar esto en base. Esto va a ser por apellido, y sólo escribimos tu apellido. Guárdalo. Vuelve al navegador. Deberíamos ver dos cuadros de texto encendidos. Debería poder teclear en ambos sobre se puede ver que soy capaz de dedo del pie reflejar los cambios en el formulario de contacto. Objeto con esto hecho. Ahora, eso es por algún embellecimiento. Voy a sacárselo de esto. Voy a añadir una clase fuera de grupo on. Esto va a ser sólo una etiqueta aquí. Amerada Clase off form Control. Hagamos una copia del mismo Andi en otro por apellido nos gustaría ver que es su apellido. El género es realmente no lo haría. Entonces voy a tener un género como leyenda. Este sería tipo igual a dos radios. Si no mencionas el tipo por defecto, va a ser un deseo de texto. De ahí que se trate de cuadros de texto. No necesito una clase para esto, pero me gustaría tener un nombre aquí porque el género es realmente no leería impotencia. Para que nos estén trabajando un grupo, debes tener ahí un nombre común. También es necesario decir una nueva herramienta igual para que el valor que mencionaste aquí sea el que se seleccione cuando se seleccione este botón de opción. Y por supuesto, el nombre del control de formularios. Dentro de este contrato desde objetivo su género, me gustaría tener un botón más realmente encendido, pero esto va a ser considerado como femenino. Por supuesto que estaríamos viendo solo botones de radio del dedo del pie, pero nos gustaría tener algunos subtítulos para esa Onda. Podemos abordar el epígrafe igual que este macho y hembra Donde un problema es que si hace clic en el mundo masculino aquí, el lector Gran Bretaña no está seleccionado. posible que tengas que fijar punto y dar click en eso para venderlo, Andi, en lugar de eso si quieres recoger en la etiqueta, tienes que agruparlos como uno. Entonces voy a cortar esto, poner una mano de obra y a base en embarazada de la misma forma que voy a cortar esto para la etiqueta en base a tiempo. No necesito tan lejos, así que lo voy a sacar de la misma. Por lo que ahora volvemos a un navegador, hago clic en el mundo femenino. Se puede ver que está seleccionado. Yo pateo en el mundo Masculino. Realmente no serían seleccionados porque la mano de obra también notan que es frijol seleccionado por aquí. Tan pronto como hagas click en esta evidencia callejera, verías que están mal que también se van cambiando. Entonces ahora completemos el resto de los formularios copiando y pegando prácticamente cada una de estas ofertas. Y por último, Burton toe guarda los detalles que rayan tu arma más iguala a Bt entre los cambios primarios Xavier ST en. Ya no necesitamos esto. Entonces salgamos de esto. Guárdalo. Vuelve por los frescos y se puede ver que la forma aparece con la imagen deformada, Ural, porque eso es lo que hay en el objeto de forma. Y el resto de los detalles aún no existen. Y si recuerdas, somos capaces de hacer con éxito los detalles fuera de la idea de que él es un plato por aquí en el día . Obviamente, necesitamos saber pre cargar esto en la granja en que un paso se hace así. Vuelve al lugar donde estuvimos haciendo la consola mucho tiempo. Simplemente podemos pensar en esto. Inicio contacto formado son valor establecido. Andi, una vez en el objeto de contacto real en la forma fuera de pares de valor clave. Ahora puedes simplemente cosas como contacto así. Tiene que ser un puñado de Keeble aparece así que para hacer eso, utilizamos un año seis operador de spread. Por lo que decimos aquí queremos crear un nuevo objeto con los valores del objeto de contacto. Guárdalo en. Cuando vuelvas aquí, deberíamos poder ver que los detalles del contrato no están precargados. Y como sabemos que al tener algo en el cuadro de texto afecta directamente al objeto de forma sabemos que qué pasa con los cambios que hacemos aquí ya está ahí en el objeto lejano. Todo lo que tenemos que hacer es remolcar asociar esto con day at function lo que guarda el estado actual de la forma en nuestro punto de vista ese s. Ahora esa es la última parte. No vamos a añadir una función por aquí llamada Guardar cambios y disfunción. Estaremos asociando con el favor igualado el botón. Y cuando esto es tarjeta, tengo que guardar este inicia servicio. Qué libretas telefónicas siempre se actualizan contacto y tenemos un abasto. Comienzan contacto por valor oscuro y ese valor corresponde dedo del pie un objeto que representa cada de estas claves con los valores de las cajas de cubierta. Entonces vamos aquí, llamemos a esta función. Decimos clic evento igual a guardar cambios función. Por lo que la misma función de cambios aquí llama al contacto de actualización desde, o libreta telefónica saris que devuelve un observable en. Suscribamos a eso. Y cuando la actualización termina el trabajo, vuelve con el Dejan actualizado. Entonces eso lo conseguimos en forma de nuevo contrato. Y todo lo que tenemos que hacer es atraer el componente de detalles de contacto para esta idee en particular. Andi, aún no tenemos la dependencia del rotor, por lo que vamos a añadir una dependencia más el rotor Savior Privado, carácter fuera de tipo. Y luego volvemos aquí empiezan a oscurecer. Navy Gate es un plan un día libre de partes. En este caso, va a ser contacto Dash 50 días, segundo fondo. Será la hiedra off objeto de contacto actualizado. Por lo que contactan en cualquiera. Guárdalo. Andi, Si vuelvo aquí, veremos que hay una forma que está precargada. Podemos volver a lista de contactos. Toma los datos de otra persona click en editar. El dato es Lord Ege. Voy a poner par off hashes Aquí está encendido, después decir guardar cambios y deberías ver ahora cargó el componente de detalles de contacto para eso yo d. Y veré los cambios que han hecho con éxito. Volvamos atrás. Es lo mismo y guardar cambios, y ahora vemos que los cambios se han actualizado 32. Validación de entradas de usuario de una forma reactiva: por lo que usando las formas de realidad fueron capaces de editar los detalles. No obstante, no tenemos ninguna validación en este momento. Entonces supongo que si elimino esto estaban encendidos Lanny, entonces guarde esto. Deberías ver que el nombre de esta persona es el último porque no teníamos ninguna validación. Entonces al igual que, comprometió las formas impulsadas por plantillas. También quisiéramos proporcionar validaciones para las formas reactivas también, pero ésta sería mucho más sencilla. Entonces pongamos ese banco de aterrizaje volver a sobre granja. Andi Aquí, podemos definir algunas validaciones como un menos de 34 valores. Ahora esto se hace con la ayuda fuera de la clase de ayudantes validadores. Entonces volvamos a la documentación angular por un minuto. Abierto, angular, eso son. Se da click en los perros y los fundamentos en los que tenemos formularios. Contamos con validación de formularios. Y por supuesto, el 1er 1 es la plantilla a la invalidación. Prefectos se arrastran un poco. Veré que hay una validación de forma reactiva en una de las menciones aquí es que ver los validadores ap una referencia. Por lo que están construyendo clase para validadores y te contiene funciones de ayudante así que Si hago clic en esto, verás que existen estas funciones. Hombres, que es la validación de la función Max requerido. Es un título. La mayoría de estos son autoexplicativos sobre. Deberías poder entender lo que hacen, y aunque no lo hagas así puedes asumir eso. Te dirá qué es exactamente lo que va a hacer. Validador que requiere el dedo de control tienen un valor no vacío. Entonces eso es lo que nos gustaría tener aquí para el nombre de pila, probablemente para el correo electrónico para el cuatro número etcétera. Entonces aunque vuelva a decir correo electrónico aquí, vea que debe ser un correo válido. Esto automáticamente va a probar que es una dirección de correo electrónico para que podamos volver ahora. Andi, di aquí que el nombre no tiene valor por defecto, lo que le damos en blanco. Pero recuerdas que cuando el contacto se cargue desde el resto en punto, se dirá. Pero hasta entonces, va a ser una tabla. Pero nos gustaría precisar que se aplica un área fuera de validación. Por ejemplo, quiero decir que se requiere y tiene un continente apagado tres letras por lo que puedo escribir tus validadores no requieren y luego tomaré validadores. Comienza peninsular con tres. Entonces así es como especificas un montón fuera de validaciones en las líneas similares. Puedo especificar aquí para correo electrónico y teléfono etcétera. Volvemos a eso en un minuto, así que volvamos a la granja on hacer un poco de inspecciones. Contamos con los datos de contacto. Demos click en la edición y vemos los detalles. Entonces voy a seleccionar esta flecha. Andi, elige la propiedad de nombre y puedes ver que la primera vez que la propiedad aquí tiene combustible. Clases CSS que identifican el estado actual fuera del control de forma del elemento de formulario es algo que más grande. Apoya a los taxis, su nombre de clase. Pero considera en G intacto porque no usamos un dispositivo móvil para pasar que todo lo que tenemos alguna hizo que está en estado prístino. Pero también dijo que está recogido. Pero si yo es esto completamente se puede ver ahora hay algunos cambios, y dice que es un objeto sucio porque ha estado modificando su sido tocado así como está en G inválido. Ahora la n G inválida viene principalmente porque fuera del hecho de que es un campo requieren. Si he traido a Lanny de vuelta esnobby, mira, es frijol valorado. Pero si le quito tres letras encendidas, se puede ver que de nuevo es inválido porque se está violando el continente ahora lo mismo. Un lugar para igualar la forma. Se puede ver que el formulario también tiene estado inválido en todos estos estados se puede acceder usando nuestra consola. Volvamos a nuestra reserva cambia la gente literaria ahí, lo cual es un gran punto en el que por el momento. Déjame comprometerme este curso para que realmente no quiero ahorrar entre esto ni nada. Entonces volvamos a bono. Ahora nos enfrentamos a los mismos cambios y ahora vemos que estamos en la hamburguesa profunda. Entonces vamos a la preocupación Onda. Ya podemos decir aquí este inicio formulario de contacto punto Puedes ver que hay un estado el cual especifica si está en el estado valiente o en estado inválido, y dice que es válido porque no tenemos ningún error en el mismo. Del mismo modo, también podemos comprobar inicio formulario de contacto dot teléfonos de profesores americanos inválidos. De igual forma, también puedo comprobar si se valora. Es cierto, por lo que podemos usar ya sea el estatus. ¿ Cuál es la cuerda? ¿ Pueden ustedes los lingotes inválidos, valorizados funcionalidades? Dee comprobar si eso es válido o inválido. Obviamente queremos dedo del pie. Aprovecha este campo o hazlo de esta propiedad y controla la apariencia de este botón. Todavía esperan hasta el núcleo. Saquémoslo del desacreditador en no comprometido. Esto También volveremos de nuevo puntera nuestro componente de contacto de edición. Es TML. Tenemos el botón. Queremos agregar el atributo discapacitado en caso de que fuera del formulario que se está invitando. Entonces es muy sencillo. Ahora puedo decir que discapacitados equivale a dos. Es una expresión para que pueda ver tu contrato por dardo inválido. Por lo que mientras sea inválido, hacemos que esta base de botón sea capaz y usando el contacto de tema formado, válido o inválido, podemos controlar si se supone que es primaria son peligro. Entonces hubiera cortado esto, puesto una expresión de manillar y luego diría que eres perro de forma de contacto. Pregunta válida. Concierto de Mark Delgiudice como primarias otras formas, se considera pasado un peligro por lo que inicialmente porque se valora, no debería haber ningún problema. Se puede ver que dice azul y está habilitado. Puedo ver un dedo a par. Pero si lo saco de esto encendido, baja, puedes ver que el botón está desactivado y no puedo hacer click en eso ahora. ¿ Verdad? Entonces eso es tan sencillo de trabajar con ahora, sin siquiera agregar ninguna regla de validación en nuestros elementos HTML, simplemente agregamos que hay un requerido en validadores continente. Por lo que agregamos lo requerido en las reglas de validación de Midland en el formulario objeto en que se cuida automáticamente aquí. Por lo que note que no he especificado aquí que el elemento de forma se requiere nuestro continente en las mismas líneas. También puedo decir que esta debe ser una dirección de correo electrónico ya que la última se debe requerir para que pueda ir a este componente años después. Ellos escuchan el email no tiene t por valor en puedo ver tus validadores No e hecho Plus puedo guardar validadores. No se callen. No necesitas dar el continente peleó este. Entonces ahora si vuelvo al navegador en de todo está bien. Pero si elimino esto después de su simple se puede ver que ahora está dando otro porque ya no es correo electrónico válido. Entonces tengo que dar al símbolo raíz. No puedo empezar dentro de un verdadero que también es inválido. Tengo que tener algo. No se puede sólo tener un texto simple también ahí, Así que eso se toma. Bájate. De igual forma, también podemos dar una validación de número telefónico para que pueda decir que el número telefónico se requiere como un menos Es un patrón. Entonces puedo decir que los validadores inician los factores en el patrón es o bien una cadena en una expresión regular . Entonces voy a ir con la expresión regular sobre la expresión regular tiene que tener un dígito. Cómo Maney quiere los dígitos hasta 10 a 12 dígitos es lo que estoy esperando. Número telefónico de EU ahora. Debido a esto ahora, no va a seguir ningún valor no numérico. Volvamos, hagamos una actualización completa y luego muy bien. Si eso está bien así puedes ver que ahora mismo que los 10 dígitos prettify es esto, puedes ver que ahora se cambió automáticamente dedo del pie rojo en los discapacitados. Entonces no hago eso. Y si escribo aquí y también apuesto que no es una carga. Y así tiene que ser un número. Entonces ahora que hemos hecho las validaciones, también tenemos que decirle al usuario que no puedes simplemente tener dos letras para el nombre son debes decir el nombre es obligatorio. Por lo que queremos brindar algún tipo de mensajes de error aquí en el rescate que no estará conociendo lo que está pasando con esta granja en particular. ¿ Verdad? Entonces, vamos a volver. Yo soy esos mensajes aquí mismo y controlo la apariencia de esos mensajes usando otras formas. Estado. Entonces vamos a ir a teclear aquí un do con probablemente una época de clase fuera. No tenemos esta clase vamos a artistas con a abuso infantil por otros dos mensajes. El primer mensaje de error es para que el nombre sea obligatorio en el 2do 1 probablemente por la violación continental. Entonces eso es tipo. Tu nombre de pila es obligatorio y luego yo escribo tu favor ingresa al menos tres letras. Queremos que estos mensajes aparezcan sólo si el primer nombre ha tocado bean están sucios así como no es válido. Ahora sabemos acceder al formulario de contacto. Pero, ¿cómo accedemos al formulario de contacto? ese nombre de pila. Ahora, aquí es donde tenemos algo llamado controles. Entonces podemos i n g Si estás encendido, entonces decimos que eres formulario de contacto Controles oscuros. Entonces, ¿cuál es una lista de todos los controles que tenemos sobre que Tiene nombre ha ganado el control Y es esto inválido? Si esto no es válido, entonces me muestras que Andi tiene que estar sucio. Entonces voy a decir que tu nombre de pila no duele. Por lo que esto ahora asegura iniciar los primeros minutos 30. Eso significa que algo se ha cambiado por ahí en el cambio dos valor no es válido. Entonces sólo exhibe éste ahora fuera de curso. También queremos que esto se desespere sólo si hay un editor para el nombre llamado requerido. Entonces obviamente tenemos que añadir un NGF más, que copiará esta parte con una estrella n g igual al dedo este nombre de fuerza pero otros no requieren el. Esta es la forma en que especificaste. Por supuesto, los adultos ven la colección fuera de todos los demás. Si todo hay algún error y tenemos lo requerido mejor? Entonces solo exhibe este y el siguiente es solo una copia basada fuera de escena. Pero en lugar de requerido, va a ser la violación de Inglaterra de un continente puro en ellos deberían retomar lo mismo. Entonces es a unos más frescos. Ahora verás que no aparece otro mensaje porque Número uno no es inválido. Número dos, todavía no está sucio, tan enojado. Es esto. Ahora está sucia, pero sigue vigente. Está sucio, aún casada. Pero ahora está sucio, inválido, y el inválido es porque está violando el descenso continental. Entonces voy a Es esto completamente ahora lo. Si bien es el pool de validación requerido en, está mostrando el nombre es obligatorio. Y como en el caso anterior, nos gustaría aplicar algún estilo a esto. Entonces volvamos al CSS correspondiente a esto, que está aquí y luego Definimos una estrella de clase aquí fuera, y podemos ver aquí que el color es el estilo de forma roja. Probablemente cursiva, y luego formaron tamaño. Podemos decir que sus 0.8 PM como 80% de descuento en su tamaño original. Volvamos al navegador. CSS puede requerir una actualización completa. Hagámoslo, Andi, intenta levantar pocas letras. Se puede ver que obtenemos eso y un mensaje también. Entonces de la misma manera. También podemos definir otros mensajes para otros campos. Entonces voy a copiar esta parte. Tenemos un control de correo electrónico el cual ha llegado a elevaciones esta vez se requiere el número uno. Por supuesto, el 2do 1 es la noche. Por lo que tiene que ser un correo electrónico válido. Entonces vamos a conseguir este cambio. Todo el nombre de pila para emitir Onda. Decimos que la dirección de correo electrónico es obligatoria. Segundo mensaje sería como no una expresión femenina válida. Vamos a enfrentar lo mismo. Toe Teléfono completo también tiene a validaciones. Una es la exigencia. El segundo es el patrón. Entonces Anglo celular, va a los nombres de pila. Y luego voy a cambiar esto a cuatro. Y dicen que el número telefónico es obligatorio. Y aquí está la lucha. Entonces vamos a especificar que esto es lo que se puede decir, por favor Entrada y 12 dígitos al salto. Por supuesto que lo olvidé. Este tiene que ser un correo electrónico. Entonces esa es la regla de validación. Y este es el patrón de Telesco. Guarda esto. Vuelve para que el navegador se actualice una vez, luego comprueba Si todos están funcionando como se esperaba. Entonces me veo otro mensaje. Veo segundo mensaje de error. Ahora me quito esto la cresta, por lo que no es una expresión valorada. Entonces voy a quitar esto. Es emérito es obligatorio. Por lo que dice aquí agradable, pero tienden a hacer bien dígitos sólo. Y si algo más es por número es obligatorio. Además la misma madera está completamente desactivada no fueron capaces de ir más lejos sin hacer entradas valientes. 33. Integración de jQuery (para la paginación en el desplazamiento): muchos intentos que quizá tengamos para usar nuestro 40 hijo fue completamente Es como pollito. Bueno, por ejemplo, en nuestra aplicación, cuando vayamos a lista de contactos en garabateado, verás que se trata de un botón Lord More, que señoriza al siguiente a batear 10 contactos. Pero si quieres este dedo del pie automáticamente, Señor, cuando garabateas la página aquí como podrías haber visto en Facebook donde cuando te desplazas hacia abajo, carga más contenido de página. Para ello, puede que tengamos que utilizar J Query. El primer paso hacia esto es toe instalado G consulta sobre su dependencia. Entonces he sido envidia. Um, instalado J calidad y su dependencia se activa tipos slash calidad de pollito. Una vez servido en la instalación tenemos toe dejar angular saber que tenemos un nuevo archivo JavaScript . Para eso, vamos del dedo del pie angular Jason, que está justo aquí, y se puede ver que si se desplaza hacia abajo hay una sección llamada Script, que es un área fuera de los guiones que desea dedo asociado. Entonces vamos a ampliar esto y añadir una entrada. El daño aquí da para J Query, que está ahí en la norma, o herramientas, y Scott no g expandirlo dist! Y tenemos tu geek wedded o Js andi con North subrayado moderns slash j cantera slash just slash check Muy oscura, media antorchas salvaron esta pelea en cualquier cambio a tu angular Jason pedirá el sol se reiniciará Vamos volver a nuestro control de supervivencia Ve y corre esto una vez más. Y ahora tenemos la aplicación cargada con éxito con el fin de entender cómo manejar el scroll. Evans fuera de la preocupación Jake. Ese es Goto. Jake oscureció en donde ya se cargó J Query. Andi, voy a abrir las herramientas de desarrollador. Ahora se puede ver que el dólar es una variable válida que separa su función. Onda Good comparó un dólar puro fuera de cuerpos puerta dependen y debes ver que hay un hola impreso. Entonces lo que significa que Jake se preocupe, está trabajando aquí sin ningún problema. Y esto es realmente bueno y tenemos acceso al dólar. Para conocer la posición de los scramblers, puede ver que este rastreador se encuentra actualmente en posición cero. Pero como y cuando me desplace hacia abajo ahora se puede ver una parte de las páginas última, por ejemplo, hasta escuchar si Es último, ¿ verdad? Entonces es que ha subido ahora. Queremos saber cómo se llama posición cuando estás en la parte inferior. Entonces lo que significa que queremos ver cuál es la cantidad de página que se carga en la parte superior. Además, ¿cuál es la altura de este apartado, cuál es el estado de la ventana? Para que podamos obtener esta información escribiendo ¿qué tienes igual? Ventana de $2. Así que sabe WT presenta el objeto de ventana y puedo tomar su puerta de ventana fuerte superior Andi ya que actualmente tenemos casi en la parte inferior. Cuando presiono es 13 71. Pero si vas al principio y luego llamas a la función tema lo cero porque no tengo frotar nada. Entonces si traigo la página toe este nivel así por garabatos y ahora si digo ¿qué es este trabajo gateado ? Se puede ver que es 2 26 gran sentido de la misma manera ahora cuando estoy aquí, dijo 1371 que es la ubicación fuera de su documento en este lugar por lo que también podemos obtener la posición inferior sumando la altura fuera de la ventana Por ejemplo, si yo vivir w altura de punto, es 6 21 que es la altura de esta parte del dedo del pie esta partes. Si reduzco las ventanas del dedo derecho en algún lugar en 50% y compruebo, verás que está en algún lugar de TNT y 25 pick lo dice sumando, eso se arrastró hasta la altura. Deberíamos estar sacando el prestamo del documento para que puedas ver tu altura w dot más el pueblo o scrum top on. Se supone que esa es la altura de nuestra ventana, que son las células grandes de 1992. Ahora bien, esto realmente se basa en ¿dónde está tu posición actual de desplazamiento? Entonces en este momento, algún lugar que esté en el medio, se puede ver que dice 1034. Entonces si estoy en el principio, debería estar consiguiendo algo así como 600 a cualquiera porque estoy teniendo esto arrastrado hasta cero, y solo estoy sumando la altura w dot eso 6 21 Big sell. Ahora bien, si estás en la parte inferior más, sabemos que es 13 71 pero depende del contenido de la página. El contenido de la página armada se denomina Documento. Por lo que puedo quedarme aquí por el documento de dólar de las tiendas Equal on. Y ahora puedo decir la altura del lote y se puede decir que la altura de Didot es 1992 Te respetamos fuera donde estoy en este momento. Entonces estoy en el principio ahora mismo. Altura del distribuidor, que es el documento La altura sigue siendo de 199 dedos. Entonces para comprobar si tenemos desplazamiento a la parte inferior más tenemos que comparar la altura de punto azul colocada de líderes multitud todo dedo del pie la escritura o altura. Y si coinciden, eso significa donde más el agua y podemos activar que Lord más funcionalidad fuera de nuestra aplicación aquí para que cuando estamos más abajo, el Señor más función suceda automáticamente. Entonces esta es la idea detrás de esto. Entonces volvamos atrás e implementemos lo mismo. Entonces vamos a puntera SRC ab componentes lista de contactos en el DS correspondiente a la misma donde ya tenemos la menor función más. Simplemente tenemos que llamar a esto una y otra vez con base en nuestros criterios. Entonces lo primero es que acceder al dólar variable global que está ahí en la ventana y convertirlo local. ¿ En serio? Bueno, solo definamos avanzada ventana del dedo del pie de otras personas fuera de la calidad del dólar R J. Entonces es uno de lo mismo lo suficiente. Déjenme darlo así. Yo tenía el dólar. Entonces ahora tengo que ir a la unidad y decir que estamos interesados en escuchar el dedo del pie el evento de scroll por la ventana. Y para hacer eso, primero en tu ventana de dólar hacia el rastreo. Entonces básicamente, somos industria en el evento scroll en la función de devolución de llamada de suministro, que es el evento a despedir. Cada centavos tu garabato. Entonces eso significa que si estoy garabando la página así, incluso estos disparaban cada vez. Lo que tenemos que hacer es ahora conseguir el acceso a la altura de la ventana y escrounged hacia arriba, lo que significa que cada vez que me desplaza así, ellos incluso este fuego y ahí es donde queremos escribir nuestro núcleo. Y voy a crear un par de variables locales izquierda w igual a color del dedo del pie. Sabemos Onda dejó d igual a $2 documento y acabamos de escuchar comprobar si w altura de punto más un poco scrum no es igual a dedo del pie no se ocultó. Entonces sólo tenemos que llamar más a este inicio Señor. Vea esto con aviso que esta función también está ligada al dedo importante. Por aquí ya no estaremos haciendo clic en el botón. Eso En realidad puedes comprometer esta línea presionando comando, slash, control slash guardar el archivo al volver al navegador. Entonces si me desplaza hacia abajo, ves que no está cargando todos ellos. Eso es probablemente porque debe haber un editor, y el otro dice que este inicio Lord Moore no es una función ahora. Este es un apagado típico cuando estamos usando Jake Worry. Ahora hay una razón para esto. El motivo es que estamos usando una función de devolución de llamada en un estilo de pelea ES, no en el sexenio. Entonces en los años cinco estilo esa clave eran Esto no corresponde dedo del pie las variables miembro de la clase , sino que representa objeto de ventana durante la ejecución. Entonces para que este cable represente el objeto de clase, solo tenemos que convertir esto en una función para adultos. Entonces voy a sacarlo de esta función y luego en Adol y guardar esto. Vamos a volver. También veremos la calidad de la cresta aprendiendo cada vez más contenido. Entonces solo para asegurarnos de que seamos capaces de aprender más sobre ambos que podrían Entonces funcionó y en la noche platicó verás que hay una petición al resto. Se ha hecho endpoints. Pero si me desplaza por aquí tan pronto como me desplazé todo deberías ver que va a hacer otra petición el. Eso es para la página. Número dos en hielo Corona más y verás que hay una página número tres en la página número cuatro y así sucesivamente y así sucesivamente. Entonces realmente bien, el Señor esto automáticamente, igual que funciona aplicaciones como Facebook. 34. Usa SweetAlert para hermosos cajas de diálogo: en nuestra aplicación. Cuando estamos viendo los detalles de la persona de contacto, tenemos una patente para borrar picking en la que debes ver que aparece un cuadro de diálogo de confirmación , es decir, ¿ Estás seguro? Ahora el aspecto y la sensación de los días depende de los pros. Er así que si vas a otro navegador, por ejemplo, aquí hay un safari, se carga la misma página y cuando hago clic en el cuadro de diálogo Village que aparece es totalmente diferente al que vemos en chrome. De igual forma, si voy a cinco zorro y doy clic en Eliminar, verás que el diálogo es totalmente diferente y esto es ópera. Y en ópera, los cuadros de diálogo decían Tú eres diferente. Por supuesto que puedes probar en otros hermanos on. Seguro que va a ser diferente a esto no es un buen enfoque porque no tenemos el control de estilizar fuera de este botch de rescate. A veces es importante que controlemos estas cosas como por ejemplo, quiero decir Ari seguro que s no están encendidos. Puede ser Quiero tener los subtítulos de un cliente para estos ahora. Dado que todo esto no es posible, tenemos que depender de algunas cajas de diálogo de terceros. Hay muchos cuadros de diálogo de consulta J disponibles, pero el que estoy mostrando aquí se llama Sweet Alert. Más Seguro Goto Dulce. Otros Aquí hay un bonito grupo Taylor con iconos animados. Ellos son el bonito título. Ahí hay un texto. También podemos tener algunos departamentos personalizados como Cancelar Estimados. Entonces para empezar con esto, es muy sencillo. Acabas de decir NPM instalar dulce alerta esa futura función llamada Cisne. Y entonces tienes opciones muy tees off como podemos decir, ¿Cuál es el título? Cuál es el siguiente, qué tipo de icono quieres. Y si quieres ver cómo se ve esto, puedes dar click en esto y ver así es como va a quedar. Por supuesto, probablemente puedas cambiar al éxito. Tendrías un botón de éxito. También hay una documentación disponible aquí en la parte inferior. Eso te da una personalización fuera de escena. Bueno, yo no estaría yendo. En efecto, en aproximadamente todos los días libres de documentación, definitivamente estaríamos mirando algunas de las opciones requeridas para nosotros. Por ejemplo, cuando me hice cargo de esto, quiero hacer una pregunta en lugar de host local para dos doble cero seguro. Quiero decir que estás a punto de eliminar este contacto. ¿ Estás seguro? A lo mejor puedo decir que no. Entonces puedo decir aquí. Sí, en. Eso lo veo. Sí, estoy seguro. Pero ese no es el botón predeterminado. Y cancelar sería el de para Gran Bretaña porque accidental. Si presionas ender, no debería estar borrando ese registro. Por lo que para hacer esa escuela del frente de mando abrió una nueva ciudad, asegúrate de que conseguir el directorio de trabajo y dirá NPM I para instalar sweet avert. Por lo que una vez realizada la instalación, tenemos que decirle a nuestra aplicación que hay un nuevo JavaScript y que se hace yendo dedo del pie. Angular, Chaisson oscuro. Contamos con una sección de script que tenemos especificando que hay un nuevo archivo en uso normal. Dulce alerta dissed y ves que son son de color dulce dot mindo chase. Eso es lo que tenemos que precisar. Por lo que está bien aquí, encontrado ni subrayado modelos slash ST alert slash dist street alone dot chase. Tenga en cuenta que la alerta dulce depende liberalmente de la consulta G y asegúrese de que esté incluida antes de la propia biblioteca de alertas de calle. Entonces guarde esto. Los cambios a Jason angular requieren que el vendedor sea reiniciado. Entonces voy a ir al servidor, parar esta palabra r y empecé una pequeña. Cuando eso iniciando, vamos a nuestro maíz donde tenemos los datos de contacto. Por lo que SRC ab componentes datos de contacto. Ahora este es el lugar donde estamos haciendo una confirmación solo para probar cómo este mundo deja salir de la función llamada mejor Cisne. Andi. Volveremos y reemplazaremos este por el dulce núcleo de alerta. Pero por el momento que se mira este aquí Ahora el oleaje es una función que está disponible globalmente, pero que sólo está disponible en el navegador. Entonces en este momento, porque estamos en el mecanografiado, todavía no tenemos acceso que desde el alcance de la ventana. Entonces para que utilicemos esto bien, sigamos declarando una variable llamada const swell la ventana del dedo del pie de la gente fuera. Entonces cuando se trata de una variable global ordenada por la alerta callejera, esto puede ser cualquier cosa porque es una variable local del dedo del pie nuestro modelo. Entonces ahora puedo usar eso por aquí. Pero solo empieza con eso hinchada y saluda. Ya que no tenemos un dedo del pie de botón, llame a esta función. Vayamos al HTML correspondiente hoy en adelante, luego llamemos a los testes. Bueno, sólo voy a agregar un botón un párrafo importante tratado de punto en Bt y default on. Entonces voy a ser tu alerta de suite de pruebas. Tenemos que decir clic evento equivale a la mejor función de hinchamiento del dedo del pie. Entonces volvemos al más cercano Aquí tenemos una alerta simplemente demasiado dulce antes de patadas importantes en la que deberías ver que hay un bonito cuadro de diálogo que aparece. Lo bueno es que ahora este es el mismo estilo que aparece incluso en otras rosas. También. Por ejemplo, si recargo esta página y hago clic en la alerta master suite, se puede ver que el cuadro de diálogo viene exactamente en el mismo estado que en Crume para que podamos probar o en otro proceso. Además, se trata de ópera para que veas que se vuelve a cargar señor. Ya sabes, cuando hago clic en esta prueba leer alerta, aparece exactamente el mismo cuadro de diálogo. Entonces vamos a bajarnos de esto. Vuelve a nuestra cancha y agregaremos algunas opciones más de las que es el comando y luego digo, Aquí está Slob. Puedo especificar un título diciendo esa libreta telefónica y puedo saludar, amigo. Y entonces puedo precisar que esto es un éxito. Guárdalo ahora. Cuando vuelves, se recarga. Demos click en el compañero de prueba Street Alert, y verás que hay un icono animado para el éxito. Este es el fatal. Este es el extra, y hay un viejo Caperton por defecto. Pero si quieres cambiar esta parte y puedes cambiar eso si quieres, puedes dar click en otro lugar. Dedo del pie, sácalo de este dial una caja también, que es igual y de cáncer. Si tienes una confirmación que tanto, volvamos atrás en lugar de éxito, puedes decir calentamiento. Nuestra info son otros. Estas son las cuatro opciones que se documenta aquí. Vamos a la documentación de alerta dulce. Se puede ver que hay iconos advertencia, error éxito en, pues estas son las cuatro posibilidades diferentes. Entonces ya que seleccioné Advertencia, no deberías ver un icono de advertencia con el mismo título y texto. Entonces da click en OK para salir de lo mismo ahora. También podemos especificar estos en usualmente como este oleaje con la configuración Objeto en el objeto de figuración con puede tener algo así como título Puedo decir libreta telefónica Uh, puedo especificar. Yo pon es decir, por ejemplo, en cuatro puedo decir tu texto, que es el segundo partier, lo que sea que se dé para que el texto pueda ser como tú estás en los datos de contacto. Guárdalo en. Volver a la aplicación recargas patadas en esta prueba a alerta dulce y lo vemos cuadro de diálogo similar que se está acercando para que también podamos tener cuadros de diálogo de confirmación. Y eso es exactamente lo que queremos hacer en caso de retraso. Entonces por el momento, no necesito esto. Alguien que se lo quite de esto lo guarde. Quita pronto este botón en particular. Esto vuelve a mi núcleo en Aquí es donde quiero especificar qué hacer Ahora. Cuando se muestren las urnas de confirmación, tendremos que cargar y podemos definir el valor para esos botones en particular. Por ejemplo, el primero no sería tal vez verdad. Segundo botón, tal vez cae o puede ser 1234 etcétera. Cuando llamas a este mal funcionamiento, devuelve esa promesa Onda, tenemos que llamar a esta función de borrar contacto. Cuando resulten las promesas, no tendremos esto. Vamos a decir aquí, Suad, sobre algún objeto de configuración Y decimos que cuando hay una guerra, sacamos el valor del botón. Eso es cualidades resultan en Entonces, usando ese resultado, decimos si el resultado es igual a la verdad del dedo, entonces nos gustaría hacer esta parte. Alguien corta esto y pega por aquí. Entonces básicamente, ahora obtenemos la promesa. Cuando resultan las promesas, comprobamos en qué botón se hizo clic. ¿ Fue el verdadero Burton o botón falso? Si el botón falso no estamos haciendo nada, tal vez simplemente puedas decir que el registro no se borra, pero por lo demás esto es lo que queremos hacer. Y la configuración ahora puede tener algo así como título. Podemos decir que eres un voto para eliminar este conflicto. A continuación se colocará a partir de. Entonces puedo decir importancia, que es un ari en el primer botón, se supone que es como, Sí, quiero borrar esto. Entonces este no será el D Porque solo el último botón será el predeterminado, así que puedo especificar el siguiente apagado el botón pasa a ser como, Sí, Sí, estoy seguro Andi, Entonces si te estás quedando visible, es cierto . El valor también es cierto. Entonces este es el que realmente estamos obteniendo como valor de resultado aquí una vez que obtengo el valor de resultado como verdadero Sarette tratando de eliminar esto. De igual forma, también te voy a dar otro, que es un recuperado se puede decir cancel on y verdad visible, que no se requiere para el segundo botón y luego valorar East Falls. Entonces, al hacer clic en el segundo botón, es como si se te hace clic en el botón de cancelar y el resultado es falso. De ahí que se haga caso omiso de esta condición y no se elimine el registro. El diálogo se va de todos modos, así que vamos a guardar esto. Vuelve para Rosa en hay un botón de borrar. Hagamos clic en el botón Eliminar. Va a decir que estás a punto de eliminar este contacto, por favor. Confirma s. seguro cancelado. Cancelando simplemente quitará la caja Della y te quedarás de vuelta aquí. Pero si hago clic en borrar y digo que sí, estoy seguro de que se llevará a cabo la acción real que está eliminando el contacto. Y después de la delantera, ya no vamos a estar en este espacio, pero lo llevará a la lista de contactos en puedes ver que ya se ha eliminado. Entonces volvamos atrás con el dedo del pie. Un contacto más. Cuando dije pueblo, quizá quisiera precisar que es una advertencia o un error. Advertir sería mejor. Por lo que puedo decir aquí que junto con la importancia del texto del título, también puedo decir Icon está advirtiendo sobre. Ponga una coma. Guarda esto. Vuelve a empezar. Si pateo el botón de borrar ahora verás que hay una advertencia. Estás a punto de eliminar este Contactar policía ¿Confirmar? Sí, estoy seguro. Cancelar Cancelar Pueblo de Lectura. Sí. Estoy seguro que borrará el registro. 35. Construye y despliega: nuestra aplicación de agenda telefónica ya está lista. Y echemos un vistazo a la carpeta que tenemos, así que está en mi escritorio. En esta es la app de la agenda telefónica y en McElroy Zika Press Space Bar. Obtengo información del directorio, y se puede ver que es 302.4 y estar con 10 ítems. Esta carpeta en particular constan de varios archivos, sugiere Jason Files. Tengo archivos de script ni modelos con paquetes de representación instalados externamente, que ocuparon el gran trozo de nuestro espacio de trabajo de aplicaciones. Para poder ejecutar esta aplicación, abrimos un frente de hombre en el espacio de trabajo. Voy a abrir una nueva terminal. Han sido la ciudad la guía telefónica de acciones y después ONG. Por lo que también hay un mensaje de advertencia de que este es un servidor simple utilizado para las pruebas. RT. Reservar aplicaciones angulares localmente en él no puede ser nuestro no debería estar usando en la producción. También ha generado un montón de archivos Charles podría los cuales aún no están físicamente disponibles . Pero si voy a navegador y abro local que está predicho de un cero llamado la preocupación del desarrollador , verás que en la red hay muchos archivos que habrían venido así Todos estos amigos ya están disponibles aquí pero no físicamente disponible en cualquier lugar, por lo que estos archivos tienen que ser requeridos. Cuando empujamos esto en remolque un servidor de producción. Además, si verás el puntaje real de origen HTML, verás que hay desarraigo de barra de desarraigo, que está ahí en nuestra aplicación también, por lo que puedes ver que bajo índice SRC, HTML ha aprobado slash arrancar de raíz. Pero entre desarraigo de slash y cuerpo de slash, se puede ver que hay mucha inyección de script off que ha tenido lugar. Entonces en realidad, necesitamos este índice html on no pusieron asedio a Mel lo que estamos teniendo en nuestro directorio de aplicaciones . Por lo que con la finalidad de convertir esta aplicación en un formato que se pueda dar a un servidor de producción , tenemos toe compilar todos nuestros archivos PS en remolque. Apropiado. HTM y niño se empapó como especia, y a este proceso se le llama construir. Andi. Es muy sencillo porque angular viene con sus propias herramientas de construcción. Entonces si un bien del paquete Doc Jason aquí, se puede ver que hay un comando llamado Build el cual representa n g build onda. También podemos ejecutar la factura de energía que directamente Así que vamos a echar un vistazo a eso en el símbolo del sistema. Entonces voy a parar. El desarrollo vale la pena presionando control Z y luego tipo n g build sostuvo un montón de opciones por aquí. Puede que no los estemos usando todos en absoluto. Lo primero que hay que mirar es el uso. Dice n g construir, que es un espacio de trabajo de proyecto en, luego las opciones. Ahora bien, si omites el proyecto, ¿qué espacio? Se asumirá que estás en las obras consigo mismo. Hay pocas otras opciones, como un Woody, que se llama compilación anticipada. Discutiremos esto en un video separado. Entonces tienes algo llamado basado Un verdadero si el Ural fuera de la aplicación que se está construyendo. También vamos a echar un vistazo a esto cuando construyamos sobre. Si te encuentras con un problema ¿cómo esto nos puede ayudar? Hay algunas otras opciones. Uno de ellos es el s basurero prod. Cuando true establece la configuración de la factura en el objetivo de producción, estas son las únicas dos opciones que podríamos estar grabando para usar Dash es Kort. Y eso es sólo producto que va a probar esto como apagado. Ahora, si ves que no hay carpeta corner ist, cuando termines el proceso de compilación que esta carpeta se crea automáticamente que inicia compilación de energía. Eso está mal en eso. Tan solo una prensa de cuerpo entra, dependiendo de la velocidad del tamaño de la computadora de la aplicación. Esto puede llevar algún tiempo, por lo que en mi caso tardó casi 35 segundos, que es bastante tiempo. Son pocos los archivos que se pueden ver runtime dot Js, que es de 1.41 kilobytes mangers, que es de sólo 388 kilobytes en. Prácticamente todas son incubadas, y también se puede ver que el bootstrap que hemos agregado se ha externalizado en estilos en algún número hash, dice García. Entonces el estilo, por ejemplo, es de 136 kilobytes. Pero si quieres comparar esto con el que generamos durante, los desarrollos son de trabajo. Entonces si me desplazo hacia arriba, se puede ver que los estilos Js es que en un punto 09 MB. etcétera de Wender Jay son de 4.0 toe MBI, que está todo en megabytes y escuchar todo está en kilobytes. Si también ves la nueva estructura de director, hay esta carpeta que puedo ver. Qué hay en esa carpeta de prueba. Consiste fuera director de app de agenda telefónica. Es así como proyecto para construir un directorio tiene algunos archivos de licencia, todos los activos que teníamos, como imágenes. Todos se guardan por aquí una D para Fair Wycombe. Pero podemos cambiar. Sólo hay un solo HTML, pesar de que creamos uno. HTM. Y para cada uno de los cuatro componentes, todo está empacado en remolque. Sillas de puerta principal. No hay archivos HTML adicionales, por lo que esto se llama como un contenido estático fuera de su aplicación. Entonces cuando esto se despliega y accede por un poser, entonces esa aplicación se ejecuta en el navegador del cliente. Por lo que no hay servicio, un requisito fuera de curso. Todavía tenemos nuestro requisito de punto final de descanso. Pero después de que se preocupe el despliegue de Estados Unidos, estos son los archivos que tenemos que desplegar sobre un servidor de producción para su implementación. Hay muchas opciones que tenemos opción número Uno sería un CD en el que stand para red de entrega de contenidos . Hay un hosting compartido como el que estoy usando en Go Daddy hay plataformas más bajas como Google Cloud o Amazon Cloudwatch. Y hay muchas, muchas opciones que tienes para nosotros. Concepto más cercano. Uno de los sirios que podemos explorar es qué escuela buscó nuestro mensaje. Se trata de un sirio para hospedar sitios web estáticos con algunos sub dominios así como socavamientos pasados . Si vas al precio, puedes ver que hay un uso gratuito de nivel el cual tiene opciones de publicación ilimitadas . Elenco socava SSL básico. Todo lo que tienes que hacer es empezar a usarlo. No hay absolutamente cuerdas que prueben. También había $30 al mes opciones que tiene proyectos ilimitados, editor ilimitado, dominio personalizado personalizado, SSL on y muchas otras características. Por supuesto, para los fines de demostración, estaremos usando esta opción gratuita en el camino con el que puedas empezar a trabajar. Esto es muy sencillo. Permítanme demostrar lo mismo. El primero que hay que hacer mil 000.000.000 es remolcar. Instala esto en tu computadora usando N b. M. Instalado ese jefe todo global en anti búsqueda. Por lo que me topé con este problema mientras instalaba porque en Mac, para poder instalar un paquete global, tenemos que correr con los comandos sudo cuando escuchas este pseudo en tiempo real y hemos estado hambrientos Death G, y entonces buscan en el y esta vez no debería haber un problema y se ha instalado con éxito. Y si tomo tu búsqueda ese escombro salud, me va a dar pocas opciones que el comando aquí dedo mejor a quien he amado en nosotros. Y si lo he amado, puedo cerrar. Puedo volver a iniciar sesión. Puedo enumerar todos los proyectos que he desplegado. Puedo limusina un proyecto. También puedo ver qué tipo de plan es mío. Entonces es muy, muy simple aviso de que aún no he creado cuenta, así que tendré que hacer es tow Ejecutar el comando de búsqueda, y me va a preguntar Cuál es el aviso de correo electrónico que se va dedo del pie iniciar sesión si mi email ya existe, o bien borrará la nueva cuenta de búsqueda ingresando el nuevo correo electrónico en la contraseña. Por lo que me rentaron mis correos electrónicos. Andi , me preguntará, ¿cuál es la contraseña en la contraseña? Esta podría ser una nueva contraseña. Si eres un usuario por primera vez ha terminado y entonces te pedirá ver la ubicación del proyecto. Ahora mismo está encontrando a mi trabajo directamente, que está en la parada para mirar hacia arriba. Pero la que quiero desplegar está ahí en la mejor agenda telefónica en Y entonces yo estaba tierna . Me dura. ¿ Qué es eso? Oh, mi nombre. Te da nombres divertidos. Adiciones, como en este caso trajeron operettas. No quiero esto. Voy a decir N g siete agenda telefónica en Presioné Enter. Por si esto aunque mi nombre N G siete libreta telefónica ya ha usado frijol otra persona, me va a dar otro dicho de que no tienes acceso a este divino en particular. Pero si esta es tu propia mente y estás tratando de especificar Dr mi nombre, simplemente se sobrescribirá sin preguntar. Así que ten cuidado con eso, porque Ender se parece a Engy siete waas de agenda telefónica disponibles. Y ahora se ha publicado con éxito tow n g siete agenda telefónica. Vayamos al Ural y luego echemos un vistazo a cómo se ve esto para poder ir a un navegador abierto. Y tú ese punto de guía telefónica g siete dice que eres una prensa. Entra y puedes ver mi aplicación ahora se sirve desde un servidor Web remoto, no desde local en lo alto. Pero hay un pequeño problema aquí porque cuando voy a una lista de contactos aquí, la lista de contactos más adecuada desde un punto final de descanso local. Por ejemplo, Si voy a consola de desarrollador y miro a Red Tab, por ejemplo, las solicitudes http patean en la lista de contactos. Verás que vuelve con un para no para mejor para que puedas echarle un vistazo a eso. Tenía un mensaje aquí. Dice que local 43 doble barra cero página de contacto número uno en caso de fallar. Por lo que obviamente, tenemos que asegurarnos de que nuestro punto de descanso esté funcionando. Entonces voy a volver al frente de comandos, NPM ejecutar Jason servido ender y luego volver al navegador Goto home y volver a lista de contactos, y ahora podemos ver nuestra lista de contactos está disponible. Ahora debes entender angular solo se trata del frente, y así somos capaces de desplegar con éxito el amigo y la aplicación a un servidor de producción . No obstante, si eres angular, la aplicación depende de algunos mejores puntos finales. Tienes que dar una dirección de punto final de descanso válida. En este momento, no tenemos esto, pero Si tiene acceso a un endpoint de descanso remoto, por favor actualice eso. Por lo que en nuestra aplicación, se va a dar en SRC en las libretas telefónicas de servicio que empezamos aquí. Entonces esta es la ubicación que tenemos que cambiar para poder acceder a este punto de restaurante desde más endpoint. Una opción de implementación más que tenemos es implementando en un servidor de alojamiento compartido. Déjame abrir mis opciones de panel de GoDaddy aquí. ¿ Mis productos les escucharon una opciones de hosting? Creo en manejar aquí tengo Ah, administrador de archivos. Puedo escuchar una carpeta nueva con el nombre apagado de la cabina telefónica N G siete. Si. OK. Y que cuatro ahí se han creado justo aquí, así que abrí lo mismo. no hay absolutamente archivos en él. Todo lo que tengo que hacer es ir del pie la agenda de la carpeta de prueba en selecto todos estos archivos Dragon borracho Por aquí. Onda. Una vez que se sube, ahora tenemos acceso toe nuestra aplicación desde un hosting compartido para que pueda ir dedo del pie con el fin de hacer frente slash n g siete agenda telefónica ender. Se puede ver que parece haber un error. Vayamos a echar un vistazo a mejor. Los editores son todos relacionados de la red del dedo del pie. Si ves que hay un gruñido editor de Js Polly Villages. Ahora bien, la razón de esto pasa a ser la ubicación fuera de cada uno de los archivos generados. Entonces, por ejemplo, si solo te mueves más bajo los taters de Reagan sabemos oscuro cool slash principal dot hash numerado R J s mientras se suponía que viniera de n g siete teléfonica slash significa ahora aquí es donde el bajo jefe alguacil entra en escena. Si veo aquí la fuente de la playa, se puede ver que ahí que esa llamada naturaleza basada de equivale a dos slash que se suponía que sería slash n g siete listón telefónico Esto se puede abordar de dos maneras. Ahora uno del camino está yendo dedo del pie índice html Aquí, edite que a la deriva igual a la barra del dedo n g siete listón de teléfonos slash Guárdalo. Y cuando vuelva aquí en recarga, no deberías ver que no hay problema con eso encendido. Podemos acceder a la lista de contactos fueron capaces de verlos fueron capaces de editarlos en. Podremos eliminar todas esas cosas que podamos hacer sin ningún problema. El segundo método está en las opciones de compilación que habíamos visto antes. Había una opción llamada alguacil de coberturas basado. Por lo que mientras nos construimos en sí, podríamos haber especificado Dash Dash Basij de Iguales a dos barras n g siete libros extranjeros slash. Entonces así es lo fácil que es construir tu aplicación angular y desplegada en el dedo del pie ya sea sirios como mensaje de cirugía o un hosting compartido como Go Daddy. 36. compilación JIT y AOT: ya que estamos desarrollando aplicación angular usando mecanografía por No, debes tener en cuenta que angular usa un compilador para transformar sobre tipos. Ser llamado a un trabajo como buen ex que cierra puede entender. Angular viene con dos tipos de compiladores. Uno se llama JT son sólo en 10 compilador. El otro es un cuerpo están por delante de los tiempos. Combine ER, la compilación de desarrollo predeterminada utiliza un compilador jit. Entonces cuando ejecutamos NJ Star Command por defecto, desarrollo, se genera desarrollo, build. Y de ahí que el compilador Jit se utilice para entender lo mismo. Vamos a construir nuestra aplicación. Estaba en el comercial en Djibouti, que por antes utiliza las opciones de construcción de desarrollo. Por lo que cuando presioné Enter, ha generado el cáliz requerido Podria encuentra. Uno de los archivos aquí es el Renderizado RJ's, que comprende fuera compilador angular y marco angular. También vemos un mapa bien para cada uno de los JavaScript. Esto se puede utilizar para explorar el contenido de un JavaScript en particular y sus dependencias . Para ello, necesitamos instalar una herramienta fuente Caldas. Map Explorer y vamos a instalar el mismo NPM. Yo soy fuente de mi explorador. Ahora tenemos un comando call source map Explorer in the North Modules slash Dark bin folder para explorar el RJ's renderizado Vamos a escribir en el comando dark slash north modules dot ser slash source Map Explorer, seguido de los cargos de proveedor que está ahí en la carpeta del disco Libreta de teléfonos en Render Chase. Por lo que presiono enviarnos. Esto abre una alegría en el navegador, explorando diversos aspectos fuera de IGs renderizados se puede ver la hija dice que el render persigue 3.8 nb, o promedio más del 50% de descuento que está ocupado por el marco angular y el angular compilador. Entonces si usamos esta construcción, lucha y ejecutamos la aplicación, cada componente de diamante tiene que ser cargado. El compilador entra en escena, se queja de que India JavaScript por primera vez y luego sirve a la Broza. Requisitos posteriores utilizarán los archivos de Charles get generados. Ahora podemos explorar lo que sucede cuando estás usando el arranque de producción deteniendo esta aplicación y reconstruyendo nuestra aplicación usando la opción amplia dash dash. Por lo que puedo decir Engy Build Broad, que incluye el compilador A woody. Hay dos cosas que puedes observar. número uno es que no se generan archivos de mapa, junto con las peleas de JavaScript y eso es simple. Podemos agregar otro flak o discontinuos nuestro mapa fuente. Pero lo importante no existe el propio RJ renderizado. Y esto es familia, porque la mayor parte de la persecución del vendedor fue el marco en el propio compilador, que ya no están ahí en. Por lo que se combina con las principales iglesias en las que está para que podamos explorar el punto principal Js on. También podemos generar las antorchas de ventana explícitamente agregando otro vuelo. Entonces vamos a emitir el comando N g will. Eso es sólo problema. Dash dash. Tan inteligente. Y eso es justo cuando el trozo no hay otro Window GS, que es de sólo 349 kilobytes en comparación con 3.8 nb de la porción anterior. Entonces vamos a explorar el mismo día Tira oscura ni módulos, fuente de barra oscura. Mi explorador puerta slash list slash agenda ab slash amigo orden Js Y ahora se puede ver que no hay compilador así como el marco angular fueron incluidos en este. Este fue el anterior que ocupó 3.8 y ser más del 50% es el marco en el compilador y aquí no hay compilador, lo que significa que toda nuestra corte mecanografiada se convierte en JavaScript durante el propio proceso de construcción . Por lo que si hay algún error, como los errores de enlace de plantillas, se reportarán durante la propia construcción. Pero como en el desarrollo Washington, la compilación sucede tiempo Darren. Entonces, a menos que haya un editor durante el tiempo, no se reportará en absoluto. Entendamos lo mismo cometiendo un error de ebullición de plantilla explícitamente y veamos si el otro es reportado en el momento equivocado o en el momento del constructor. Entonces voy al núcleo. Voy a uno de los componentes. Vamos al otro componente de contacto en los DIA's. Eso está claro que una función nos llamó. Get detective devuelve exactamente una cadena en un nuevo contacto y llamemos a esta función en nuestro HTML mediante el uso de un doble live como se titulo en solo para asegurarnos de que tenemos una plantilla planeando otra, vamos a dar deliberadamente get Título de subrayado como función llamada Guardar esto. Volvamos al símbolo del sistema. Detener el mapa fuente Explorer y utilizar el comando en el alma, que por defecto utiliza el proyecto de ley de desarrollo. Cuando presioné enter, se puede ver que no había otro y decía, compilado con éxito. Ganó la otra plantilla de encuadernación juntos. Entonces vamos al navegador. Andi, abre host local 47 0 y puedes ver que la aplicación se está ejecutando con éxito. Debería poder ir a otros componentes, pero cuando vaya a nuestro un nuevo contacto, verá que no hay título y esto es principalmente porque ahora que se carga el componente de contacto de arte , el compilador Jit intenta compilar que enfrenta, un enlace de plantilla mejor. Y ese otro se reporta en la consola diciendo Get underscore Título no es una función, por lo que no hay error durante el proceso de construcción, pero al mismo tiempo sí tenemos un error. Ahora echemos un vistazo a lo que sucede con una opción woody. Entonces déjame cerrar. Esta vez vuelvo al mando. Confianza pronta controla él para detener esto, despeja el tipo grito que el Command Engy sirvió con una bandera fuera de un cuerpo el cual está incluido. Si estás haciendo Engy build guiones producto y eso es ender, deberías ver que no hay mejor indicando un enlace de plantilla mejor, y puedes ver que el proyecto de ley está fallado y no puedo abrir un nuevo ataque, local primero para un doble cero porque los edificios completos fallaron en este momento, y solo para asegurarse de que esto se haga con éxito. Si no hay edición, guarde esto. Vuelve del pie del mando. Control rápido, Ver para detener esto valen en el mismo vienen. Y lo que es más en esta ocasión no tenemos ningún tipo de júbilo de combate, otros por lo que nuestros edificios exitosos en la aplicación pueden estar abiertos sin ningún problema también. 37. Conclusión: reglamento para la realización de este curso. Este curso termina aquí para el aprendizaje continúa. Espero que se beneficien de las puntuaciones y disfruten aprendiendo. Angular. Por mucho que disfruté creando este curso, sinceramente les agradezco por producir discurso y les deseo éxito en su futuro. Si tienes alguna duda en alguna fuera de mis conferencias o demostraciones, no dudes en volver. Tus comentarios me ayudaron a emplear mis futuros cursos. Una vez más. Gracias y desearle todo lo mejor.