Curso acelerado de Angular

1. 0101Qué es angular: ¿Qué es angular? Angular es un marco para construir aplicaciones dinámicas de una sola página. Obviamente, si eres principiante, esta definición puede no estar teniendo sentido completo. Entonces, para darle sentido a esta definición, comencemos entendiendo cómo funciona una aplicación web simple. Digamos que has visitado un sitio web de comercio electrónico y has ingresado a este oral shop.com slash ElectronC tal vez acabas de hacer clic El navegador enviaría entonces la solicitud al servidor solicitando lista de artículos electrónicos. El servidor procesaría la solicitud y luego podría consultar la base de datos solicitando lista de registros, que en este caso son electrónicos. Una vez recuperada, devolvería la respuesta al cliente o al navegador. Ahora, allá por los días, solíamos usar tecnologías como php, asp.net, RubonRails o jango para generar dinámicamente el STML y enviarlo de vuelta al cliente o al navegador Entonces este STML tiene los datos que se envuelven con STML necesario o lógica de presentación para que pueda renderizarse en el navegador Pero hay muchos problemas con este enfoque. ¿Puedes pausar el video e intentar hacer una conjetura? En primer lugar, tendremos problemas con el rendimiento porque generar STML dinámico es muy intensivo en recursos, y si hay una gran cantidad de tráfico llegando al servidor, va a exigir muchos recursos, impactar el rendimiento, aumentar el costo, y eventualmente podría afectar experiencia del usuario también porque las páginas web podrían estar renderizando muy lento. Podría haber cierta latencia. Otro tema que podemos pensar es la complejidad de la base de código. Los desarrolladores back-end tienen que escribir código para generar STML dinámicamente, y esto aumentará la complejidad de la base de código y por lo tanto, la capacidad de mantenimiento de la base de código Además, los desarrolladores de back end también necesitan aprender tecnologías front-end para hacer su trabajo. En tercer lugar, y lo más importante, habría problemas de compatibilidad. Ahora, TML puede ser entendido por un navegador, pero ¿y si el cliente es una aplicación móvil ¿O qué pasa si alguna otra aplicación quiere leer los datos? Bueno, si una aplicación está solicitando datos, no podemos enviarles HTML. Tienen que hacer ese trabajo adicional de eliminar toda la parte de la presentación, eliminar todas las etiquetas TML y extraer los datos, lo cual no es nada práctico Entonces, ¿tenemos una solución a este problema? Bueno, ¿qué tal si solo enviamos los datos y dejamos que el cliente se encargue de la parte de presentación? ¿Eso resolvería el problema? Echemos un vistazo. Entonces, en lugar de enviar STML, ahora enviaríamos JSON Si te estás preguntando qué es JSON, simplemente datos en un formato estandarizado que todos los demás clientes están dispuestos a entender. Por ejemplo, si estamos solicitando una lista de electrónica, entonces la respuesta JSON del servidor podría verse algo así, y todos los clientes están equipados para entenderlo. Por ejemplo, los desarrolladores de aplicaciones móviles podrían escribir algún código, que pasará por este JSON y extraerá los datos que necesitan. Del mismo modo, alguna otra aplicación puede usar algunas bibliotecas existentes para leer fácilmente los datos de la respuesta JSON. Y hoy en día, todas estas tecnologías de supervisión como Java, jango, PHP, node JS, que es una elección muy popular estos días solo están enviando datos JSON, y no les molesta generar tamicamente o incluir lógica de presentación en Pero aquí tenemos un problema. Este JSON puede ser leído por aplicación móvil o alguna otra aplicación o algún otro cliente. Pero ¿qué pasa con los navegadores? No podemos mostrar de inmediato estos datos JSON en el navegador y esperar el usuario tenga una muy buena experiencia. Quieren ver los datos de una manera visualmente agradable, y quieren poder interactuar con la aplicación con enlaces, botones, formularios, etcétera Así que todavía necesitamos tener HTML, CSS y JavaScript en alguna parte para que podamos lograrlo. ¿Cómo logramos eso? Echemos un vistazo. Entonces digamos que el usuario ha visitado shop.com. En el momento en que el cliente visita ese sitio, el navegador enviaría la solicitud al servidor solicitando el archivo Index SML Esta vez, el servidor respondería con todos los archivos TML CSS y JavaScript que alguna vez necesites Y para todas estas solicitudes posteriores, sólo va a responder con solo los datos en formato JSON. Cuando visitas un sitio web tradicional, cada vez que haces clic en un enlace o vas a una página en particular, el navegador vuelve a cargar toda la página, enviando una solicitud al servidor y obteniendo una nueva página TML en No obstante, en este caso, el navegador carga toda la estructura de la aplicación, HTML, CSS, JavaScript, todo solo una vez. Después de eso, cuando haces clic en un enlace o navegas por las páginas, la página no se vuelve a cargar En su lugar, la aplicación actualiza dinámicamente el contenido usando JavaScript. Actualiza dinámicamente el contenido o datos JSON utilizando el JavaScript, que ya está presente. Entonces, esencialmente, actúa como una aplicación de una sola página. Al igual que tienes una aplicación móvil ejecutándose en Android, vas a tener esta aplicación construida usando TML, CSS y JavaScript en un navegador Y al igual que tu aplicación móvil no necesita una recarga cada vez que interactúas con ella. Incluso esto no requiere la recarga de la página cada vez que el cliente interactúa con la aplicación en el navegador Algunos de los ejemplos de aplicaciones de una sola página son Facebook, LinkedIn, Twitter y hay muchos otros. Instagram también es una aplicación de una sola página. medida que te desplazas por la publicación, no vas a ver que la página se vuelve a cargar Eso es porque está funcionando en este modelo. La primera vez que visitas facebook.com, ya ha descargado todos los TML CSS y JavaScript requeridos Y para todas las solicitudes posteriores, servidor solo está respondiendo con los datos en formato JSON, y se está poblando en diversos componentes usando JavaScript. La verdadera pregunta es, ¿cómo vamos a construir estos HTML CSS y JavaScript? ¿Vamos a usar literalmente SML CSS y JavaScript para construir estas aplicaciones No tiene sentido. Va a tomar una cantidad inimaginable de esfuerzo, tiempo y energía, y es simplemente imposible Ahí es donde entra en imagen angular. Angular es un marco. Lo que es el framework es solo un montón de bibliotecas o código preescrito, lo que hará que la vida del desarrollador sea fácil que no tengan que escribir TML CSS y JavaScript desde cero Utilizamos angular para construir estas aplicaciones dinámicas de una sola página. Si quieres construir un auto, no tiene sentido que construyas todos y cada uno de los componentes desde cero. Desea obtener componentes de varios proveedores y ensamblarlos de la manera que desee. Del mismo modo, vas a usar angular framework para construir las aplicaciones como desees. Espero que tenga sentido. Te veré a continuación. 2. 0102 NodeJS vs Angular: Realmente importante entender la diferencia entre angular y nodo J, porque a menudo pensamos en los nodejs como algo que va del lado del servidor y angular es algo que va del lado del cliente Sin embargo, necesitamos nodejs para poder construir o desarrollar aplicaciones angulares De hecho, ya sea cualquier tipo de aplicación JavaScript como nodejs react, o incluso ver Necesitamos nodejs para poder construir o desarrollar esas aplicaciones Entonces intentemos entender el papel del nodo JS en el desarrollo angular. Angler es algo que va del lado del cliente, que significa que es una aplicación JavaScript que se ejecuta en Browser Por otro lado, nodejs se ejecuta en el servidor, y tanto NodeJS como pescaDeJS son aplicaciones JavaScript, y sí necesitan tiempo de ejecución de JavaScript para poder ejecutarse Para aplicaciones pescadoras, tenemos navegador que ejecuta JavaScript. Sin embargo, para el nodo js, tenemos nodejs runtime para que podamos implementar nuestra aplicación en ese entorno, y luego pueda comenzar a servir la Ahora, hasta el momento, nodejs no tiene ningún tipo de papel en angular No necesitamos nodejs para poder ejecutar aplicaciones angulares Browser ya está haciendo ese trabajo. Sin embargo, para construir aplicaciones angulares, necesitamos nodejs Para entender esto mejor, echemos un vistazo a cómo se desarrolla e implementa realmente la aplicación nodejs desarrolla e implementa realmente Entonces, antes que nada, tienes que instalar nodejs en tu máquina local, y luego normalmente tiendes a ejecutar estos comandos Ahora bien, estos no son una lista exclusiva de comandos, sino solo para darte una idea, voy a mostrar algunos comandos que podríamos ejecutar mientras desarrollamos aplicaciones nodejs En primer lugar, después de instalar el nodo JS, podrías en este comando NPM en él, que inicializará el proyecto e introducirá el paquete dot js en archivo con alguna información básica Por lo que básicamente podría pedirte que ingreses la descripción del nombre del proyecto, así sucesivamente y así sucesivamente. Después de eso, también podrías instalar Express. Instalar Express es prácticamente un estándar hoy en día porque viene con algunos códigos y bibliotecas preescritos, que podemos usar de inmediato Por ejemplo, nos facilita la introducción de ruteo, manejo de solicitudes, respuestas, etcétera Y también podrías instalar mecanografiado. Esta también es prácticamente una práctica estándar para usar mecanografiado en lugar de JavaScript sin procesar porque mecanografiado es como una versión evolucionada de Hará que nuestro trabajo sea mucho más fácil. Entonces, una vez que instalas mecanografiado, comenzarías a escribir el código, y después de eso, tendrías que traducir esos archivos mecanografiados en archivos Javascript equivalentes para que la inscripción de nodejs o nodejs Javascript, la inscripción en tiempo de ejecución pueda o nodejs Javascript, la inscripción en tiempo comenzarías a escribir el código, y después de eso, tendrías que traducir esos archivos mecanografiados en archivos Javascript equivalentes para que la inscripción de nodejs o nodejs Javascript, la inscripción en tiempo de ejecución pueda ejecutarlo. Entonces, una vez que haces eso, en realidad podrías probar las cosas con NPM start. Y una vez que estés bien con todo, implementarás esa aplicación en el servidor de producción, y luego podrá comenzar a resolver la solicitud. Viniendo a angular, sin embargo, no podemos usar estos comandos de asentimiento Just porque la forma se manejan los proyectos angulares es un poco diferente de la forma en que se manejan los proyectos Jz de asentimiento Por ejemplo, la estructura del proyecto va a diferir en caso de angular. Entonces, para ejecutar comandos anglo específicos, necesitamos otra herramienta llamada CLI angular Necesitamos tenerlo instalado en nuestra máquina local. Y la forma en que lo vamos a instalar es ejecutando el comando NPM. Entonces todos estos comandos que comienzan con NPM son comandos específicos de nodejs Para instalar CLI angular, primero necesitamos tener instalado el nodo JS Sólo entonces podremos ejecutar realmente este comando. De hecho, la CLI angular en sí fue escrita usando JavaScript, y sí necesita algo de tiempo de ejecución de JavaScript JavaScript para poder ejecutarse por sí mismo Y una vez más, esa inscripción es el nodo JS. Así que incluso para desarrollar aplicaciones angulares, primero tenemos que instalar Node js en nuestra computadora local. Después vamos a seguir adelante e instalar CLI angular, lo que nos permitirá ejecutar algunos comandos anglo específicos Después de instalar CLI angular, puede ejecutar comandos anglo específicos Por ejemplo, el motor U, y luego vas a mencionar el nombre del proyecto, creará una estructura básica del proyecto con todos los paquetes básicos y bibliotecas que necesitamos para comenzar a desarrollar aplicaciones angulares. Técnicamente se puede hacer todo esto sin instalar Anglo CLI, pero ese es un proceso muy doloroso Por eso tenemos anglo CLI para facilitar nuestro trabajo. Va a hacer mucho trabajo pesado por nosotros. Y entonces podrías comenzar a escribir código en mecanografiado, y luego vas a servir a la aplicación para probar cosas, y luego eventualmente construirás la aplicación, y luego eventualmente construirás la aplicación, que esencialmente traducirá todos esos archivos mecanografiados JavaScript equivalente porque eso es lo que lo Y luego lo vas a mantener en algún lugar del servidor. Cada vez que alguien visita tu sitio, el servidor enviaría todos esos archivos y los carga en el navegador. Ahora lo clave para entender aquí es que en caso de nodejs, necesitamos nodejs no sólo para desarrollar o construir la aplicación, sino también para ejecutar realmente la aplicación en el lado del servidor Mientras que en el caso del pescadero, vamos a necesitar el nodo J para construir o para desarrollar la aplicación angular, pero realmente no lo necesitamos para ejecutar la aplicación angular en producción porque tenemos navegador que está haciendo ese trabajo. Espero que tenga sentido. Te veré a continuación. 3. 0103 Configuración del entorno de desarrollo: Configurar la inscripción de desarrollo para angular es muy sencillo. Implica estos tres pasos. En primer lugar, vamos a instalar Node js, y después vamos a usar el comando nodejs para instalar CLI angular para que podamos comenzar ejecutar los comandos anglo Y entonces necesitamos algún editor de código fuente, una herramienta robusta que nos ayude a escribir, construir y depurar el código de manera más eficiente en comparación con un bloc de notas estándar El código de Visual Studio hace ese trabajo. Veamos cómo se hacen todos estos. Entonces esta es la página oficial de nodjs isndjs.org, y ya podemos ver Si haces clic en él, va a descargar el Instalador, y luego podrás instalar NodeJS, tal como instalarías cualquier otro software Es muy sencillo. Sin embargo, si quieres tener un mejor control sobre cómo quieres descargar, puedes ir a la pestaña Descargar y luego aquí podemos instalar y configurar el nodo JS usando un gestor de paquetes, o podemos usar un instalador preconstruido como el que acabamos de ver, o simplemente podemos descargar los binarios e instalarlos Y si quieres, también podemos descargar el código fuente. Este enfoque sencillo es, por supuesto, utilizar un instalador preconstruido. Tendrías que elegir la versión que deseas descargar y el sistema operativo. Pero si quieres cambiar la versión, nosotros podemos hacerlo. Si estás trabajando para una empresa corporativa, entonces es recomendable que elijas una de las versiones LTS LTS significa soporte a largo plazo. Por lo que todas las versiones que estén etiquetadas como LTS recibirán soporte y mantenimiento de la comunidad No Jess durante varios años después de su lanzamiento Entonces estos son lanzamientos más estables, pero para fines de aprendizaje, podemos ir con la última y la mejor versión. Voy a elegir la versión más reciente y dar clic en Descargar. Ya lo he descargado y está ahí en mi escritorio. Pero si quieres ponerte más aventurero, podemos ir con la opción de administrador de paquetes, y por defecto, ha elegido F&M significa fast Node Entonces, si quieres usar Fast Node Manager para instalar Node JS, entonces todo lo que necesitas hacer es ejecutar todos estos comandos en la herramienta de línea de comandos de Windows o usando PowerShell Pero antes de ejecutar estos comandos, es necesario tener instalado el administrador de paquetes de Windows o Wind get. Se puede obtener fácilmente de la Tienda Windows. Una vez que instale el Administrador de paquetes de Windows, puede ejecutar todos estos comandos para instalar rápido Node Manager, y luego configurar nroment finalmente descargar Si eres principiante, solo tienes que ir con el instalador. No hay que seguir este enfoque. Pero tal vez se esté preguntando ¿por qué queremos usar administrador de paquetes en comparación con solo instalar el nodo JS usando un instalador? Bueno, F&M nos dará cierta flexibilidad de cambiar entre diferentes versiones de nodo Por ejemplo, si estás probando compatibilidad y quieres probarla en una versión diferente del nodo JS, F&M te lo pondrá muy fácil Con sólo ejecutar un par de comandos, podemos cambiar a una versión de nodo diferente. Básicamente nos salvará de tener que desinstalar y reinstalar una versión diferente del nodo JS Pero si eres principiante, lo más probable es que no quieras hacer nada así. Sólo tienes que descargar el instalador e instalar Node js. También tenemos un montón de otras opciones aquí. Si quieres instalar Node JS en un contenedor Docker, entonces estos son todos la lista de comandos que necesitamos ejecutar y esto instalaría Node JS Una vez que haya descargado el instalador, basta con hacer doble clic sobre él. Deje todo a su defecto, acepte la licencia y termine la instalación. Final de golpe. Una vez instalado para verificar nuestra instalación, iniciemos la línea de comandos Parcial o Windows con privilegios de administrador. Es muy importante que lances tu Poial con privilegios administrativos Si presionas la tecla Mayús y haces clic derecho en la pantalla, posible que veas la opción de iniciar Pill, pero esto no es con privilegios de administrador. Así que vamos a hacer clic en la tecla de Windows y luego buscar PowerShell Haga clic derecho sobre él, haga clic en Ejecutar como administrador. Entonces esto ha abierto el shell de energía de Windows. Verifiquemos si nuestro nodo JS está instalado. Voy a decir nodo guión B, B para versión, y ha mostrado la versión Y de manera similar, también voy a comprobar para NPM significa gestor de paquetes de nodo Es usando esta herramienta vamos a instalar todos los paquetes que necesitamos en nuestro proyecto. Ahora bien, este comando ha fallado porque por defecto, por razones de seguridad, powershell no nos permitirá ejecutar ningún guion Para solucionarlo, tenemos que cambiar nuestra política de ejecución. Primero averiguaremos la política de ejecución. Y actualmente está configurado para restringido. Vamos a cambiar eso a irrestricto para que podamos ejecutar scripts usando parciales Voy a decir que sí escribiendo Y. Despejemos la pantalla e intentemos ejecutar el comando una vez más. Y se ha exhibido. Lo siguiente que vamos a hacer es instalar CLI angular, y el comando para ello es que vamos a usar node package manager para instalar CLI angular con una opción global Con la opción hyphen G, estamos diciendo que queremos instalar CLI angular globalmente para que podamos ejecutar los comandos angulares desde cualquier directorio Si no establecemos esto a global, entonces CLI angular solo se limita al directorio actual Si desea instalar algún paquete que esté limitado a un proyecto en particular, entonces no queremos usar la opción guión G. Podemos mantenerlos locales. Sin embargo, queremos que la CLI angular esté disponible para todos los proyectos en todos los directorios Entonces queremos establecer esto a global con esta opción guión G. Y luego vamos a especificar CLI angular Esto debería instalar anglo CLI, y va a llevar algún tiempo Ahora, verifiquemos si anglo CLI está instalado ejecutando el comando angular Esa es la versión de guión NG. Y ha mostrado la versión, lo que significa que hemos instalado con éxito Angular CLI A continuación, vamos a instalar Visual Studio Code, y este es el sitio web oficial de Visual Studio Code. Esto es muy sencillo. Todo lo que tienes que hacer es descargar el instalador y luego instalarlo. Una vez hecho esto, así es como debería verse el código de Visual Studio. Espero que tenga sentido. Te veré a continuación. 4. 0104 Componentes en ángulo: Entonces, ¿qué son los componentes en angulo? Echemos un vistazo. Imagina que esta es tu página de Facebook. Ahora, esta página está compuesta por varios bloques, o por el momento, llamémoslos componentes de la interfaz de usuario. Por ejemplo, podríamos estar teniendo un componente llamado fotos que mostraría tus fotos, y luego podrías estar teniendo un componente llamado A, que habla de ti. Y entonces podríamos tener otro componente llamado pose que mostraría tu pose. También podemos tener componentes dentro de otro componente. Por ejemplo, el componente de poste podría estar compuesto por un par de componentes llamados crear publicación y publicación de visualización. Crear publicación te permitiría crear una publicación, y la publicación de visualización solo mostrará la última publicación, y la pose de visualización se actualizaría dinámicamente a medida que nos desplazamos por la página. Eso significa que a medida que nos desplazamos por la página, vamos a ver nuevas publicaciones que se llenan, y todos estos componentes podrían estar residiendo en un componente maestro. Ahora, tengo una pregunta para ti. ¿Qué se necesita para construir estos componentes? Tomemos Componente de pose de visualización, por ejemplo. ¿Qué se necesita para construir ese componente? Te voy a dar una pista. HTML porque eso es lo que entiende el navegador. De lo contrario, no estaríamos viendo nada en el navegador. ¿ Qué más necesitamos? Styling, por supuesto, necesitamos CSS o algo similar para que sea visualmente atractivo. Y luego también necesitamos datos, que a menudo se obtienen del servidor Y entonces también necesitamos la lógica o el código que le daría algo de inteligencia al componente. Por ejemplo, el usuario puede querer interactuar con el componente presionando el botón Me gusta o el usuario puede querer enviar un comentario. Siempre que el usuario ingrese el texto y haga clic en enviar o agregar comentario, ejecutaría la lógica subyacente o el código se ejecutaría la lógica subyacente o el código para que ese comentario se agregara en el post. La combinación de todos estos, la vista que es TML y CSS, datos y lógica es lo que es componente angular Un componente angular estaría compuesto de todos estos para que cuando ejecutemos nuestra aplicación, vamos a ver que estos componentes se cargan. La mejor manera de entender el componente angular es echando un vistazo a un código de muestra. Ahora, obviamente, este no es un código completo. Esto es solo para darte una idea de qué es el componente angular. Esta comprende de la vista, que es la combinación del TML y CSS Aquí estamos tratando de señalar un archivo TML y un archivo CSS Así que todo el estimul y CSS requeridos para este componente en particular estarían residiendo en estos archivos Y entonces también tenemos la lógica subyacente que daría algo de inteligencia al componente. Ejemplo, en caso de display post, podríamos estar teniendo un método llamado post que tendrá algún código para decir qué pasaría si el usuario pulsa un botón Me gusta. Entonces también podríamos tener otro método llamado add comment definiendo lo que sucedería si el usuario agregara un nuevo comentario. Los datos serían obtenidos del servidor, lo que no estamos viendo en este código en particular, pero definitivamente lo exploraremos en el final de la línea Pero espero que tengas una idea de qué es el componente angular. Cuando vayamos por el ejemplo, lo vas a entender aún mejor. Te veré a continuación. 5. 0105 Creación de proyectos angulares con tutorial: Bien, veamos cómo podemos crear nuestro primer proyecto pescadero Y para eso, vamos a lanzar nuestro código de Visual Studio, y luego tenemos que lanzar el terminal. Podemos usar el terminal que ya forma parte de Visual Studio Code, o también podemos usar cualquier herramienta de línea de comandos como la línea de comandos de Windows, PowerShell, etcétera Siempre y cuando puedas ejecutar comandos anglo desde esa herramienta, deberíamos ser buenos Para iniciar el terminal en código de Visual Studio, debemos hacer clic en terminal en el menú y luego dar clic en Nueva terminal. También he creado una nueva carpeta en mi Windows, donde vamos a alojar todos nuestros proyectos angulares. Voy a copiar su ruta, y vamos a ir a ese directorio. Voy a hacer CD significa directorio de cadena, y voy a pegar la ruta. Así que ahora estamos en ese directorio recién creado, y aquí es donde vamos a crear nuestro nuevo proyecto angular. El comando para crear un nuevo proyecto angular es NG Nuevo. Y luego vamos a especificar el nombre del proyecto. Simplemente voy a llamarlo como mi app. Ahora aquí tenemos un montón de opciones. Te recomendaría usar SCSS. SCSS es como una versión evolucionada de CSS. Si estás familiarizado con CSS, puedes entender fácilmente SCSS E incluso si no sabes nada de estilo, puedes entenderlo fácilmente a medida que avanzamos en este curso. Entonces, por ahora, escojamos la opción SCSS y pulsemos Enter o Return Ahora nos está preguntando si queremos habilitar renderizado del lado del servidor y la generación del lado estático. Vamos a explorar estos más adelante, pero voy a tratar de darte una idea de cuáles son estos. Normalmente, cuando visitas una página web construida con angular, el navegador descarga todo el Javascript y luego construye la página en tu computadora. El servidor acaba de enviar los datos. Eso se llama renderizado del lado del cliente, y el renderizado del lado del cliente se usa más comúnmente. El renderizado del lado del servidor o SSR funciona como sitios web tradicionales donde la página se construye primero en el servidor y la estimación completa se envía al navegador Ahora, hay pros y contras de ello, que exploraremos más adelante, pero la mayoría de las veces preferimos la renderización del lado del cliente. La generación de sitios estáticos o SSG nos permitirá generar archivos TML estáticos para nuestro sitio web cuando construyamos nuestro proyecto Y estos archivos estáticos se sirven luego directamente a los usuarios, lo cual es rápido porque no hay necesidad de esperar a que el servidor construya nada. Funciona como sitio web estático y es útil para un sitio web de documentación donde todas las páginas están preconstruidas como archivos TML Pero como dije antes, en la mayoría de los casos, si es de aplicación angular, vamos a utilizar ninguno de estos. Usaríamos el renderizado predeterminado del lado del cliente. Pero por ahora, podemos decir que sí a esta opción para que Angler incluya todas las configuraciones requeridas para estas Y por si queremos usarlos, podemos usarlos. Entonces vamos a decir que sí escribiendo Y y luego pulsamos Enter. Ahora, esto va a tomar un tiempo para crear el proyecto. Déjame pausar el video y volver atrás una vez que esté hecho. Bien, nuestro proyecto ya está creado, y si vas al Explorador de Proyectos, vemos una opción para importar una carpeta o carpeta abierta, da clic en ella. Vamos a volver a ir al directorio y elegir el proyecto angular que acabamos de crear. Da click en él y haz clic en Seleccionar Carpeta. Entonces esto va a importar nuestro proyecto, y esta es la típica estructura angular del proyecto. Déjame guiarte rápidamente a través de lo que estamos viendo aquí. Entonces primero de, tenemos el directorio SRC. Aquí es donde vive el código real para la aplicación angular. Contiene los componentes de la aplicación, los servicios, las teselas, los activos y los archivos de configuración. Exploremos sus principales subcarpetas y archivos muy rápido. Entonces tenemos esta carpeta de aplicaciones, y aquí es donde tenemos el componente raíz. Entonces todos los archivos que comienzan con componente app dot son todos correspondientes al componente raíz. El archivo app dot component dot Ts es el archivo mecanografiado del componente raíz Y al igual que con cualquier otro componente, está apuntando a su correspondiente archivo de plantilla o STML y también a su URL de estilo correspondiente Entonces este es el STML y este es su archivo de estilo correspondiente Además de la carpeta de aplicaciones, también tenemos un montón de otros archivos. Por ejemplo, el archivo main dot TS es como el punto de entrada para nuestra aplicación. Básicamente arranca el módulo root o el módulo app Y luego también tenemos el archivo HTML índice, que contiene la propia aplicación pescador, y este es el archivo que se sirve cada vez que alguien visita nuestro sitio web por primera vez También tenemos su archivo de estilos correspondiente. Y luego tenemos el archivo JSON de punto angular. Este es el archivo de configuración principal para la CLI angular. Básicamente define la configuración para construir, probar y servir la aplicación. Así que aquí es donde podemos configurar varias opciones de compilación y configurar qué activos, estilos y scripts están incluidos, etcétera Vamos a explorar todo esto más adelante. Y luego también tenemos el paquete dot JSON. Este archivo contiene metadatos sobre el proyecto, incluyendo dependencias y scripts Así que tenemos dependencias que se requieren durante el tiempo de ejecución. Entonces también tenemos un montón de dependencias que necesitamos para el desarrollo, pero no necesariamente se requieren durante el tiempo de ejecución Por ejemplo, anglo CLI es algo que necesitamos para el desarrollo y las pruebas, pero no durante el Otro archivo importante istsconft punto Json. Es un archivo de configuración de TypeScript que define cómo mecanografiado Puedes cambiar estas opciones de compilador dependiendo de tu necesidad Y luego también tenemos los módulos de nodo. Este directorio contiene todas las dependencias, bibliotecas y paquetes instalados vía NPM Normalmente no tienes que modificar nada aquí. Se genera automáticamente. También hay un montón de otros archivos, pero no tenemos que prestar atención a esos archivos ya que no van a agregar ningún valor a nuestro proyecto o a nuestro aprendizaje. Entonces esa es una visión general rápida de lo que tenemos en el proyecto anglo Vamos a explorar todo esto en detalle en un momento posterior, pero por ahora, espero que esto nos haya dado un buen comienzo para comenzar a escribir nuestro código. Te veré a continuación. 6. 0106 Creación de componentes angulares y lanzamiento de la aplicación: Echemos un vistazo a cómo podemos generar o crear un nuevo componente en angular, y luego también te guiaré través de lo que va dentro de un componente. Entonces el comando para crear o generar un nuevo componente es NG generar componente, y luego vas a dar el nombre para el componente. Voy a llamarlo como pose. Entonces esto ha creado una nueva carpeta con el nombre del componente, y esa carpeta tiene todos los archivos específicos del componente. Abramos este archivo mecanografiado y tratemos de entender lo que entra ahí En primer lugar, tenemos este decorador de componentes que le dice a Angler que esta clase es un componente, y proporciona algunos metadatos que ayudan al pescador a entender cómo crear y mostrar Entonces, antes que nada, tenemos el selector. Eso define una etiqueta de estimación personalizada el pescador utilizará para mostrar este componente en particular Si este componente fuera a formar parte de un componente padre, este es un nombre de etiqueta que tenemos que usar. Tenemos el conjunto independiente en true. Esto permite que este componente exista sin formar parte de ningún módulo angular. Bueno, antes de angular 14, necesitamos tener todos nuestros componentes definidos dentro de un módulo. Con las últimas versiones de angular, ya no es necesario, y podemos definir componentes independientes. Si no sabes lo que es módulo, obviamente, no podemos hablar de ello en estos momentos. Lo exploraremos en otro momento. A continuación, tenemos importaciones. Aquí es donde podemos enumerar abajo todos los módulos angulares u otros componentes independientes de los que depende este componente en particular a continuación, tenemos la URL de la plantilla, y esto apunta al archivo STML que define la estructura o la interfaz de usuario de este componente En este caso, el archivo se encuentra en el mismo directorio que el componente y se denomina post dot component dot html, que corresponde a este archivo en particular. De igual manera, también tenemos esta URL de estilo que apunta al archivo SCSS que define los estilos para este componente en particular Puede escribir código SCSS en este archivo para darle estilo al componente Entonces en este momento, por defecto, pescador ha poblado algo de HTML en el archivo post TML Pero ahora mismo, no tenemos ningún estilo para esto. Pronto vamos a introducir algún código aquí. También tenemos este archivo spec dot Ts, que es un archivo de prueba para el componente. Obviamente, como eres principiante, es posible que no puedas entender este código, así que vamos a guardarlo para otro momento. Ahora intentemos lanzar esta aplicación y veamos qué va a pasar. Pero antes de eso, necesitamos incluir este componente en particular como parte del componente maestro o el componente de la aplicación. Entonces voy a copiar este selector e ir al archivo de estimación del componente app. En este momento, está poblado con algún contenido predeterminado. Simplemente podemos eliminarlo, y vamos a introducir nuestro propio código. Si notas aquí tenemos un error, eso es porque necesitamos importar este componente dentro de su archivo mecanografiado correspondiente Vamos a este componente de aplicación punto Ts, el archivo TypeScript, y luego vamos a incluir nuestro componente post El nombre del componente es el nombre de la clase. Voy a copiarlo y usarlo aquí. Si yo como mi mouse, en realidad podemos importar este componente automáticamente. Por lo tanto, esta declaración de importación es generada automáticamente por el código de Visual Studio. Ahora déjame guardar el archivo e iniciar nuestra aplicación y ver qué va a pasar. Para eso, voy a usar el comando G serve. Por lo que este comando compila su aplicación wangular e inicia un servidor de desarrollo local, que se puede acceder a través del host local Se ejecuta en el puerto 4,200, y ahí es donde podemos ver su aplicación ejecutándose Esto también tiene alguna característica de recarga en vivo, lo que significa que a medida que hagamos algún cambio en nuestro código, se reflejará instantáneamente en el navegador Así que permítanme copiar este enlace en particular. Vaya a su navegador. Y funcionó. Volvamos e intentemos cambiar el HTML. Guarde el archivo. Tan pronto como guardó el archivo, Angular ha hecho su trabajo. Y si vuelves al navegador, ahora se reflejan los nuevos cambios. Te veré a continuación. 7. 0107 publicaciones de Facebook demostración de aplicación: Creo en aprender haciendo, y según yo es la forma más efectiva de aprender. Entonces hoy, vamos a crear una aplicación tipo publicación en Facebook, y en el proceso, vamos a aprender muchas cosas en Anglo Este enfoque no solo es divertido, sino que te dará exposición a cómo usamos angel en proyectos en tiempo real. Entonces la aplicación que estás viendo es lo que vamos a construir. Funciona como una publicación de Facebook. Entonces tenemos un par de posts hechos por John Doe y Jane Smith, y estos son los posts que hicieron Entonces podemos interactuar con la publicación presionando el botón Me gusta. Una vez que hagas eso, vamos a ver un mensaje que dice que te gusta este post, y también podemos desempararlo para que no veamos ese mensaje. También podemos agregar un comentario, hacer clic en post para que ese comentario sea agregado. Muy bien, comencemos nuestro viaje para construir esta pequeña y divertida aplicación. Te veré a continuación. 8. 0108 Interpolación de enlace de datos y enlace de propiedades: Hasta el momento, hemos creado el proyecto angular y también hemos generado un nuevo componente, que es simplemente mostrar este mensaje. Si vuelves al navegador, este es un mensaje que vemos. Pronto, vamos a transformar esta aplicación en esta aplicación. Pero para eso, necesitamos una fuente de datos de donde obtengamos todos estos datos. Idealmente, se supone que debemos obtener estos datos de un servidor en formato JSON. Pero como estamos aprendiendo y para mantener las cosas simples, vamos a obtener estos datos del componente padre y luego mostrarlos en el componente hijo. Déjame mostrarte a lo que me refiero. Entonces tenemos el componente hijo que acabamos de crear, y ya tenemos el componente padre. Lo que voy a hacer ahora es que voy a poblar una propiedad o un campo en este componente con esos datos Ya tengo esos datos. Déjame mostrártelo. Voy a cambiar el nombre para posar y después voy a asignar ese valor. Entonces esto es básicamente una matriz de pose que contiene una lista de objetos que simulan la estructura de una publicación en redes sociales con detalles sobre el autor de la publicación, el contenido y sus comentarios correspondientes. La pose variable se inicializa como una matriz de objetos y cada objeto representa una publicación individual con sus propios campos de datos El campo ID es de tipo número. El campo user es de tipo string, el contenido es de tipo string, y luego también tenemos comandos, que es una matriz de cadenas. Este segmento de publicación en este momento está sosteniendo un par de objetos. Ahora, necesitamos de alguna manera obtener estos datos en el componente hijo. Veamos cómo se hace. Vamos a crear una propiedad o una variable que va a contener esos datos. Vamos a llamarlo como pose de usuario, y esto va a ser una matriz también. Haré todo el turno F para formatear el código. Demos un poco de espacio para respirar. Bien, entonces User post es el nombre de la propiedad, y es una matriz de cualquier tipo, lo que significa que puede contener una matriz de cualquier tipo de objetos de datos, cadenas, números, etcétera Y ahora mismo, es un MTRI sin ningún dato. Ahora, definamos esta propiedad en particular en esta etiqueta. Así que al igual que tenemos elementos STML con sus propias propiedades, también podemos usar nuestras propiedades personalizadas como parte de nuestros componentes Podríamos estar teniendo una etiqueta de imagen cuya propiedad podría ser ARC. Del mismo modo, tenemos esta app pose custom component tag, cuya propiedad podría usar una pose. Y ahora vamos a asignarle algún valor a esto. ¿Puedes adivinar cuál va a ser el valor? Bueno, es esta variable la que contiene los datos. Déjame copiarlo y pegarlo aquí. Ahora para echar un vistazo a lo que tiene esta propiedad de publicación de usuario, intentemos mostrarla en la interfaz de usuario. Y la sintaxis para eso es la siguiente, vamos a usar llaves para que se muestre Esto se llama interpolación. Esta es una técnica de enlace de datos de una manera que le permitirá mostrar los datos del componente en la plantilla. Esto significa que los datos fluyen de la propiedad del componente al elemento TML Déjame guardar el archivo, y volvamos al navegador para ver si ahí pasa algo . No muestra nada. Eso significa que aquí no se pobló nada. Entonces, para decirle a Angular que estamos esperando que esta propiedad sea poblada por el componente padre, necesitamos usar un decorador llamado input. Déjame mostrarte a lo que me refiero. Así. Un pescadero ya hizo el trabajo por mí de importarlo también Una vez que digo el archivo, estamos viendo un error. ¿Puedes adivinar por qué estamos viendo este error? Bueno, lo que tenemos aquí es una matriz, pero lo que estamos tratando de asignar aquí es una cadena. Pero la pregunta es, no pretendemos asignarlo como una cadena. Tenemos la intención de asignar este valor particular. Para que funcione, necesitamos usar algo llamado enlace de propiedades. Simplemente encierra esta propiedad entre corchetes, y eso solucionará el problema. ¿Por qué es eso? Esto significa que en realidad está vinculando una propiedad del componente padre. Que es pose para un componente hijo llamado pose de usuario. Y esta propiedad tiene que estar teniendo este decorador de entrada. ¿Sólo entonces sucederá eso? Ahora, vamos a guardar el archivo y volver al navegador, y todo lo que estamos viendo aquí es un par de objetos. ¿Por qué es eso? Bueno, esto se muestra como matriz de objetos JavaScript, que podrían no ser muy legibles para hacerlo legible, forma de usar JSON de tubería. Esto formateará la matriz en cadena JSON. Y esto es parte de los módulos comunes. Tenemos que importarlo, guardar el archivo, y ya no tenemos ese error. Volvamos y funcionó. Podemos mostrar la información de la publicación. Veamos cómo podemos evolucionar esto en esta aplicación. Te veré a continuación. 9. 0109 Directivas que usan NgFor para mostrar publicaciones: Ahora mismo, estamos mostrando los datos en formato JSON. Obviamente, no es así como queremos mostrarlo a los usuarios. Queremos extraer los datos de este JSON y luego envolver esos datos con etiquetas EstiML y luego eventualmente aplicar algún estilo para que podamos mostrarlos así Entonces nuestro objetivo para esta conferencia en particular es extraer el nombre o el nombre del autor y su publicación correspondiente y luego mostrarlo de manera significativa. Si volvemos al código, en este momento, esta propiedad en particular está conteniendo los datos, y solo para reiterar, estamos obteniendo los datos del componente padre debido al enlace de propiedad, donde estamos vinculando la propiedad del usuario del componente hijo a la propiedad post del componente padre. Y así es como estamos obteniendo los datos en esta propiedad en particular. Y sólo pasaría si tienes a este decorador. Ahora, intentemos mostrar los datos. Voy a poner todo en una etiqueta DV para empezar. Y aquí queremos poblar el nombre y el contenido del post Voy a mantener el nombre en la etiqueta H dos. Y entonces el post va a ir dentro de una etiqueta de párrafo. Entonces, ¿cómo vamos a obtener el nombre de usuario y el contenido? Bueno, es mediante el uso de interpolación. Vamos a usar un par de Colbrss para eso. Y aquí, vamos a decir pose de usuario. Queremos acceder al primer elemento. Pose está teniendo actualmente un par de elementos. Y estamos usando user post porque ese es un nombre de propiedad en el componente hijo. Entonces, ¿cómo accedemos al primer elemento? Bueno, si digo cero, eso nos va a dar acceso al primer elemento como usuario punto. Entonces voy a hacer lo mismo por el contenido también. Voy a configurar el contenido. Así que con la interpolación, somos capaces de enlazar los datos del componente a la plantilla Déjame guardar el archivo, y veamos cómo se renderiza en el navegador. Volvamos. Y ha mostrado el primer elemento. Y vamos a hacer lo mismo para el segundo elemento también. Voy a copiar pausar el código y aumentar el número en uno. Esto va a acceder al segundo elemento, que es éste. Volvamos y se renderizó también. Ahora, ¿qué tan práctico es escribir código así? Ahora mismo, tenemos un par de elementos en esta matriz, así podemos escribir código así. Pero, ¿y si tenemos cientos o incluso miles de elementos? Simplemente no es práctico escribir código así. ¿Tenemos una solución? ¿Hay alguna manera de dejar que Angular haga el trabajo por nosotros? La respuesta son directivas angulares. Vamos a hablar de directivas anglo más detalle más adelante Pero por ahora, nos vamos a centrar en una directiva en particular que nos va a ayudar a hacer este trabajo, y esa directiva es NG cuatro. Déjame mostrarte a lo que me refiero. Entonces voy a definir solo una etiqueta, una etiqueta de buceo. Y aquí, voy a usar un directo. Y la sintaxis para eso es la siguiente, estrella NG cuatro. Y aquí voy a decir dejar post de usuario pose. G para directiva nos permitirá iterar sobre una matriz llamada pose de usuario Y para cada elemento en la matriz de pose de usuario, crea una variable local llamada post, que representa el elemento actual en la iteración En resumen, vamos a declarar una variable para cada elemento la matriz y de especifica la matriz que estamos recorriendo, que en este caso es pose de usuario Para acceder a los datos del elemento actual, podemos utilizar esta variable. Voy a sustituir esto con post. Tangler esencialmente va a repetir esta etiqueta número de veces, igual al número de elementos en la matriz o número de elementos en la publicación del usuario Y podemos acceder a los datos de todos y cada uno de los ítems usando esta variable llamada post. Ahora bien, si te estás preguntando cómo podemos usar estas directivas en el archivo TML Bueno, cuando compilemos este código, Angular los va a evaluar y luego generar STML dinámico Entonces, si tenemos cientos de elementos aquí, esos muchos números de etiquetas Du serían creados por Angular una vez después de compilar. Navegador no entiende estas directivas. Estos son proporcionados por Angular para nuestra conveniencia. Entonces déjame guardar el archivo y echemos un vistazo al navegador y veamos si renderiza los datos, y seguro, ha funcionado. Ahora quiero darle una tarea. Sigue adelante y muestra los comentarios para cada publicación. Es sencillo hacerlo y ya conoces la solución. Espero que lo hagan. Te veré a continuación. 10. 0110 Visualización de comentarios de publicaciones: Podemos mostrar el nombre del autor y el puesto correspondiente. Ahora sigamos adelante y mostremos sus comentarios correspondientes. Además, también vamos a agregar estos botones como y post y también este campo de entrada. Para esta conferencia en particular, no vamos a dar ningún tipo de comportamiento para estos botones. Eso lo vamos a hacer en la próxima conferencia o próximas conferencias. Así que volvamos al código de Visual Studio. Espero que hayas intentado agregar los comentarios y espero que tengas éxito. Si no, solo echa un vistazo a cómo se debe hacer. Entonces solo por alguna separación lógica, voy a agregar otra etiqueta Dew. Esto podría ser útil si queremos darle estilo a secciones particulares. Y dentro de esta etiqueta Dev, voy a crear una lista desordenada donde vamos a mostrar los cometas Aquí es donde vamos a utilizar la directiva NGF para ordenar de bucle a través o iterar a través de toda la lista de comandos Entonces estoy usando exactamente la misma sintaxis. Vamos a llamarlo como comentario, y voy a copiar este campo en particular así. Y por supuesto, necesitamos obtener esto de esta variable post, que estaría sosteniendo los comandos de los elementos actuales. Publicar comandos de punto. Y dentro de esta etiqueta, podemos usar interpolación para mostrar el comentario Así, guarda el archivo. Y si vuelvo al navegador, deberíamos estar viendo los comentarios. Déjame agregar rápidamente el botón también. Voy a llamarlo como me gusta. También necesitamos un botón similar para publicar un comentario. Llámalo como post. Y entonces necesitamos un campo de entrada. Al igual que así. Guarde el archivo. Volvamos al navegador. Entonces tenemos el botón like, el campo de entrada, y es el botón post correspondiente. Por supuesto, por el momento no tenemos ningún comportamiento para estos botones. Eso es lo que vamos a hacer en las próximas conferencias. Te veré 11. 0111 Manejo de eventos para agregar comportamiento: Trabajemos ahora en este botón como. Quiero que pongas atención a cómo se está comportando este botón me gusta En el momento en que lanzemos la aplicación por primera vez, todas las publicaciones van a ser estado de no me gusta decir, para cada publicación, vamos a ver este botón llamado L. Si hago clic en el botón Me gusta de cualquier publicación, el estado debería cambiar así. El texto en el botón debería cambiar a diferente, y entonces deberíamos poder ver este texto que dice, Te gustó este post. Y si hago clic en el botón A diferencia, debería volver a cambiar al botón L. Y la forma en que vamos a lograr esto es manteniendo una lista o un conjunto de publicaciones que les gustaron. Si recuerdas, para todos y cada uno de los elementos, tenemos este campo ID. En el momento en que haga clic en el botón Me gusta de una publicación en particular, vamos a agregar su ID correspondiente a esa lista o al conjunto. De esa manera podemos hacer un seguimiento de todas las publicaciones que son del agrado, y en base a eso, podemos mostrar el texto en el botón así como el texto que estamos viendo junto a él. Entonces veamos cómo se hace. Entonces aquí voy a introducir un nuevo set que mantiene una lista de publicaciones que me gustaron. Voy a decir set. Esto va a mantener un conjunto de números porque el campo ID es de tipo número. Y luego voy a introducir un método llamado like post. Y luego le vamos a mandar el ID del puesto. Que es de tipo número. Este método no va a devolver nada, entonces decimos vacío. Entonces vamos a tener condición que verifiquemos para ver si este punto como post dot tiene este ID enviado. Si ese es el caso, entonces queremos eliminar ese ID de la lista de publicaciones que me gustaron. Este método se activaría cada vez que pulsamos ese botón. Si hacemos clic en el botón Me gusta, vamos a agregar esencialmente ese ID en esta lista o el conjunto y viceversa. Si hacemos clic en el botón de diferencia, entonces verificaremos para ver si el post ya está presente en el post like. En caso afirmativo, lo eliminaremos. Así que aquí, vamos a establecer este post like, dot delete, post ID, así. Entonces tendremos el bloque else y aquí solo agregamos el ID del post. Sé que te lleva algún tiempo hundirte esto, pero todo tendrá sentido en un tiempo. Vamos a la plantilla. Aquí, vamos a hacer enlace de eventos angulares. Entonces en el momento en que hagamos clic en este botón, adivina qué, vamos a llamar a ese método como post, y luego pasar el ID de post actual, me gusta solo para reiterar esta variable post contendrá los datos del elemento actual, y así es como obtuvimos el ID. Y aquí, vamos a usar la interpolación para especie de verificación para ver si la post marea está presente en la publicación que me gusta, y en base a eso, queremos mostrar el texto Led post dot tiene comprobante para ver si tiene el post enseñado ID. Quiero usar el signo de interrogación. Si está ahí, eso significa que post es como, y ahora queremos mostrar el texto a diferencia. De lo contrario, el post no está presente en la lista, por lo que queremos mostrar el texto como like. Déjame poner esto dentro del DVTag Y voy a hacer todo Shift F para formatear nuestro código Y junto a ella, voy a introducir una etiqueta span, y aquí es donde vamos a rellenar este texto Aquí, voy a usar NG para comprobar si la idea de post está presente en la lista de post me gusta o el post like dot tiene, y voy a enviar el post punto ID así. Si ese es el caso, queremos renderizar esta etiqueta span mostrando este texto. A U me gusta este post. Así. Guardemos el archivo y veamos si funciona. Me va a gustar este botón, y en el momento que presione ese botón me gusta, ha activado el evento click de ese botón, que se llama este método, y comprobará para ver si esta condición es verdadera. En este caso, es falso. Por eso siguió adelante y agregó ese ítem en particular o el ID en la lista de publicaciones. Y en base a eso, estamos cambiando el texto en el botón así como este texto en particular. Vamos a diferencia, y parecía estar funcionando muy bien. Entonces, cuando no me gustó, esencialmente hemos eliminado ese ID de publicación en particular de la lista, y en base a eso, estamos renderizando la etiqueta span así como esto Por lo que a esto se le llama manejo de eventos en angular. Espero que tenga sentido. Te veré a continuación. 12. 0112 Encuadernación bidireccional para agregar comentarios a una publicación: Bien, intentemos ahora agregar la función add command a nuestra aplicación. La forma en que vamos a lograrlo es mediante el uso de una combinación de enlace de dos vías y manejo de eventos. Déjame explicarte a lo que me refiero. Tenemos un campo de entrada para todas y cada una de las publicaciones. Siempre que escribo algún texto aquí, quiero que una propiedad en el componente se actualice instantáneamente Podemos lograrlo con un enlace de dos vías. Cuando el usuario haga clic en el botón de publicación, vamos a llamar a un método con el ID de publicación correspondiente y dentro del método, intentaremos encontrar esa publicación, y luego eventualmente intentaremos empujar ese comentario en la lista de sus comandos. Aunque estamos viendo un par de comentarios aquí, podríamos estar empujando un nuevo comentario a esta lista. Entonces echemos un vistazo a cómo se hace. Entonces ya tenemos el campo de entrada. Primero llenemos algún texto predeterminado. Si volvemos, vemos texto por defecto llamado add a comment. Entonces vamos a agregar eso primero. marcador de posición, añadir un comentario. Así. Y ahora aquí voy a usar una de las directivas anglo Para encuadernación de dos vías, se llama NG moral. Y se va a envolver con combinación de paréntesis y corchetes Te voy a explicar lo que está pasando aquí en sólo un rato. Y aquí voy a decir nuevo comentario. Necesitamos tener esta propiedad agregada en el componente. Voy a copiarlo y crear una nueva propiedad aquí. Va a ser de tipo cadena porque eso es lo que ingresa el usuario. Por defecto, no va a tener nada. Guarde el archivo. Esto pertenece al módulo Formularios, por lo que necesitamos importar guardar el archivo y ya no tenemos el error. Entonces, el modelo ng es la directiva anglo utilizada para unión de dos vías para todos estos elementos de formulario El campo de entrada ahora está enlazado a la nueva propiedad de comando en el componente. Cuando el valor del campo de entrada cambia, cada vez que el usuario escribe algo, actualiza automáticamente el valor del nuevo comentario. Esta propiedad se actualizaría instantáneamente. Pero por qué esto se llama vinculación de dos vías es algo que entenderás al final de esta conferencia. A continuación, vamos a crear un método que corresponda a este botón de post. Entonces vamos a tener un evento click como con este botón, voy a copiar esto y aquí vamos a cambiar el nombre del método a Agregar comentario, y una vez más, vamos a enviar el ID del post. Vamos a crear este método. De nuevo, permítanme copiar este código para ahorrar algo de tiempo. Pero vamos a cambiar la lógica. En primer lugar, intentaremos encontrar la publicación por el ID de correo. Entonces hagámoslo. Voy a crear un post constante igual a este usuario post dot find. Estoy tratando de encontrar una publicación con ese ID de publicación, y esta es una sintaxis para eso. Es igual a igual, igual a ID de poste. Así que el método find se utiliza para buscar en el array post usuario, pero el post, cuyo ID coincide con el ID de post proporcionado como argumento. Entonces tendremos una condición para ver si la publicación realmente existe y no está indefinida. Entonces si el post existe y este nuevo comentario dot trim, solo entonces queremos agregar el comentario? Entonces, si la publicación no está indefinida y el nuevo comentario se actualiza con algún valor después de recortar los espacios en blanco al final, entonces realmente queremos empujar ese comentario a entonces realmente queremos empujar ese comentario a la lista de comentarios de esta publicación en particular Voy a decir post punto comandos punto. Empuje este punto Nuevo Comando. Y luego finalmente, una vez que empujamos el comando, ya no queremos mostrar ese texto en el campo de entrada. Entonces para eso, voy a actualizar la nueva propiedad command y hacerla vacía, guardar el archivo. Yo también voy a salvar esto. Volvamos a ver si la aplicación se comporta como se esperaba . Y funcionó. Podemos agregar un nuevo comando. Ahora bien, ¿por qué esto se llama unión de dos vías? Al notar, en el momento en que algo se actualiza en este campo de entrada, lo mismo se reflejaría en este campo también. También es cierto al revés. En el momento en que actualizamos esta propiedad en particular, lo mismo se refleja aquí también. Los datos fluyen esencialmente no solo de la plantilla al componente, sino también al revés. Los datos también se están actualizando y son volados desde el componente a la plantilla Mientras que en caso de interpolación, ese no es el caso. Se llama enlace unidireccional donde los datos simplemente fluyen del componente a la plantilla. Entonces ya no tenemos el texto aquí. Espero que tenga sentido. Te veré a continuación. 13. 0113 Mini clase de SCSS: Esta va a ser una clase minimster en SCSS o SASA CSS SCSS es como una versión evolucionada de CSS. Se ve similar al CSS normal, pero con características adicionales para hacer que nuestro estilo sea más eficiente. Pero SCSS es más popular porque es totalmente compatible con CSS, lo que significa que puedes tomar cualquier archivo CSS existente y comenzar a agregar características de SCSS sin cambiar En esta conferencia, vamos a hablar todas las características esenciales que necesitas conocer junto con ejemplos. Primero hablemos de variables. Echa un vistazo a esta tradición de estilo CSS. Estamos usando exactamente el mismo valor o el color para el atributo color tanto en H uno como en H dos. Ahora bien, esto podría ser un problema porque si tuviéramos que actualizar este color, tendríamos que hacerlo en ambas ubicaciones. Ahora bien, en este caso, son solo un par de ubicaciones, así que quizá no tengamos ningún problema. Pero, ¿y si actualizáramos el color en múltiples ubicaciones? Bueno, eso se convierte en un trabajo tedioso y es propenso a errores. En SCSS, tenemos variables. Aquí estamos tratando de definir una variable llamada color primario, cuyo valor es el color en sí, y estamos usando esa variable a través de múltiples ubicaciones. Así que cada vez que actualicemos el valor del color primario, se reflejará en todas las ubicaciones donde sea que estemos usando esa variable. También podemos usar propiedades personalizadas CSS o variables CSS, pero no son tan flexibles como las variables SCSS en términos de lógica de escritura porque SCSS nos permite escribir código con características avanzadas como bucles, condiciones y funciones que no son posibles con las propiedades personalizadas de CSS Sin embargo, hay una ventaja significativa con las propiedades CSS, que es poder actualizar los valores dinámicamente durante el tiempo de ejecución. Mientras que en SCSS, las variables son estáticas y solo funcionan en tiempo de compilación En otras palabras, el archivo SCSS eventualmente se compilaría a un archivo CSS equivalente para que los navegadores puedan entender No podemos cambiar sus valores durante el tiempo de ejecución cuando se ejecuta la aplicación. Luego viene la anidación. En CSS, debemos escribir selectores repetidamente, aunque estén relacionados, tal y como estás viendo aquí Mientras que en CSS, se permite el anidamiento, lo que hará que el código sea más legible y más fácil de mantener también Y con sólo mirar este código, podemos decir cómo se vería su STML correspondiente Debería verse algo así. Tenemos el elemento NAV cuyo elemento hijo es unordered list o UL, cuyo elemento hijo es el elemento list, la etiqueta LI se sigue la misma estructura en el estilo, que la hace más legible y mantenible A continuación vienen parciales. CSS sí admite la regla de importación, pero cada entrada da como resultado una solicitud STDB adicional, lo que puede ralentizar el tiempo de carga Por otro lado, SCSS nos permitirá dividir las hojas de estilo en parciales e importarlas sin solicitudes SDP adicionales, ya que eventualmente se compilan en un solo archivo CSS Todos los archivos que ves aquí que empiezan con guión bajo o parciales, y estamos usando la instrucción import para importarlos en el archivo SCSS principal A continuación viene los mixins. En CSS, si estás usando exactamente el mismo estilo para múltiples elementos, tendrás que copiar y pegar manualmente el código. Mientras que en SCSS, tenemos mixins, lo que nos permitirá crear bloques de estilos reutilizables y reutilizarlos a lo largo de nuestra hoja de estilos De esa manera, podemos evitar repetición y reutilizar los estilos existentes. Similar a escribir funciones en programación. Y en este caso, tenemos la mezcla en estilo de botón con nombre, y estamos incluyendo esa mezcla en múltiples ubicaciones. Y cuando lo hacemos, también estamos pasando algunos argumentos. En este caso, los argumentos son el color de fondo y el color del texto. Por defecto, eran azules y blancos, pero podemos sobrescribirlos enviando nuestros propios argumentos Entonces para el botón uno, estamos enviando blanco y negro, y para el botón dos, estamos enviando rojo y blanco. A continuación viene la herencia. En CSS tradicional, si tenemos que usar exactamente el mismo estilo en múltiples ubicaciones, una vez más, tenemos que simplemente copiar y pegar. Pero un CSS nos permitirá extender un selector a otro, y de esta manera podremos reutilizar los estilos existentes. A continuación vienen los bucles. Echa un vistazo a este código CSS tradicional. En contraste, echemos un vistazo al código SSS, donde hemos utilizado loop para generar dinámicamente estos estilos para nosotros. El director FOR crea un bucle y el dólar I se utiliza para insertar el número de iteración del bucle actual tanto en el nombre de la clase como en el valor de la propiedad en este caso Este código generará exactamente el mismo estilo que ves en el lado izquierdo durante el tiempo de compilación. A continuación vienen las funciones. CSS tiene un conjunto limitado de funciones integradas como Calc, RGB o URL Sin embargo, no puedes definir tus propias funciones en CSS. Mientras que en un CSS, nos permitirá crear funciones personalizadas para realizar operaciones como la manipulación del color, cálculos, básicamente, cualquier cosa que te gustaría hacer. Entonces aquí tenemos la función llamada calcular ancho, y luego estamos llamando a esa función enviando algún argumento. En este caso, estamos enviando 100 píxeles, que se multiplicarían por 1.5, y se devolvería el mismo valor. A continuación vienen las declaraciones condicionales. Echa un vistazo a este código. Como puede ver, SCSS permite lógica condicional con declaraciones I Ls y elseif Entonces aquí estamos comprobando para ver si la variable theme es oscura. Si, tenemos un estilo específico para eso, se, estamos introduciendo un estilo diferente. Luego vienen las operaciones matemáticas. CSS tiene operaciones matemáticas muy básicas que puedes realizar usando Calc, pero SCSS permite operaciones matemáticas complejas directamente sin necesidad de ningún método Calc Eso es todo sobre SESS y enhorras. Acabas de graduarte de la clase magistral de SCSS. Te veré a continuación. 14. Revisión de Skillshare Hacer: Hola, Este es tu instructor para este curso y espero que estés disfrutando mucho del viaje hasta ahora. El motivo de este video es básicamente para pedirte que solo te tomes un par de minutos para calificar y revisar este curso. Esto es realmente importante porque dependiendo del número de calificaciones y reseñas que reciba el curso, equipo de Skillshare decidirá si mantener el curso en esta plataforma o eliminarlo Desafortunadamente, pocos de mis cursos fueron removidos. Y muchos estudiantes se vieron impactados por eso, porque carecían de suficientes críticas y calificaciones Si no es un gran favor, solo tómate un par de minutos y haz la lectura para este curso y también describiendo un par de líneas, lo que has aprendido hasta ahora. Y si te ha beneficiado de alguna manera u otra, eso va a ayudar a que este curso mantenga vivo en esta plataforma. Y probablemente no vas a perder el acceso a este curso también. Espero que lo haga. Muchas gracias y nos vemos a continuación. Que tengas un gran día por delante. 15. 0114 Diseñar nuestra aplicación de publicaciones con SCSS: Seguí adelante e introduje tyling para nuestra aplicación para que se vea así Ya que ahora estás familiarizado con SCSS, deberías ser capaz de comprender lo que está pasando aquí Básicamente, he introducido atributo class para todas las etiquetas DV en el HTML, y también he proporcionado su estilo correspondiente. Y si te das cuenta, estamos tratando de seguir e imitar la misma estructura del propio HTML Así que tenemos la etiqueta Dv dentro de la cual tenemos un par de etiquetas Du hijo, y estamos siguiendo la misma estructura. Entonces tenemos el selector DevTag padre. Post es el nombre de la clase que hemos usado aquí. Dentro del cual estamos tratando seleccionar los sub divs, acciones y comentarios Y hemos proporcionado estilismo para sus elementos. Quiero que se tome un tiempo y repase este archivo y trate de entender lo que estamos tratando de hacer aquí. También he puesto algunos comentarios para que entiendas. Y no creo que tenga mucho sentido para mí guiarte a través de cada uno de estos atributos porque honestamente, estilismo es una de las cosas más fáciles de hacer. Y además, esto no se considera realmente como una habilidad técnica. Espero que tenga sentido. Te veré a continuación. 16. 0115 Servicios angulares: Imagina que estás construyendo un sitio web de comercio electrónico usando angular. Ahora, como parte de tu proyecto, podrías estar teniendo estos componentes, componente de perfil y componente de órdenes. El componente de perfil tiene como objetivo mostrar el perfil de usuario, y el componente de pedidos tiene como objetivo mostrar los pedidos históricos realizados por el usuario. Por supuesto, en un sitio web de comercio electrónico, podrías estar teniendo cientos de componentes. Pero por el bien de este ejemplo, centrémonos en estos. Podría haber ciertas funcionalidades que van a seguir siendo comunes en múltiples componentes. En este caso, es posible que necesitemos autenticación residiendo en ambos componentes. Podríamos tener algunas líneas de código para autenticar al usuario, y este código de autenticación enviará la solicitud al servidor, asegurándose de que el usuario es realmente quien dice ser Ahora bien, esta es una forma muy ineficiente de manejar este escenario. ¿Puedes adivinar por qué? Bueno, antes que nada, estamos teniendo el mismo código diseñando en múltiples componentes, así que eso es repetición. En segundo lugar, estamos haciendo múltiples solicitudes, lo que drenará los recursos del servidor. Deberíamos poder enviar solo una solicitud y luego almacenar ese estado en algún lugar para que no tengamos que seguir enviando la solicitud para autenticar al usuario Precisamente por eso necesitamos servicios angulares. En este escenario, podríamos introducir un servicio llamado servicio AT, que tendrá código específico de autenticación. Vamos a mover el código de autenticación de los componentes a este en servicio para que pueda permanecer en un solo lugar y los componentes solo harán uso del servicio AT para conocer el estado de autenticación del usuario. Pero es el en servicio el que en realidad enviará la solicitud al servidor para autenticar al usuario Una vez que lo haga, también va a mantener un estado. Esencialmente, dentro del servicio, podríamos tener una propiedad para almacenar el estado de autenticación del usuario. Solo va a enviar la solicitud una vez y luego va a actualizar el estado o el valor de la propiedad. Los componentes solo echarán un vistazo al valor de la propiedad y en base a eso, sabrán si deben ser renderizados o no. Entonces, esencialmente, estamos usando servicios para obtener datos o para interactuar con el servidor, manteniendo el estado, como acabas de ver También podríamos tener funciones de utilidad que residen en el servicio AT. Entonces, si tienes alguna función de utilidad como transformación de datos o la validación de la entrada del usuario, por ejemplo, puedes tenerlas todas en un solo lugar dentro del servicio Y, por supuesto, también podríamos tener la lógica empresarial. En este caso, básicamente estamos comprobando si el usuario tiene suficientes permisos o no. Pero, ¿cuáles son las ventajas de este enfoque? Bueno, antes que nada, la reutilización de código, lógica se puede escribir una vez y usar en múltiples componentes Separación de preocupaciones, que mantendrá los componentes enfocados en la lógica de presentación, mientras que la lógica de negocios y la obtención de datos se trasladan a los servicios Esto también mejorará la veracidad de los servicios porque no tratan con ninguna lógica de interfaz A continuación, vamos a introducir el servicio en nuestra aplicación de publicaciones de Facebook. Te veré a continuación. 17. 0116 Configuración de endpoints y servicio de datos: Por el momento, estamos obteniendo todos los datos de publicación del componente padre. Este no es un escenario realista. Necesitamos estar obteniendo estos datos del servidor real, y ¿adivina qué? En este momento no tenemos ningún servidor que sirva estos datos. Idealmente, se supone que debemos crear un servidor en la inscripción en la nube y luego escribir algún código del sitio del servidor que realmente expondrá esta API para enviar estos datos, pero tengo una mejor solución a este problema. Simplemente va a usar una de las herramientas existentes en línea. Me encontré con este sitio con una búsqueda rápida en Google, y esto parece estar resolviendo el problema. Entonces el nombre del sitio web es bispto.com slash MOC guión API. Y como su nombre indica, nos permitirá crear una API simulada que no tengamos que tomarnos la molestia de crear el servidor, escribir el código, bla, bla, bla Tiempo de esta grabación, este sitio web está activo. Si no puedes ver este sitio en vivo con una búsqueda rápida en Google, puedes encontrar fácilmente muchas de esas herramientas. Entonces lo que voy a hacer ahora es que voy a copiar los datos de esta publicación. Antes de servirlo, necesitamos asegurarnos de que esté en el formato JSON adecuado. Para eso, estoy usando otra herramienta, que de nuevo es algo que me encontré con una búsqueda rápida en Google. Entonces voy a pegarlo aquí y dar clic en Procesar. Si tienes curiosidad sobre el nombre del sitio web, ese es jsonformata.usccept.com Entonces al parecer, este no es formato adyacente. Se supone que tenemos citas dobles para las claves y también para los valores Por lo que ha hecho el trabajo por nosotros. Voy a copiarlo y voy a pegarlo aquí. Esencialmente, estamos pidiendo a esta herramienta que envíe estos datos como respuesta cada vez que envío la solicitud. Y aquí voy a decir pose. Si el punto final de URL o si el UR termina con pose de slash, es entonces queremos que esta herramienta envíe estos datos Asegúrate de que esto sea 200 bien y haz clic en Crear servidor Mock. Para asegurarme de que esté funcionando, voy a copiar esto. Déjame ampliarlo para ti. Voy a copiar esta URL, pegarla aquí, posar, y podemos ver la respuesta que necesitamos. Continuemos a partir de la próxima conferencia. 18. 0117 Obtención de datos del servicio: En esta conferencia, vamos a echar un vistazo a cómo podemos obtener los datos de este servidor para que podamos hacer algo con él. Entonces, antes que nada, sigamos adelante y creamos un servicio, y el comando para eso es NG generar servicio. Nos pedirá que demos un nombre para el servicio. Voy a llamarlo como pose. Así que Angler ha creado estos dos archivos. Déjenme abrir esto. Voy a crear una variable que va a contener esa URL. Privado, llamémoslo como URL de API es igual, y voy a copiar esta URL. A continuación, voy a usar el constructor para inyectar la dependencia del cliente STTP Déjame mostrarte a lo que me refiero. Ya tenemos el constructor creado. Y si te estás preguntando qué es un constructor, es básicamente un método especial que se llama automáticamente cuando se crea una instancia de la clase. Entonces, cuando se crea la instancia de post service, Angler automáticamente llamará al constructor Normalmente usamos constructor para inyectar las dependencias. Déjame mostrarte a lo que me refiero. Voy a decir cliente privado STTPE TDP El cliente STDP es esencialmente un archivo mecanografiado, y tendrá algún código para enviar la solicitud al servidor y recuperar los Así que básicamente usamos esto para hacer una solicitud HDP al servidor Y al especificarlo en el constructor, sistema de inyección de dependencia angular inyecta automáticamente una instancia del cliente TDP cada vez que se crea Con esto, no tenemos que crear manualmente una instancia de iluminación astrotípica Podemos pedirle a Angular que nos inyecte la instancia. Pero para poder crear realmente la instancia de cliente astrotípico, necesitamos que angular lo sepa con la ayuda del proveedor Déjame mostrarte a lo que me refiero. Voy a abrir app config dot Ts, y aquí ya tenemos algunos proveedores. Además de estos, voy a especificar proporcionar cliente ATT. Al igual que así. Entonces, qué va a hacer esto, pocas palabras, estamos diciendo, Hey, angular, siempre que un componente o un servicio necesite una línea estodípica, por favor asegúrese de que se le proporcione Eso es lo que esto significa. Ahora, vamos a profundizar en la comprensión qué es la inyección de dependencia, patrón singleton, etcétera en el curso angular principal Pero por ahora, espero que tengas una idea. Al especificar proveedor, le estamos pidiendo a Angular que cree una instancia de línea stodípica, y al especificarla como parte del constructor, le estamos pidiendo a Angular que inyecte la instancia de next, voy a crear un método que realmente hará el trabajo de obtener los datos del servidor Voy a llamarlo como pose de buscar, así. Voy a decir observable A Así que este método básicamente devuelve observable que emite una matriz de cualquier tipo de elementos Nuevamente, vamos a profundizar en estos conceptos más adelante Pero por ahora, piensa en esto como algo que nos va a generar datos. Y aquí voy a devolver este STP punto G A. Vamos a especificar la URL API así La G es esencialmente el método de cliente tradipic que realiza una solicitud Stdpgt a la URL especificada, y estamos esperando una matriz de cualquier tipo Vamos a guardar el archivo. Guardemos también este archivo. Continuaremos a partir de la próxima conferencia. 19. 0118 Suscripción a datos y población: Bien, sigamos adelante y llenemos los datos en la interfaz de usuario. Para eso, voy a abrir el archivo post componente punto Ts. Actualmente, estamos obteniendo los datos del componente padre con enlace de dos vías. Entonces como ya no vamos a obtener los datos del componente padre, voy a deshacerme de esto, y eso debería dar un error en el componente padre. Así que vamos a abordarlo rápidamente. Voy a quitar esto de aquí. Y ya no necesitamos estos datos en el componente padre porque estamos obteniendo del servidor. Guarde el archivo. Volvamos al componente de post. Y aquí, por el momento, no tenemos constructor. Permítanme crear uno porque queremos inyectar el servicio en este componente. Constructor privado post service post service. Esto también nos ha importado automáticamente el servicio de correos . Guarde el archivo. Con esto, le estamos pidiendo a Angler que inyecte la instancia de servicio postal Entonces voy a usar uno de los métodos de pescadores llamados NG en así que Gate es uno de los anzuelo del ciclo de vida de los pescadores Básicamente, se llama una vez después de que angler haya inicializado todas las propiedades enlazadas a los datos de los componentes Normalmente, este es un lugar donde inicializamos datos de componentes o incluso para realizar tareas como recuperar datos del servidor En este caso, vamos a utilizar este método para obtener los datos usando el servicio angular. Así que aquí voy a decir este servicio de correos, y vamos a llamar al método que acabamos de crear fetch post dot subscribe Te voy a explicar lo que estamos haciendo aquí en sólo un rato. Y luego voy a decir pose. Esta pose de usuario punto, va a poblar la propiedad es igual a pose Guarde el archivo. Cuando llames al método subscribe, haré todo el Shift F para formatear el código. Cuando llamas al método subscribe, le estás diciendo a Angeler que ejecute el SDDPRquest y te dé los resultados cuando esté listo Si vuelvo, se puede pensar en observable como un flujo de datos que envía los datos a lo largo del tiempo Imagínelo como una tubería que puede enviar múltiples valores como números u objetos, o cualquier otro dato uno tras otro. Y estos valores no llegan todos a la vez. Vienen cuando están listos, ya sea inmediatamente o después. Y para realmente recibir los datos de un observable, es necesario suscribirse a él. Piense en suscribirse como adjuntar un oyente que espera y reacciona cada vez que llegan nuevos datos a Y cuando te suscribas, decidirás qué hacer con cada dato, el sentido absorbablele Ahora puede que tengas una pregunta. ¿Por qué no podemos simplemente recuperar los datos sin este concepto de observable y suscribirnos Bueno, los datos pueden tardar algún tiempo en llegar. Mientras tanto, queremos que nuestra aplicación también se esté ejecutando. Básicamente estás permitiendo que la aplicación continúe ejecutándose mientras esperamos la respuesta. Y una vez que los datos están listos, la suscripción los maneja sin bloquear la interfaz de usuario. Déjame guardar el archivo y ver si nuestra aplicación aún funciona. Bien. Por el momento, supongo que nuestra aplicación no se está ejecutando. Volvamos y hagamos NG Sv. Volvamos al navegador. Y ha funcionado. Espero que tenga sentido. Te veré a continuación. 20. 0119 Directivas personalizadas angulares Directivas de Strucutal y Attibute: Para entender el uso directo y angular, es muy importante que entiendas lo que es un modelo de objetos de cúpula o documento. El domo es como un mapa que representa todo el contenido de una página web de manera estructurada. Bueno, ¿qué significa esto? Imagina que este es tu HTML. Cuando el navegador carga este HTML, lee el archivo TML línea por línea y construye una cúpula que se parece a esto Tiene una estructura similar a la del propio HTML siendo el documento el nodo padre, y tiene el STML como nodo hijo, cuyos nodos hijos son head y body De ello se deduce esa estructura de árbol, y generalmente los navegadores crean cúpula para que JavaScript pueda acceder y manipularlo. JavaScript puede seleccionar, modificar, agregar o eliminar los nodos en la cúpula. JavaScript no pasa directamente HTML Raw. En realidad manipulan la cúpula para obtener los resultados deseados o para obtener la vista deseada. Ahora vamos a entender lo que es una directiva en angular. Echa un vistazo a este código. En este código, estamos tratando de recorrer toda la lista de elementos y mostrarlos en formato de lista. Suponiendo que esta es la lista, esencialmente estamos mostrando todos estos elementos en formato de lista desordenada Ahora bien, los navegadores no entienden esta directiva NG cuatro, es directiva anglo específica navegador solo entiende HTML y solo puede ejecutar JavaScript. Entonces, cuando realmente construimos un proyecto que tiene este código, Angular compila este archivo y genera JavaScript equivalente para que los navegadores lo entiendan Este JavaScript esencialmente hace la misma tarea de recorrer todos los elementos y hacer una lista de elementos con etiqueta Ai y luego finalmente crear un elemento de lista desordenado y agregar todos los elementos de la lista a Cuando este JavaScript se ejecuta en el navegador, la estructura de cúpula resultante podría verse algo así, lo que equivale a este STML Ahora bien, dado que esta directiva NG cuatro está manipulando con la estructura de cúpula, ésta entra dentro de la categoría de directiva estructural Por lo que NG cuatro se denomina como una directiva estructural porque manipula con la estructura de la cúpula Y normalmente, las directivas estructurales siempre comienzan con un astérix, como en el caso de G cuatro Ahora hablemos de directivas de atributos. Las directivas de atributos se utilizan para modificar la apariencia o el comportamiento de los elementos. No alteran la estructura de la cúpula, sino que afectan cómo se ve o se comporta el elemento. En este caso, estamos usando el estilo NG. Esta es una directiva angular que aplica estilo CSS en línea dinámicamente a un elemento. Se espera un objeto donde es o CSS propiedades y valores o los estilos a aplicar. En este caso, estamos teniendo una condición en la que estamos comprobando para ver si es red propiedad en el componente se establece en true o false, y en base a eso, estamos eligiendo ya sea rojo o azul. Si Es rojo se establece en true, entonces elegiríamos el valor como rojo. Si es falso, entonces elegiríamos el valor como azul. Construyendo el proyecto y después de compilar este archivo, el JavaScript resultante podría verse así Solo estamos llamando al método llamado update style, dentro del cual estamos comprobando para ver si la propiedad ese red está establecida en true o false, y en base a eso, estamos poblando el valor de color con rojo o azul Y este método se ejecutaría siempre que haya un cambio en la propiedad ese red. Ahora bien, este es un código JavaScript rudo. Este no es el código exacto. Pero el hecho de que en realidad no estemos manipulando o agregando o eliminando elementos en la estructura de cúpula, estilo G es un ejemplo de directiva de atributos Ahora puede haber casos en los que los angulares construidos en directores pueden no ser suficientes Necesitamos una funcionalidad diferente. En cuyo caso, angular nos permite crear nuestras propias directivas. Echemos un vistazo a un ejemplo de lo mismo. En este caso, tengo una directiva personalizada para la que he escrito mi propio código. Te voy a mostrar ese código en sólo un rato. Pero lo que estamos tratando de hacer aquí es que tenemos la etiqueta DIV, y queremos renderizar su contenido solo si el usuario está conectado usuario o solo después de que el usuario esté autenticado Como pueden ver, la directiva está empezando por Asterix. Eso quiere decir que se trata de una directiva estructural. Se va a manipular la estructura de la cúpula. Ahora, suponiendo que se ha iniciado sesión en propiedad de usuario se establece en true en el componente, vamos a hacer que este texto en particular sea bienvenido nuevo usuario valorado. Ahora echemos un vistazo al código de esta directiva, App show si ha iniciado sesión, y así es como podría verse. Podemos simplemente crear otro archivo mecanografiado con este código o ejecutar un comando rápido, y Angler realmente creará este archivo con algún Entonces inicialmente, tenemos el decorador de directivas, que le dice a Angular que esta es una directiva personalizada, cuyo nombre es Appshow si está conectado Y aquí dentro, tenemos esta sección de código. Ahora bien, este código es una combinación de dos cosas diferentes. Uno, tenemos la propiedad llamada app show si se inicia sesión con decorador de entrada, y en segundo lugar, también es un método setter para esa Entonces el decorador de entrada marca Appshow que inicié sesión como una propiedad de entrada de la directiva, lo que le permitirá aceptar un valor de la plantilla de componentes donde se usa la directiva En este caso, va a aceptar cualquiera que sea el valor que le asignemos sea el valor de bullying logueado, verdadero o falso. Entonces dijimos, establecer app show si se ha iniciado sesión como si estuviéramos definiendo un método, y esto define un conjunto de método para la app show if logged in property. Esto significa que cada vez que se asigna un nuevo valor a la directiva con true o false, este método se ejecuta con ese valor como argumento. También estamos pidiendo a angular que inyecte un par de dependencias. Ver contenedor f y plantilla ref. Básicamente, cada vez que aplicas un directorio a un elemento Stem específico, como DIV en este caso, se crea el contenedor de vista ref para ese elemento específico, y usamos ese objeto para insertar el contenido. En este caso, vamos a usar view container f para insertar algo de contenido en esta etiqueta div. Y el césped plantilla en realidad contiene la estructura de contenido de la etiqueta div, incluyendo cualquier STML anidado El troof plantilla es una referencia al contenido del div que tiene esta directiva En este caso, el césped plantilla esencialmente contiene todo el contenido dentro de esta etiqueta div. Y como puedes ver, dentro de este método, después de verificar el flag está logueado, y si es cierto, entonces esencialmente estamos usando view container para especie de poblar el contenido dentro de la etiqueta Dv, y lo estamos llenando con el contenido en la plantilla ref Y si no es cierto, sólo estamos diciendo, despejar todo lo que significa no mostrar nada. Estoy bastante seguro de que esto en realidad puede sonar muy confuso. Cuando echemos un vistazo a un ejemplo de directiva personalizada en próximas conferencias, definitivamente tendrás una mejor idea. Ahora echemos un vistazo a un ejemplo de directiva de atributos personalizados. Y aquí tenemos esta directiva personalizada llamada app Highlight. Y como su nombre indica, simplemente vamos a resaltar el texto en este elemento P. Y así es como se vería el código de directiva personalizado. Entonces tenemos oyentes de host, que escucha los eventos en el elemento host En este caso, escucha el mouse enter y deja eventos para aplicar o eliminar el resaltado Y para aplicar realmente el estilo, estamos pidiendo a Angler que inyecte par de dependencias elemento ref y renderer elemento f realmente proporcionará una referencia directa al elemento dom, en este caso, la etiqueta P, y renderer dos le permite manipular de manera segura el dom Así que dentro de este método de resaltado, esencialmente estamos usando renderer para establecer este estilo Tiene dos argumentos. El primero es el elemento de referencia, y el segundo es el estilo que queríamos aplicar. A continuación, vamos a mejorar nuestra aplicación de publicaciones en Facebook, introduciendo una directiva personalizada. De esa manera entenderás mejor. Pero como tarea, quiero que experimentes con cualquiera de las construidas en anglo existentes directivas construidas en anglo existentes, al menos tres de ellas. Espero que lo hagan. Te veré a continuación. 22. 0121 Tubos en tubos angulares empotrados Tubos personalizados: Las tuberías en Anglo transforman los datos de entrada en el formato de salida deseado Básicamente, toman datos como entrada y devuelven una versión transformada de los mismos. La mejor manera de entender esto es echando un vistazo a un ejemplo. Éstos son algunos de los construidos en pipas en Anglo. Aquí estamos usando las tuberías en mayúsculas y minúsculas. La tubería en mayúscula se usa para convertir la cadena en mayúsculas y la tubería en minúscula se usa para convertir la Tener la tubería JSON, que muestra un objeto o una matriz en formato JSON para que pueda ser legible por el usuario. Por lo general, utilizamos esta tubería para fines de prueba. A continuación, tenemos la tubería de corte, que extraerá una porción de una matriz o una cadena. La tubería de corte también es un ejemplo de una tubería parametrizada, lo que significa que la tubería toma argumentos adicionales para modificar su comportamiento El corte se utiliza con dos parámetros. Cero es el índice de inicio y siete es el índice final. Del mismo modo, también podemos mostrar una porción de una matriz usando slice pipe. También podemos combinar múltiples pipas en una sola expresión como estás viendo aquí. En este caso, estamos tratando de combinar tanto tuberías en mayúsculas como rebanadas, y la salida resultante es combinación de ambas Angular también nos permite crear tuberías personalizadas. En este caso, estamos creando una tubería personalizada que invertirá la cadena. Podemos ejecutar un comando angular para crear el código esqueleto, y esta clase aquí está implementando la transformación de tubería, lo que nos permitirá proporcionar el comportamiento para el método transform. Este método de transformación está aceptando un parámetro que es de tipo string. Y dentro de este método, estamos usando alguna lógica para básicamente revertir la cadena. Y así es como vas a usar esa pipa en la plantilla. Básicamente, el texto angular se mostraría al revés. Para crear esta tubería, este es el comando que necesitamos ejecutar. Motor generar tubería inversa, y esto creará el código esqueleto, después de lo cual podemos proporcionar la implementación. Como esto es muy sencillo, quiero que tomes esto como una tarea para crear esta pipa personalizada y de alguna manera hacer que funcione. En el plato principal, discutiremos algunos de los otros conceptos relacionados con las tuberías, como las tuberías puras e impuras, las tuberías asíncronas, las tuberías multiparamétricos, etcétera Pero por ahora, espero que tengas una idea qué son las pipas en anglo. Te veré a continuación. 23. 0122 Enrutamiento en carga angular y perezosa: En esta conferencia, entenderemos qué son las rutas en anglo Las rutas definirían cómo navega la aplicación entre diferentes vistas o componentes en función de la URL Vamos a entenderlo implementando realmente rutas en nuestra aplicación. Por el momento, así es como se está renderizando nuestra aplicación. Estamos mostrando un mensaje de bienvenida, y estamos mostrando la pose. Lo voy a hacer ahora es que voy a introducir un nuevo componente llamado Navegación y vamos a mover hacia fuera el código perteneciente a este mensaje al componente de navegación. Además, también vamos a tener un par de enlaces en ese componente. El primer enlace dice pose, ¿cuál hizo clic? Básicamente vamos a renderizar estos post, y el segundo enlace dice mi perfil. ¿Cuál hizo clic? Básicamente estamos mostrando el perfil de usuario. Entenderás mejor una vez que implementemos esto. Voy a volver a nuestro proyecto, y este es nuestro componente padre, ahora mismo, solo estamos mostrando la pose. Dentro del componente post, estamos teniendo este código que hemos introducido anteriormente. Permítanme copiar esta sección del código porque ahora queremos que forme parte de un nuevo componente llamado Navegación. Este componente ahora está dedicado solo para publicación. Permítanme abrir una nueva terminal y crear un nuevo componente llamado NG Generate Navigation. Tenemos que decirle a Angler lo que queremos generar. Es un componente. Así que Angler ha creado una nueva carpeta con archivos específicos de componentes Además de eso, también voy a generar otro componente llamado Perfil. Dentro de este componente de navegación, vamos a mover el código que acabo de copiar. Y en su expediente mecanografiado, tenemos que introducir también este directo Guarde el archivo. En el componente padre, ya no vamos a mostrar la publicación, nos desharemos de esto, sino mostraremos este componente de navegación. Voy a copiar este selector. Espero que seas capaz de seguirme a mi lado. En el archivo mecanografiado del componente app, tenemos que importar este componente Ya no necesitamos tener este componente post Vamos a reemplazarlo con componente de navegación. Guarde el archivo. Como parte del componente de navegación, también vamos a introducir un par de enlaces. El primero dice pose y el segundo dice Mi perfil. Volvamos al navegador y veamos cómo se está renderizando la aplicación. Entonces ahora mismo, así es como se está renderizando, lo cual, por supuesto, no tiene mucho sentido. Todo tendría sentido una vez después de introducir el enrutamiento. Localice este archivo llamado app routes dot Ts file. Si no tienes este archivo, tienes que crear este archivo manualmente por ti mismo. Y una vez que lo hagas, vamos a introducir las llamadas rutas en forma de array. Agreguemos un artículo. Voy a decir camino como pose, y vamos a asociarlo con un componente. En este caso, cada vez que alguien visita una URL con pose como la ruta, queremos renderizar el componente pose. Y de manera similar, también vamos a introducir otra ruta para perfil, y esto va a renderizar componente de perfil. Guarde el archivo. Y solo para que sepas, dentro del archivo principal dot Ts, en realidad estamos iniciando la aplicación Este es el punto de partida para nuestra aplicación. Anglo usa esta aplicación de arranque para inicializar la aplicación y renderizar el componente de la aplicación, que es el componente raíz o el componente padre que renderiza nuestra Así que esto corresponde al componente app dot HTML, que actualmente está mostrando este componente que acabamos de crear Navigation. Y también estamos proporcionando algunos config a angular, que tendría los proveedores o cualquier configuración global. Echemos un vistazo a lo que hay dentro de esto. Por lo tanto, el enrutador proveedor es una función auxiliar proporcionada por Angular para configurar el enrutador para la aplicación. Y acepta una serie de rutas. Básicamente, su configuración de enrutamiento y configura todas las dependencias requeridas para el enrutamiento en la aplicación Todo esto se cuida automáticamente. Nunca los he creado yo mismo manualmente, ¿verdad? Cuando estamos creando el proyecto en sí, le he pedido a Angular que configure rutas también, y lo ha hecho por mí. En caso de que estés configurando rutas manualmente, entonces además de crear el archivo de rutas, también necesitas especificar esto. Así que hemos configurado las rutas de salida, y ese es exactamente el camino que queremos usar en los enlaces también. Aquí voy a decir enlace router. Esto va a ser, ¿adivina qué? Pose, éste, y éste va a ser perfil. Siempre que ingresemos una URL, con esta ruta, angle intentaría renderizar el componente de perfil. Y si es con esta ruta, entonces trataría de renderizar el componente post. Déjame guardar el archivo. Pero como estamos usando tinta Router aquí, necesitamos importar el módulo de enrutador en este componente. Entonces en el archivo mecanografiado de navegación, vamos a introducir también módulo externo, guardar el Y en nuestro componente padre, vamos a introducir algo llamado Router Outlet. salida del enrutador actúa como marcador de posición en su aplicación donde el contenido de los componentes enrutados se carga dinámicamente Entonces aquí es donde Angler intentaría renderizar los componentes enrutados. Y como estamos usando esto, necesitamos ingresar al módulo en el archivo mecanografiado del componente de la aplicación. Guarde el archivo. Deberíamos poder ver este componente llamado navegación y este componente está mostrando el mensaje de bienvenida, así como renderizar estos dos enlaces para los que tenemos rutas configuradas. Por cierto, no hemos poblado nada en el componente de perfil. Hagámoslo rápidamente. Creo que el predeterminado funciona por ahora. Guardemos el archivo y volvamos a ver cómo se está renderizando la aplicación. Entonces así es como se está renderizando nuestra aplicación. Si hago clic en pose, ha renderizado el componente pose y si hago clic en mi perfil, renderizó el componente de perfil. Entonces así es como funciona realmente el enrutamiento. Vamos a profundizar en estos conceptos más adelante cuando entremos en el plato principal Y por supuesto, nuestra aplicación no se ve realmente atractiva visualmente en este momento. Eso es porque aún no hemos agregado este estilo. Déjame hacer justamente eso y volver a ti. Bien, he introducido el estilo para nuestra aplicación. Parte del estilo entró en el componente raíz y parte de él entró en el componente de navegación. Y en definitiva, así es como se está renderizando nuestra aplicación. Toma nota que cuando hago clic en uno de estos enlaces, por ejemplo, si hago clic en mi perfil, la URL resultante tiene el perfil como ruta, y de ahí que Angler sea capaz de renderizar el componente de perfil Además, Angler admite algo llamado carga perezosa, lo que significa que no descarga todos los componentes que alguna vez existieron Se descargaría los componentes que son absolutamente necesarios para la vista actual, lo que significa que a medida que interactuamos con la aplicación, se descargarían nuevos componentes bajo demanda. Esto mejorará el rendimiento y mejorará el tiempo de carga inicial y así también la experiencia del cliente. Por lo que los componentes solo se cargarían cuando la ruta es navegada también.