Curso de choque angular - aplicación de tareas construida

1. Introducción: Hola a todos y bienvenidos a este curso de choque angular aquí en Skillshare. A través de este curso, trabajaremos con Angular y el sólido básico. Al lado de eso, conocerás todas las características principales que Angular tiene y soporta. Entonces por eso, en realidad instalarás el angular y construirás algo agradable variado. Las características con las que trabajaremos para estas puntuaciones serían angulares, CLI, componentes, servicios y enrutamiento, también módulo http y mucho, mucho más. Ahora bien, ¿qué vamos a construir a través de estas puntuaciones? Bueno, este curso junto a las características que vamos a explorar, también construiremos un proyecto de la vida real. El proyecto que vamos a construir la aplicación de tareas, esta aplicación que se puede ver aquí mismo en la pantalla, parece bastante simple, pero en realidad es compatible con todas las características principales que vamos a un lote de diseño retenido con también hacer el enrutamiento para varias páginas. También usaremos el módulo HTTP para sacar los datos del servidor y realmente mostrar esos datos en una pantalla. Junto a eso, trabajaremos con nuestros datos como completa o incompleta una de nuestras tareas. Ahora, ¿quién soy? Bueno, mi nombre es Stefano materia, que y escucho más de siete años de experiencia en desarrollo web. Al lado de eso, también soy instructor en línea. Al lado de este curso de Skillshare, también me puedes encontrar en YouTube. En YouTube, puedes encontrar mi canal América donde publico nuevos tutoriales en desarrollo web semanalmente. Así que asegúrate de comprobarlo y también suscribirte a mi canal ahí también. Ahora en Skillshare, junto a este curso, puedes encontrar en muchos otros cursos que tengo también. Esos cursos que podrás encontrar serán sobre diferentes tecnologías. Entonces hay otro curso sobre Angular, pero si te gustaría ver los cursos para diferentes tecnologías como Bootstrap, JS, JavaScript. Los puedes encontrar también. Ahora, quiero darle la bienvenida una vez más a este curso. Así que vamos a codificar. 2. Instalación angular: Hola una vez más y bienvenidos a la primera lección oficial de este curso. En esta primera lección, vamos a repasar algunos conceptos básicos de Angular. Instalaremos el Angular. Veremos qué es la herramienta de terminal angular y además crearemos nuestra aplicación y ejecutaremos esa aplicación. En la siguiente lección, hablaremos ¿en qué se encuentra Angular exactamente? Y pasaremos por algunas de las características geniales que tiene Angular. Justo aquí en mi pantalla, actualmente estás mirando sitio web oficial de Angular y una gran cantidad de datos IO. En este sitio web puedes encontrar todo lo que necesites sobre Angular, puedes ver algunas de las características geniales que singulares, Sí. Y también se puede ver su propia documentación completa. Las tecnologías de riesgo angular son una tecnología vasta, por lo que es natural que la documentación también sea grande. En el menú del lado izquierdo aquí, podemos dar click en este Getting Started y dar click en esta configuración, abrir esta página y desplazarnos un poco hacia abajo. Aquí lo primero que podemos ver y hacer es instalar el CLI Angular. Al instalar este singular CLI, también instalaremos la última versión angular estable. Este CLI es realmente importante. Lo usaremos para crear nuestra aplicación. También lo usaremos para crear un montón de características diferentes que Angular soporta. Y también lo usaremos para ejecutar nuestra aplicación. Ahora para instalar la CLI Angular y Angular, debemos copiar este npm instalar dash g en CLI de barra angular. Una cosa más antes de instalar angular, asegúrate también de tener instalada la última versión de node.js. Bien última versión recomendada. La importancia de este nodo no está en Angular, sino en su propia herramienta llamada npm. Npm es el gestor de paquetes que nos permitirá instalar un montón de diferentes módulos como angular. Y en Angular script, ya se puede ver NPM aquí, lo que significa que ya estamos utilizando en eso y PM. Entonces una vez que tengas Node.js instalado , también instalará este NPM automáticamente. En ese punto, puedes simplemente copiar este comando aquí. Ahora en tu terminal, puedes pegar este comando y golpear enter. Este comando instalará automáticamente Angular y Angular CLI para nosotros globalmente en nuestra máquina para que podamos usarla. Una vez instalado esto, podemos usar EMG como comando aquí. Y g viene de esa CLI Angular. Al lado de estos enviar g, usaré dash, dash, help, una bandera aquí para presentar toda la ayuda mientras funciona helper de Angular para nosotros. Aquí podemos ver montón de diferentes opciones y comandos que podemos hacer. Por ejemplo, la factura de energía realmente construirá nuestro proyecto y la reimplementación puede implementar nuestro proyecto. Hay comandos para generador para generar archivos específicos y también ejecutar para ejecutar realmente o servir nuestro proyecto también. Ahora bien esta de aquí es esa herramienta CLI Angular que ya mencioné. La herramienta en sí es muy importante para nosotros los desarrolladores Angular porque la usamos a diario. Entonces déjame mostrarte ya una cosa genial que podemos hacer con estas herramientas CLI. Entonces el comando que voy a hacer es N G nu, este motor, debes tener un nombre junto a él. Y lo que hará en relación con crear un nuevo espacio de trabajo angular para nosotros. Bueno, la nueva aplicación Angular. Entonces, antes que nada, voy a usar claro para limpiar mi consola para que puedas ver todo con claridad. Ahora, usemos juntos este comando. Perderé mg, luego Nuevo, y pasaré el nombre de mi espacio de trabajo. Bueno, el nombre de mi solicitud. Vamos a construir esta aplicación de tareas. Entonces nombraré mi app, task dash app. Ahora bien, esto de aquí debería generar nuestra aplicación. Pero antes de que haga eso, también nos hará un par de preguntas. El primero sería, ¿le gustaría agregar enrutamiento angular? Angular es una biblioteca, también soporta enrutamiento. Entonces voy a ir aquí, sí, porque también trabajaremos con el ruteo en este curso. Lo siguiente es elegir un formato de hoja de estilo que nos gustaría usar. Angular es un valor por defecto viene con CSS, SCSS, Sass o Menos. Simplemente aquí elegiré un CSS para más aplicación predeterminada que podamos construir. En este punto, angular creará todos los archivos necesarios instalados, todos los paquetes que, bueno, la app necesita. Una vez instalada la aplicación, podríamos empezar a trabajar con ella. Se puede ver también un montón de advertencias en mi pantalla, pero eso no es necesariamente un problema. Esas son solo advertencias. Y tal vez para ti, ni siquiera muestra esos depende nuestro espacio de trabajo y también depende de una máquina. Entonces, una vez más, voy a limpiar mi terminal aquí. Lo siguiente que voy a hacer, ahora que tengo mi aplicación, podría usar cd y luego el nombre de la tarea de la aplicación. Al hacer esto, me moveré directamente a ese espacio de trabajo Angular. Dentro de este espacio de trabajo angular, en realidad podríamos ejecutar nuestro proyecto. Para ejecutar el proyecto. Ya te mostré un comando que es el suero N G. Así que simplemente podemos ejecutar este proyecto en un host local. Al lado de descender sirves. También podríamos usar, usar dash, dash Open o simplemente dash O para abrir automáticamente nuestra aplicación en nuestros navegadores preferidos. Entonces voy a hacer exactamente eso. Ahora, Engler, vamos a agarrar nuestro proyecto, compilar todo juntos, y al azar eso para nosotros. Así que solo esperemos un poco. Una vez terminado esto, deberíamos ver este dummy will default application que fue construido por Angular para nosotros. Angular hace esto automáticamente y ya tiene alguna coordenada. El código de ejemplo solo los enlaces útiles que podrían sernos útiles. Puedes ver los enlaces donde puedes aprender Angular, también la documentación de CLI y montón de diferentes características que tiene Angler. También puedes ver las características que Angular también soporta. Es como crear un nuevo componente, que aprenderemos un poco más adelante. Pero este código de partida no es importante para nosotros en absoluto. Pero como ya lo mencioné, déjame mostrarte justo al lado de mi terminal, abrí otra porque me resulta muy útil tener dos terminales abiertas. Aprenderás a este curso. ¿ Por qué? Porque también vamos a generar y crear nuevos componentes o servicios que Angler tiene y soporta. Y para eso, seguiremos manteniendo nuestras aplicaciones ejecutándose en el terminal izquierdo, mientras que a la derecha, podremos usarlo para generar esas características. Pero aquí lo que voy a hacer, voy a usar código que para abrir mi app de tareas en mi código de Visual Studio. Entonces aquí está. Este es el espacio de trabajo angular oficial. Y del lado izquierdo aquí podemos ver, bueno, todos los archivos que Angler tiene por ahora. En el siguiente video, conoceremos más sobre el Angular y lo que cada uno de estos archivos hace por nosotros. Entonces, de inmediato saltemos a eso. 3. Qué es Angular: Entonces, ¿qué es realmente Angular? Bueno, Angular, en pocas palabras, es un framework de JavaScript y se utiliza para crear aplicaciones de una sola página. ¿ Qué me hace esa aplicación de una sola página? Bueno, esas aplicaciones serían aplicaciones que tienen enrutamiento y también páginas diferentes sin recargar esas páginas reales. Entonces por ejemplo, aquí en el sitio web oficial de Angular, cuando me muevo a la página de Características, puedes ver que la página fue cambiada pero no refrescó la página en absoluto. Y esa es esa aplicación de una sola página. Todo se presenta en una sola página, pero volverá a renderizar el contenido necesario para una página específica. Ahora, a continuación, Bangalore, hay muchos frameworks de JavaScript diferentes que puedes usar. Algunos de los más populares junto a Angular, React y Vue. Entonces, ¿qué hace que el singular sea diferente y manchado desde la vista de los reactivos? Bueno, Angular es un vasto framework en su propia base de código. También soportará el ruteo e incluso el propio módulo HTTP. Al lado de eso, hay muchos pasivos Seibel diferentes de Angular que ya están integrados en angular. E incluso hay un apagón de luz de biblioteca de terceros JS que viene por defecto con Angular. Entonces por deuda se puede ver que el dedo es realmente vasto y hay bastante que aprender aquí. Y podrás construir aplicaciones bastante increíbles desde el principio con Angular. Ahora bien, debido a que es un marco tan vasto, obviamente, es mucho más difícil aprender framework. Pero hablemos un poco sobre la popularidad de Angular. ¿ De dónde viene Angular? En primer lugar, bueno, Angular fue desarrollado por el propio Google, y Google sigue trabajando en Angular diariamente para mejorarlo a partir de un año o dos años por venir. Cada seis a nueve meses, se puede esperar una actualización importante de Angular, que moverá su propia versión. Actualmente estamos en la versión 14. Y como dije, Inglaterra está justo en la parte superior junto a la vista. Y sin embargo, como los frameworks de JavaScript más populares que existen. Ahora, antes de sumergirnos en el código, solo quiero mostrarles algunos de los proyectos geniales que se construyeron con Angular. Por ejemplo, lift como aplicación, se construyó con Angular, Tinder también y Snapchat también. Hay muchos proyectos diferentes por ahí que fueron construidos con Angular. Muchos de esos tuvieron bastante éxito en ello. Entonces con esto, puedes ver que en realidad puedes construir lo que desees con Angular. Entonces es solo una novedad decidir que deseas construir alguna pequeña aplicación que haremos, justo en este curso, o una aplicación más grande como una de estas. Ahora, volvamos a nuestro código. Hablemos antes que nada un poco sobre el angular y el código aquí también. Lo primero que necesito mostrarte son esos módulos de nodo. Estos módulos de nodo se instalarán automáticamente cuando creemos nuestra aplicación angular. Para esos módulos de nodo, es muy importante tener este paquete dot json file y el archivo package.json en esta especificación y ese archivo JSON, podemos ver alguna información simple sobre nuestra app, como el nombre y la versión. Podemos ver diferentes scripts o comandos que podemos ejecutar, como NG sirven para ejecutar nuestra aplicación. Y podemos ver diferentes dependencias que se instalaron automáticamente con Angular. Se puede ver que Angular tiene un núcleo, un módulo que obviamente está instalado aquí, y que son las características centrales de Angular, el conejo. Características bastante diferentes, así como animaciones, formularios, enrutador, y así sucesivamente. Y también mencioné esto, pero adage JS como biblioteca, pesar de que es una biblioteca de terceros, aquí no se instalará biblioteca angular porque Angular bastante utilizada en esta biblioteca JS de interrupción. Ahora bien, si deseas cambiar la configuración de tu aplicación Angular, siempre puedes abrir este archivo JSON Angular.js. Aquí verás, bien todo el esquema de tu proyecto. En realidad se puede ver el nombre del proyecto y todo el esquema del mismo. Entonces, por ejemplo, si tienes algunos estilos externos que deseas usar, como importar la biblioteca Bootstrap. Bueno, puedes hacerlo aquí mismo, o incluso Bootstrap JavaScript. Puedes hacerlo en un script aquí, aquí mismo también puedes ver diferentes configuraciones para el proyecto angular como la producción misma. Puedes configurar tus propias configuraciones aquí mismo. Ahora bien, esto es solo la configuración de la aplicación Angular. Cerremos estos archivos e ingresemos a esta carpeta SRC, la carpeta de origen. Dentro de esta carpeta, lo primero que es realmente importante para nosotros es este archivo main.js. Esto significa que p es archivo. Vamos a agarrar el módulo principal del Angular y Bootstrap ese módulo. El módulo principal de la aplicación Angular suele ser este módulo de aplicaciones, que verás pronto. En el siguiente video, trabajaremos más con módulos. Angular realmente usa estos módulos y verás a través de este curso cómo lo hace. Pero en este archivo, angular, tomaremos este módulo y ejecutaremos la aplicación basada en ese módulo. Por lo que es muy importante que todo lo que tengas en tu aplicación. Debe ser importante en este archivo de módulo de aplicación, por lo que la aplicación realmente podría saberlo. Ahora aquí también tenemos styles.css, que es nuestro estilo global. Volveremos a eso un poco más tarde y también index dot HTML. Este es ese archivo HTML que siempre se volverá a renderizar. Esta es esa aplicación de una página, de una sola página. Entonces aquí podemos ver esto aprobado y por esta app acercamiento de ruta cuando tiramos la ruta actual que actualmente estamos viendo. Y configurando correctamente nuestras rutas, podremos soldar, presentar un contenido diferente para una ruta específica. Así sucede la magia. Por eso no necesitamos realmente actualizar la página. Pero podremos movernos de una ruta a otra, de nuestra página a otra, y el contenido se volverá a renderizar automáticamente. Ahora aquí dentro, podríamos tener diferentes entornos que deseamos establecer, como la producción o simplemente normal nuestro propio entorno de desarrollo. Además, podríamos tener nuestros propios activos aquí como imágenes, fuentes, etc. Y podríamos tener, bueno, la aplicación real, esta aplicación sexual. Bueno, aquí hay bastantes archivos. Pongámonos a todos a partir del archivo principal, como esta app, ese módulo que barra P S. Entonces, antes que nada, ¿por qué? Bueno, pares es una extensión para un TypeScript. Y angular por defecto, usa el TypeScript en toda la aplicación. Por lo que es muy importante que conozcas al menos los conceptos básicos de TypeScript para trabajar realmente con Angular. Pero volvamos a este archivo de módulo de aplicación. En aquí podemos ver a este decorador del módulo N G. Al usar este módulo de energía, estamos diciendo que este archivo se utilizará como módulo básicamente. Y como este es nuestro módulo principal para nuestra aplicación, nuestro módulo de aplicaciones dentro deberíamos tener todas las entradas que se necesiten. Por ejemplo, nuestro componente app, ese fue el primer componente que ya viste en un video anterior, esa primera página que se creó por defecto a partir de Angular. También hay un módulo de navegador que overs además de unas utilidades bastante agradables. Y sin ella, no podemos codificar a través de la aplicación Angular. Y también hay un módulo de salida, que es el módulo que creamos en nuestro camino. ¿ Recuerdas que nos preguntaron si deseamos usar enrutamiento Angular y seleccionamos yes por ese comando cuando generamos nuestra aplicación? Bueno, eso creó exactamente este módulo de enrutamiento y lo importó automáticamente para nosotros aquí. Ahora bien, aquí se puede ver que los componentes deben ser importantes en las declaraciones. Los módulos deben ser importantes para importar en las importaciones, hay proveedores como servicios y parte bootstrap significa lo que realmente debería ejecutar la aplicación. Y para nosotros es componente AB, nuestro componente inicial. Entonces vamos a abrir esos componentes de partida. Vamos a abrir el archivo HTML. Y esto de aquí es en realidad todo el código que podemos ver actualmente en nuestra pantalla. Volviendo rápidamente a mi pantalla. Este es exactamente ese código. Ahora bien, este código no es tan importante así que realmente podemos agarrarlo. Y usemos la etiqueta H1 aquí, y digamos hola mundo. Al hacer eso, podría abrir mi anfitrión local y podemos ver que el contenido ahora es en realidad solo el hola mundo. Ahora para que esto funcione y realmente recargue nuestra aplicación automáticamente, aún necesita mantener estos host locales ejecutándose con ese comando en merecer. Volviendo a mi código ahora, puedo ver que junto a este archivo HTML, puedo ver el archivo CSS, esa especificación, ese archivo ts y el archivo ts. Estos son todos los archivos que pertenecen a un componente. Por lo general, cuando creamos componente, tendremos cuatro archivos para ese componente. En lugar de codificar HTML, CSS y TypeScript todos juntos, angular realmente los dividirá en diferentes archivos. Entonces, al visitar esta app dot component dot ts file, bueno aquí la configuración de ese componente realmente sucede. Cada componente tendrá su propio archivo T, así como TypeScript. Y tendrá en su interior a este decorador de componentes. Tendremos un selector. Nosotros triviales, bueno, podemos usarlo para seleccionar el componente de deuda y mostrarlo con sonido. Por ejemplo, el selector aquí es ruta de aplicación. Y si recuerdas, en nuestro archivo index.html, estamos usando ese componente aquí mismo como un componente de ruta de aplicación. Ahora, junto a ese selector o fin de semana, especificamos la plantilla y el estilo para nuestro componente, y esos serían nuestros archivos HTML y CSS. Entonces, en pocas palabras, eso es sobre los componentes por ahora, trabajaremos con esos un poco más tarde. Lo siguiente aquí es este punto spec que ts file, spec files en Angular. Bueno, esos se utilizan para las pruebas. Entonces, si necesitas escribir alguna prueba automática, las harás bien aquí, en sus propios archivos de especificaciones. Y lo último que en realidad no verificamos es este módulo de enrutamiento de aplicaciones. Estos módulos de enrutamiento separados, nosotros solo, bueno, utilizará este decorador de módulo de energía para configurar el módulo. Ya sabes que es importante en nuestro módulo app. Entonces nuestra aplicación realmente sabe sobre este módulo. Y aquí se puede ver la configuración para la ruta, que conoceremos más adelante. Pero esas rutas deben ser pasadas en un módulo router desde Angular. Así que la aplicación Angular realmente podría conocer sobre estas rutas. Ahora junto a estas características como los componentes del módulo, hay muchas características diferentes que Angular tiene y soporta, como servicios, tuberías, directivas, etc. Pero antes de terminar este video, volvamos a entrar en nuestro estilo ese CSS aquí. Aquí, estilizaré mi aplicación a nivel global. Por ejemplo, voy a agarrar todos mis elementos en mi aplicación y poner el relleno en los que sean, por ejemplo, 0 y también margen para ser 0 también. Al lado de la muerte o el agarró mi cuerpo. Y final establece la familia de fuentes para usar como familia de fuentes para que sea Courier New. Y además estableceré el color de mi fuente para que sea 333333. Eso es. Ahora viendo mi aplicación, podemos ver que nuestra fuente hello world es indiferente. También podemos ver que no hay, mucho espacio aquí en la parte superior e izquierda, y estamos listos para iniciar nuestra aplicación. En el siguiente video, conoceremos más sobre los módulos. Una de las principales características de Angular. 4. Módulos: Ahora ya hablamos de los módulos, pero quiero decir algunas cosas más. También podemos dividir nuestros módulos en nuestros módulos raíz o módulos de características. Write module serían nuestros módulos principales que podríamos tener para la aplicación, como este módulo de app. Pero los futuros módulos serían como módulos específicos que serán utilizados para un futuro específico de nuestra aplicación. Digamos que tu aplicación admite la autenticación y autenticación de datos puede tener muchas páginas diferentes como iniciar sesión o iniciar sesión. Tal vez restablezca su contraseña. Y pequeños. Con muchas de esas páginas, habrá mucha funcionalidad que vendrá también. Por lo que es natural separar esa indicación relativa impar como una característica y crear el módulo futuro para ello. Lo que significa que todos los componentes que tendremos, no necesitamos importarlos en nuestro módulo de aplicaciones aquí, pero podríamos importar aquellos en nuestro futuro módulo que podríamos crear. Aún así, nuestro módulo de aplicaciones debería saber sobre esos. Así que podríamos importar ese módulo de características en el módulo SAP y toda la aplicación seguirá funcionando bien. Un caso de uso genial de estos módulos de ruta o futuros es, bueno, podemos verlo cuando abrimos este módulo de enrutamiento de aplicaciones. En este módulo de enrutamiento separado, podemos ver esta palabra clave para root. Bueno, un método llamó a la carretera. A este método estamos pasando nuestras rutas, lo que significa que estas rutas son rutas principales de nuestra raíz de nuestra aplicación. Bueno, las principales rutas para nuestra aplicación regresan a ese futuro de autenticación, ya que esa característica de autenticación tendrá sus propias páginas y también su propio módulo futuro, es natural para crear sus propias rutas futuras que podamos utilizar. Un caso de uso realmente genial de estos futuros módulos. Bueno, es este módulo compartido en Angular, nosotros, como desarrolladores solemos crear este módulo compartido donde tenemos todos nuestros, por ejemplo, componentes, servicios y tuberías que se usan bien, compartidos, ampliamente utilizados alo largo de nuestra aplicación. Entonces aquí, ahora voy a crear mi módulo compartido. Y esto es de nuevo, volveremos a utilizar la herramienta CLI para eso. Entonces para hacer eso, perdemos en G, G para generar, M por módulo. Y entonces debería usar el nombre de uno de mis módulos, el cual será compartido. Aquí podemos ver que el módulo realmente fue creado para nosotros. Volviendo a mi aplicación en nuestro lado izquierdo, voy a tener aquí una carpeta compartida. Ahora, dentro de esa carpeta de carpeta compartida, puedo ver mi compartir ese módulo, ese archivo ts. Podemos ver que este módulo compartido tiene menos código que nuestro módulo de aplicación porque no es tan importante que este módulo compartido tenga todo ese código de inicio. Este es el primer módulo de características que tenemos. Y este módulo en realidad se usa para funciones compartidas que podríamos tener. Por ejemplo, en la próxima conferencia, crearemos nuestra barra superior para nuestra aplicación. En lugar de crear esa barra superior en todas nuestras páginas, crearemos nuestro componente compartido de una barra superior. Por lo tanto, vamos a importar ese componente compartido dentro de este módulo compartido y también exportado. Por lo que nuestra aplicación podría conocerlo. Por deuda, podemos usar ese componente de barra superior donde queramos, y siempre podemos tenerlo en nuestra pantalla sin reutilizarlo una y otra vez. Así que de nuevo, este módulo compartido es realmente útil para nosotros porque siempre puede contener todas nuestras características compartidas que podríamos tener como diferentes componentes o servicios o tuberías y así sucesivamente. Entonces ahora que mencioné ese top sobre un componente, entremos en el siguiente video donde hablaré más sobre los componentes y juntos crearemos esa barra superior. 5. Componentes: Ahora los dos módulos siguientes, los componentes también son una característica muy importante de Angular. Sin componentes, no tendríamos ninguna página e incluso ningún contenido en nuestra pantalla, justo en este video, te mostraré cómo podemos crear un componente en Angular. El componente que deseo crear es ese componente de barra superior que podemos usar. componentes de la barra superior deben presentarse en todas nuestras páginas que podamos tener en nuestra aplicación. Por lo que sería bueno crear algún tipo de componentes reutilizables. Bueno, todos los componentes en Angular son en realidad totalmente reutilizables. Pero para nosotros aquí iremos un paso más allá y creamos este componente de barra superior para estar en nuestro módulo compartido. De esa manera indicaremos que el componente de barra superior es un componente compartido y no pertenece a ninguna página específica. Entonces, para crear este componente de barra superior en mi terminal usando la herramienta CLI de Angular. Nuevamente, usaremos comando de N, G, luego G para generar, ver para componente. Y voy a generar este componente en carpeta compartida, que es nuestro módulo barra superior slash. Ahora en mi editor de código, realmente puedo abrir ese módulo compartido. Vamos a carpeta compartida, luego barra superior. Y aquí puedo ver cuatro expedientes diferentes. Hay HTML, CSS, TypeScript, y también archivo de prueba para este componente. Ya mencioné esto al principio que cada componente suele venir con cuatro archivos para ello. Estos cuatro archivos en realidad serán ese componente. Así que hemos dividido nuestro HTML, CSS y TypeScript, así que en realidad no escribimos todo en un solo archivo. Podría ser un archivo bastante largo. Entonces en este componente de barra superior, Angular, una vez que genera componente de deuda, también agrega este tipo de contenido ficticio para ese componente. Así que vamos a asegurarnos de que en realidad presentamos este componente en nuestra pantalla. Entonces entrando en el archivo TypeScript de la barra superior, puedo ver el selector de f dash top bar, lo que significa que en mi app punto componente donde tengo, donde tengo este Hello World, voy a eliminar este Hello World ahora, y agregaré elemento HTML5 de f, f dash top bar. Y esto realmente debería presentar nuestro componente de barra superior. Pero aquí mismo, sí tenemos un error. Y también, si abriéramos nuestro anfitrión local, ese mismo error será visible en nuestro anfitrión local. Esto es bueno porque Angular es mucho más fácil de depurar de esta manera. La razón por la que tenemos este centro es porque nuestro componente de aplicación no conoce la barra superior de App. Y la razón por la que no lo sabe, bueno, esta barra superior de la aplicación pertenece a esta compartir el módulo. Entonces dentro de este módulo compartido en array de declaraciones, puedo encontrar este componente de barra superior. Pero si iría a mi app dot module dot txt file, no hay tales componentes, eso es solo componente AB. Entonces, ¿qué debemos hacer aquí? Bueno, deberíamos importar este componente de barra superior en nuestro módulo de aplicaciones para que podamos usarlo a través de los componentes de nuestro módulo de aplicaciones que podríamos tener. Pero como tenemos este módulo compartido, de este módulo compartido, simplemente voy a exportar. Entonces voy a HIT matriz de exportaciones de Estados Unidos y puedo escuchar más allá de lo que desean exportar. Para mi eso puede ser componente de barra superior. Ahora, en lugar de importar mi componente de batería superior en mi módulo de aplicación, simplemente puedo importar mi parte del módulo aquí. De esta manera, voy a importar módulo compartido y todo lo que se exporta de ese módulo compartido. Y con esto, simplemente arreglamos ese error, lo que significa que ahora estamos usando nuestra barra superior de aplicación en nuestro archivo HTML de punto de componente de punto de aplicación, verificando mi host local. este momento puedo ver el texto aquí de los trabajos de barra superior, lo que significa que el componente realmente se presenta en mi pantalla en el contenido de ese componente es trabajos de barra superior. Hablando de ese contenido. Vamos a crear algunos aquí. Entonces aquí, voy a quitar este párrafo y agregaré un div con la clase de barra superior. Esta clase se utilizará posteriormente para estilizar. Ahora bien, en esta barra superior se pueden escuchar dos secciones. La primera sección puede ser una sección de logotipo. La segunda sección puede ser una sección de navegación. Entonces ahora que tenemos estas dos secciones en mi sección de logo, lo haré, bueno, no usaré ninguna imagen para un logotipo, o simplemente usarán H2, que dirá tareas. Así que la tarea arriba. Así que vamos a usar tacón singular aquí. Ahora para mi navegación aquí, voy a crear navegación con lista desordenada. Entonces el primer elemento de la lista tendrá una etiqueta de anclaje. Esta H ref puede llevar a un hash. Por ahora, más adelante verás cómo hacer un enrutamiento adecuado en Angular. Aquí, lo que voy a hacer, voy a decir, guau, ahora voy a copiar este ítem de la lista. Abajo. Y para el segundo ítem de la lista se puede decir sobre. Por lo que podemos tener dos páginas Inicio Acerca de la página para nuestra comprobación de la aplicación. Ahora bien, mientras nuestro anfitrión local, esto es lo que estamos aquí, solo algún tipo de logotipo, que son textos de tope de tareas y dos enlaces aquí. Así que vamos a darle estilo a esta aplicación es que estamos escribiendo este código en un componente de parte superior. Somos capaces de abrir el archivo CSS del mismo y darle estilo a este componente en realidad, para darle estilo a esta barra superior, voy a agarrar mi barra superior dividida por n. Voy a mostrar eso como un flujo. Entonces justificaré el contenido en el interior como espacio entre ellos. Y podría agregar alguna sombra de caja, por ejemplo, de 02 píxeles, cinco píxeles. Y digamos que puede ser ceros, ceros, ceros, ceros, ceros 0 para que D le tenga cierta transparencia. Además, puedo configurar la ropa de cama de 20 pixeles. Ahora esta será nuestra barra superior. Ahora, diseñemos nuestra navegación. No me voy a molestar con el logo. Entonces barra superior, luego mi sección de navegación que tienen y luego listas desordenadas que tengo. El estilo de lista para estos será ninguno porque deseo presentar enlaces uno al lado otro y no una lista real. Ahora abajo, podría apuntar de nuevo a mi barra superior. Navegación lista desordenada y cada elemento específico de la lista a continuación. Para cada elemento específico de la lista, los mostraré como en línea para estar uno al lado del otro. Y voy a añadir el margen del lado derecho para que sean diez pixeles, que puedan tener un poco de espaciado entre esos. Ahora, de nuevo, apunte a mi barra superior, luego navegar por esa lista desordenada, elemento de lista y cada etiqueta de anclaje específica en nuestro elemento de lista. Aquí, estableceré el tamaño de fuente de 20 píxeles. Entonces usaré decoración de texto para no ser ninguno. Y cambiemos el color aquí. El color de mis enlaces puede ser 333333. Y por último, volveré a apuntar a mis etiquetas de anclaje, pero esta vez efecto hover sobre esas. Entonces también activo y también foco. Entonces por todos estos, solo voy a cambiar el color para que sea 777777. Y con esto, en realidad tenemos nuestro contenido, HTML, estilo, nuestro código CSS para nuestra barra superior. ¿ En cómo sabe este componente de esto? Bueno, en componentes de punto de barra superior, el archivo ts, podemos ver donde declaramos nuestro componente. Hay un selector, pero también hay una plantilla específica y también estilos específicos que está más allá de esa plantilla. Entonces esta es básicamente la configuración de nuestro componente. En mi pantalla ahora mismo podemos ver nuestra barra superior. Hay registro en el lado izquierdo y hogar y sobre los enlaces en el lado derecho. Incluso puedo hacer zoom un poco para que lo veas mejor. Lo bueno de esta barra superior, bueno, es un componente compartido, lo que significa que cuando vaya a mi página de inicio, seguiré viendo, aún debería ver mi componente de barra superior. Y también cuando vaya a acerca de la página, volveré a ver mi componente de barra superior una vez que configuré todo bien, mi enrutamiento y las páginas también, hablando de deuda, ¿verdad? En el siguiente video, trabajaremos con nuestro ruteo. 6. Enrutar: Entonces el enrutamiento en general, bueno, en una Web rara vez se usa hoy en día. Casi no hay sitio web o ninguna aplicación que realmente no tenga rutas. Así que básicamente siempre que desees moverte de página página o hacer clic en un artículo específico para leer ese artículo. Ese sería el ruteo. Todas esas rutas deben ser establecidas dentro de la aplicación. Y también todas esas rutas deben saber qué contenido presentar exactamente al usuario. Y en Inglaterra, eso es realmente útil porque Angular tiene su propio enrutamiento angular. Entonces, ¿por qué es importante que Angular tenga su propio enrutamiento? Bueno, muchas tecnologías hoy en día, incluso las populares, no soportan el enrutamiento desde el principio. Por lo tanto, deberá configurar las rutas y el enrutamiento. Y es bastante agitado trabajar con, pero en Angular eso ya está configurado. Entonces, si recuerdas cuando generamos nuestra aplicación junto al módulo angular, también teníamos este módulo de enrutamiento de aplicaciones. Y este es el lugar donde configuraremos nuestras rutas. Para esas rutas, deseo escuchar mi casa y sobre la página. Entonces voy a crear ahora dos páginas, home y about page. Las páginas no son diferentes a solo componentes. Entonces lo que podríamos hacer en realidad es generar aquí dos componentes. Entonces nuevamente, usemos esa herramienta CLI. Voy a usar N, G, G para generar componente C4, y eso generará mi página de inicio aquí. Una vez terminado esto, voy a repetir el mismo comando, pero esta vez por aproximadamente página. Ahora que tenemos nuestras páginas sin componentes para un hogar. Y también sobre la página, bueno, podríamos configurar nuestras rutas aquí en estas rutas array. Entonces para configurar la ruta aquí, voy a usar el objeto. Y dentro de este objeto, puedo usar la propiedad path, esta ruta. Bueno, también debemos declarar un par a donde deseamos llevar a nuestro usuario. Entonces como tengo esa página de inicio, creo que mi usuario a una ruta casera. Para esta ruta casera, también debo crear el componente que utilizará el componente específico que se debe presentar en esta ruta de origen. Y para mí, ese será componente del hogar. Solo asegúrate en la parte superior para importar este componente para el hogar. Visual Studio Code es lo suficientemente inteligente como para hacerlo automáticamente por mí. Ahora, vamos a crear la siguiente ruta. Entonces coma aquí y luego el siguiente objeto para una mascota de aproximadamente, entonces el componente para esta página será sobre componente. También utilicé aquí capitalizado sobre. Voy a cambiar eso a, bueno, todas las letras a minúsculas. Bueno, en este momento, sí tenemos nuestras rutas aquí en la URL. Si cambiara mi anfitrión local para cortar casa. Bueno, el hogar seguirá estando en la URL, lo cual es bueno. Si lo cambiara a aproximadamente. Todavía está ahí. Entonces Angular en realidad sabe de esto. No hay contenido en la pantalla, y tampoco podemos cambiar la ruta haciendo clic aquí, puedes ver solo efectivo aquí, pero lo arreglaremos. Entonces también cuando vengo al puerto host local 8200, aquí no hay nada porque tienen esta página de inicio y también ruta de origen. Sería bueno redirigir automáticamente al usuario a la página principal para configurar esa redirección en la parte superior de mi matriz aquí, voy a crear la nueva ruta. Esta nueva ruta tendrá, bueno, debería tener una ruta que será solo la cadena vacía, lo que significa cuando el usuario acaba de visitar nuestro dominio. Y una vez que eso suceda, usaré propiedad de redirigir a y redirigiré al usuario a mi página de inicio. Y lo último, también deberíamos usar path match, entonces, cómo debe coincidir nuestra mascota. Y aquí puedo usar full match para mi camino. Así que ahora revisando rápidamente mi navegador, si eliminaría esta columna de mi página y solo ingresara mi dominio aquí, podemos ver que aún estamos redirigidos a la barra de inicio porque esa dirección roja era en su lugar. Ahora porque estoy en esta página de inicio, debería ver algo de contenido aquí, al menos ese texto ficticio que viene con Angular. Trabajos en casa, ¿verdad? Pero aquí no hay contenido pesar de que existe la ruta de origen. Y sabemos que tenemos ese componente del hogar. Bueno, a pesar de que tenemos ese enrutamiento en su lugar, angular todavía no sabe dónde debería mostrar esos componentes. Así que en mi app dot component dot archivo HTML, donde tengo esta barra superior, justo debajo, voy a usar elemento llamado salida Router. Esta ruta y outlet básicamente sacarán nuestros componentes en su interior. Entonces, dependiendo de qué ruta estemos como en casa o sobre, agarrará esos componentes que se utilizan para esas rutas y los presentará aquí mismo en exhibiciones donde usemos esta ruta y outlet, si lo usaría en otro lugar , presentará esos componentes ahí. Y ahora ya podemos ver un cambio. Vemos estos trabajos caseros. Si cambiara manualmente la página para cortar, entonces vería sobre obras. Pero dije el manual y correcto, así que seguimos siendo incapaces de cambiar esto por cheque, cambiando los enlaces aquí, ¿verdad? Solo estamos mudarnos a ese hash, que no es ruta existente para nosotros. Entonces para eso, en realidad necesitamos ir en nuestro componente de barra superior donde tenemos estos enlaces. Entonces en Angular y en vez de usar un borrador como este, tenemos algo diferente. Se llama enlace de enrutador. Este enlace de enrutador puede llevarnos a alguna parte. Para mí aquí, me llevará a la página de inicio de slash porque esta es una ruta de origen aquí, también cuatro abajo. Volveré a quitar esta H ref y usaré hear slash. Acerca de. Ahora sí tenemos algunos errores aquí. Es porque este enlace del router no es propiedad conocida de este elemento específico. Y no es que sea propiedad desconocida. Es porque en este componente de barra superior, bueno, este componente de parte superior pertenece al módulo compartido. Este módulo compartido no sabe que realmente usamos enrutamiento en algunos de sus propios componentes. Por lo que es realmente fácil enfrentar esto en la matriz de entradas donde solemos importar son módulos. Bueno, solo podemos importar módulo de módulo de enrutador importando este módulo y también asegurarnos de importarlo en la parte superior desde un enrutador de barra angular. Al importarlo, perderemos esas flechas. Ahora, ¿qué significa esto? Si hago clic en Acerca de, me moverá a la página Acerca de. Si hago clic en home, me moverá a la página principal, lo que significa que tenemos nuestras páginas en el ruteo en su lugar. Ahora, junto a este ruteo que viste, la redirección y también cómo configurar los enlaces para trabajar con el enrutamiento y las páginas. Eso es mucho más al ruteo. El enrutamiento es un módulo completo que se puede configurar también para un módulo hijo, podríamos tener rutas infantiles, también podríamos tener rutas dinámicas por ideas específicas o por babosas específicas como desee. También podríamos pasar datos de una ruta a otra ruta. También podríamos aprovechar nuestras rutas y hacer algo específico con nuestras rutas, se pueden sacar los parámetros de las rutas y mucho más, mucho más. Pero el enrutamiento en Angular podría ser su propio curso, para ser honestos, puede tomar probablemente una hora o dos o tres sólo para explicarlo a fondo. Entonces, en lugar de hacer todo eso para este curso rápido, simplemente continuaremos con este curso rápido para finalizar nuestra aplicación de tareas. Y seguiremos con los servicios. 7. servicios: Entonces otra característica muy importante de Angular, se llama servicio. servicio o los servicios son en realidad características inyectables, lo que significa que podríamos inyectar cada servicio donde queramos, en nuestros diferentes componentes, en nuestras diferentes directivas, pipas, Donde quiera que deseo. ¿ Y por qué querríamos eso? Bueno, servicios porque esos son inyectables. Esos son principalmente almacenar nuestros datos cada vez que deseamos tocar a nuestro servidor para obtener algunos datos específicos, o simplemente deseamos almacenar localmente algunos de los datos en nuestra aplicación. su mayoría haremos eso a nuestro servicio. Y como el servicio es una característica inyectable, se puede inyectar donde lo necesitemos y sacar esos datos de ese servicio específico. Para crear un solo servicio, volveremos a utilizar la CLI. Entonces aquí usaré N, G, G para generar, S para servicio. Y el servicio es inyectable donde lo necesitemos. Nuevamente vamos a generar este servicio en nuestro módulo compartido. Esta vez, voy a generar este servicio en módulo compartido que en la carpeta Servicios. Y entonces el temario se llamará Servicio de Datos porque en realidad trabajaremos con los datos dentro de este servicio. Así que ahora en mi Visual Studio Code, puedo entrar en mi carpeta compartida que servicios y abrir el Servicio de Datos. Cuando generemos el servicio , vendrá con dos archivos. Un archivo es la clase del servicio en sí, y el otro archivo es un archivo de prueba para este servicio. Por lo que ahora nos centraremos en estos datos que dan servicio dot ds bar. En la parte superior aquí podemos ver que el plan de estudios en sí es inyectable. Y aquí también podemos ver que estamos utilizando ese decorador inyectable para describir este servicio. Entonces, ¿dónde podemos inyectar este servicio por defecto en Angular? El servicio se brindará bien inyectado a nivel raíz, lo que significa que donde quiera que utilicemos este servicio, podremos usarlo si desea brindarle este servicio. Solo módulo específico. Puede especificar ese módulo aquí y en realidad Importante servicio de deuda en la matriz de proveedores de ese módulo. De esa manera se puede tener un servicio específico para un módulo específico. Pero hay, esta es una pequeña aplicación. No tenemos que preocuparnos por eso. Podemos simplemente dejarlo como está para ser proporcionado a nivel raíz para que podamos usar nuestro servicio donde lo necesitemos ya que el servicio contendrá nuestros datos. Trabajemos con algunos datos ficticios aquí y también compartamos esos datos con diferentes componentes. Entonces lo que voy a hacer aquí en la clase de este servicio, voy a crear una propiedad pública. Realmente no necesitamos declarar una propiedad pública o privada, pero es un buen ejercicio hacerlo porque angular es una tecnología TypeScript, ¿verdad? Entonces el TypeScript al final se compilará en JavaScript haciendo esas palabras clave específicas como público o privado o tipos específicos. El TypeScript lo hará mucho más suavemente. Entonces aquí voy a crear la propiedad pública de nombre de usuario. Y este de aquí será el tipo de cadena. Por defecto, este nombre de usuario puede ser John Doe por ejemplo. Ahora tenemos estos datos de nombre de usuario en nuestro servicio y podemos compartirlos desde aquí donde queramos. Entonces, ¿qué sería bueno para nosotros compartirlo aquí? Bueno, después de mi constructor aquí, en realidad podría crear propiedad pública, que será obtener nombre de usuario. Esto aquí será un método y devolverá una cadena de vuelta. ¿ Por qué va a devolver una cuerda? Bueno, podemos usar aquí return y luego este nombre de usuario, esto quiere decir que dondequiera que utilicemos este método, va a estar de acuerdo sobre username y simplemente devolverá el valor de ese nombre de usuario. Así que intentemos usar este nombre de usuario en nuestra página de inicio aquí. Entonces abre el archivo TypeScript de este objetivo. En este momento, el hogar no conoce este Servicio de Datos. Entonces en el constructor del agujero, podemos crear la propiedad privada, que puede ser servicio de datos. Y podemos establecer el tipo para que sea Data Service. Solo asegúrate de importar ese servicio de datos en la parte superior aquí. Ahora bien, el componente del hogar sí sabe de este Servicio de Datos. Además, ¿cuál es la diferencia entre propiedades privadas y públicas? Bueno, las propiedades públicas, puedes usar aquellas fuera de este archivo, pero las propiedades privadas no se pueden usar fuera del archivo. Esos se pueden usar solo en esa clase específica en la que se declaran esos. Entonces ahora en realidad en este método Mg on init, tomaremos nuestro nombre de usuario. Entonces para eso, vamos a crear aquí antes que nada, la propiedad pública. Nuevamente de nombre de usuario, que será una cadena. Y por defecto será una cadena vacía. Entonces ahora en este motor en él, usaré este nombre de usuario y lo pondré igual a esto, ese punto de servicio de datos obtendrá nombre de usuario. Y por esto, este get username nos devolverá la cadena de nombre de usuario. Y esa cadena se almacenará en nuestra propiedad username dentro de estos componentes. Pero, ¿por qué usamos esto en esta ONG? Ngo minuto es un gancho de ciclo de vida en Angular. Este gancho de ciclo de vida se ejecutará siempre que este componente específico sea cargado, bien inicializado. Lo que significa que cuando visitemos nuestra página de inicio, este código se ejecutará. Hay otros ganchos también del ciclo de vida que podemos usar N G en los cambios en junio, destruir, y así sucesivamente. Pero no nos vamos a molestar con los de aquí solo porque esos son mucho más complejos de explicar. Y esto sigue siendo un curso de choque. Entonces, ¿cómo podríamos saber que este nombre de usuario realmente tiene un dato? Bueno, vamos a entrar en nuestro HTML aquí. Y en lugar de este párrafo, voy a usar la etiqueta H1 aquí. Aquí, usaré la unión de propiedades en Angular para hacer eso, usar llaves rizadas, llaves dobles, y por dentro podríamos pasar nuestra propiedad. Para eso, podemos pasar, por ejemplo, nuestro nombre de usuario. Entonces este nombre de usuario, una vez que tenga los datos, se presentará aquí en H1. Entonces podemos presentarlo. Bien texto dinámico. Ahora, revisando mi solicitud, podemos ver a John Doe aquí. Si iría a la página Acerca de obras, vuelve a casa. Todavía podemos ver a este John Doe, que es realmente bueno. Esto significa que almacenamos nuestros datos en un servicio. Después movemos esos datos a un componente específico y los mostramos en una pantalla. Pero ahora se puede decir, bueno, eso era solo el nombre de usuario, eso no son datos reales. Esto fue solo un dato ficticio que creamos. Bueno, en el siguiente video realmente vamos a trabajar con el http, donde despacharemos llamadas mantenidas desde HTTP para sacar algunos datos de un servidor y realmente presentar algunos datos reales en el pantalla. 8. HTTP: Por lo que HTTP o Hypertext Transfer Protocol es un protocolo de capa de aplicación. Está diseñado para la comunicación entre una aplicación web y servidores web. Lo hace a través de múltiples métodos que podemos usar. Como método get para obtener algunos datos específicos o método post para guardar algunos datos específicos. Junto a eso, se puede utilizar para pasar encabezados al propio servidor web. Entonces podríamos, por ejemplo, autenticar a nuestro usuario con el token adecuado. Además, podríamos enviar parámetros específicos a través de esta llamada HTTP. Y de esa manera, nuestro servidor podría acceder a nuestra base de datos en función esos parámetros y extraer datos específicos basados en esos parámetros. Algo así se usa principalmente para filtrar datos o clasificar datos. Y HTTP hace todo eso con un simple mensaje de solicitud y respuesta. Ahora, http no es nada específico de Angular. Se puede utilizar en cualquier tipo de tecnología que sea capaz de contactar con el servidor. Entonces podríamos usarlo en, bueno, otros frameworks de JavaScript como React o view, también podríamos usarlo en JavaScript raw. Al lado de eso, podríamos usarlo en una plata con NodeJS, Python, C-Sharp, etc. pero Angular tiene su propio módulo para el HTTP. Muchas otras tecnologías no soportan su propio módulo para HTTP, pero la angular sí. Con ese módulo. Somos capaces de usar HTTP y todas sus características bien, a través de una forma mucho más fácil que verá pronto. Pero lo primero aquí es que necesitamos importar este módulo HTTP a nuestra aplicación. Así que nuestra aplicación realmente podría usarlo. Para hacer eso. Voy a abrir mi módulo de datos de la aplicación dot txt file. En la matriz de entrada de este archivo, agregaré el módulo cliente HTTP. Ahora bien, esto no se importará automáticamente. Entonces en la parte superior aquí, voy a importar este módulo cliente HTTP desde Angular slash, common slash HTTP. Yeso es todo. Con esto aquí, nuestra aplicación conoce este módulo cliente HTTP que podemos usar y lo usaremos. Entonces usaremos este módulo HTTP para extraer algunos datos específicos y extraeremos los datos de nuestra API de marcador de posición JSON. Esta API también costará muchos datos ficticios diferentes. Así que en realidad podríamos usarlo para probar nuestra aplicación, lo cual es realmente buen ejemplo para este curso con el que estamos trabajando aquí. Si me desplazo hacia abajo en este sitio web de marcador de posición JSON, aquí podemos ver diferentes recursos que podemos usar, como publicaciones, comentarios, álbumes, fotos a esos usuarios. Si continuara desplazándome hacia abajo, podemos ver diferentes métodos HTTP que podemos usar git para obtener el post de datos para guardar datos, PUT o parchear para actualizar datos, eliminar, eliminar datos. Ahora un enlace a este sitio web escucharás en los recursos de este curso para que siempre puedas visitarlo e intentar trabajar con un dato específico de este sitio web. Los datos con los que trabajaremos son estas tareas pendientes. Entonces, aunque estemos creando la aplicación de tareas, nos aseguraremos de que estas dos, esas son en realidad nuestras propias tareas. Así que volvamos al código. Vamos a entrar en nuestros servicios compartidos y abrimos estos datos que dan servicio dot ds bar. Ahora que trabajamos con este método get username, en realidad podría eliminar este método principal getUser y también eliminar este nombre de usuario de aquí porque ya no lo necesitaremos. Además, debo entrar en mi hogar que componente del hogar. Elimine el nombre de usuario de aquí, y en realidad elimine la llamada a este método get username relacionado con la entrada de este Servicio de Datos. Todavía lo guardaré aquí porque lo vamos a necesitar. Así que volviendo a mi servicio aquí, debería poder sacar los datos esa API de marcador de posición JSON. Para hacer algo así, debemos indicarle a este servicio que usaremos ese módulo cliente HTTP. Y HTTP tiene su propio proveedor que podemos usar, que también es inyectable, lo que significa que podríamos inyectarlo aquí en este servicio. Entonces voy a crear propiedad privada de HTTP, y estableceré el tipo de la misma para que sea cliente HTTP. Este cliente HTTP debe ser importante desde una barra angular, barra diagonal común HTTP. Solo asegúrate de que antes de esto, realmente importas este módulo de cliente HTTP en tu propia aplicación, ese archivo de módulo. De esa manera puedes usar este cliente HTTP. Ahora, vamos a crear el método que vamos a sacar esas tareas por nosotros. Así que aquí voy a crear método público porque vamos a utilizar este método fuera de este archivo. Y lo voy a nombrar, conseguir tareas. A pesar de que estamos tirando de las dos puertas de ese lugar adyacente llamado API. Todavía voy a renombrar esos para que sean tareas porque estamos creando aquí aplicación de tareas. Este método consigue tareas nos devolverá algo. Devolverá lo observable. Y lo observable debería tener aquí un tipo específico, al que volveré. En primer lugar, ¿qué es observable? Se puede ver que observable es algo que pertenece a eso agregar extra sí, biblioteca que mencioné al inicio de esta clase. Bueno, la biblioteca Alex JS es vasta. Hay muchos métodos y muchas características que tiene. Entonces no voy a profundizar con ello porque puede tomar todo el curso sólo para explicarlo. Pero en pocas palabras, observable es algo que envolverá nuestros datos para nosotros. Envolverá nuestras tareas. Como envolverá nuestras tareas, podremos aprovechar bien esas tareas y usar diferentes métodos en esas tareas. Entonces, si necesita transformar sus datos, observable es una buena opción para usted porque en realidad podría mapear esas tareas, transformarlas como desee y devolver solo los datos que necesita para nosotros aquí. Esto debe volver observable aquí, porque el cliente HTTP de Inglaterra siempre devuelve la espalda observable. Porque de esa manera es mucho más fácil trabajar con datos utilizando ese observable, cual verás así, pero ahora relacionado con este tipo genérico que se debe pasar a este observable. Bueno, debemos pasar el tipo de datos real que vamos a ir aquí. Y por ahora, no sabemos realmente qué tipo de datos recuperaremos de ese marcador de posición JSON. Entonces voy a establecer el tipo para que sea cualquiera aquí. Y después cuando tengamos datos reales, obtendremos esos datos y comprobaremos qué, bueno qué datos reales tenemos. Y crearemos un modelo específico para esos datos, pero más sobre eso más adelante. Ahora, dentro de este método, podríamos escribir nuestro código para obtener la tarea. Así que aquí he usado la devolución y voy a devolver esto, ese HTTP. Entonces estoy llamando a este modelo HTTP. Y sólo el tiempo tendrá diferentes métodos que pueda usar. Uno de esos métodos es este GetMethod. Dentro de este método get, debemos pasar la cadena a la API. Bueno, la cadena de código real que obtendrá los datos para nosotros. Volviendo al sitio web del marcador de posición JSON, haciendo clic en estas dos puertas, pude ver aquí que me sacará 200 tareas pendientes. Justo aquí en la URL, puedo ver la URL real que va a hacer eso por nosotros. Así que vamos a copiarlo De vuelta en código. Yo simplemente podría pegar estas dos puertas aquí. Y como va a tirar demasiado que hacer es como 200 de esos. Realmente no deseo trabajar con tal cantidad de datos. Entonces pude escuchar establecer el parámetro, que es el límite de subrayado, y lo pondré igual a cinco. De esta manera, extraeré solo las cinco tareas pendientes de esa API de marcador de posición JSON. Este límite de subrayado no siempre es el mismo. Cada API tendrá su propio parámetro. Entonces, si estás construyendo tu propia API, tendrás tus propios parámetros. Simplemente sucede que la API de marcador de posición JSON usa este límite de subrayado. Y con esto, estamos prácticamente terminados con nuestro Servicio de Datos. Ahora, vamos a ir a los componentes de nuestro hogar en el, realidad obtener esos datos en este componente, en mi componente de casa aquí, en mi energía encendido, en él. Volveré a usar este oscuro Servicio de Datos. En este tiempo, utilizaré un método llamado get tasks. Ahora bien, este método debería devolvernos, bueno, nuestras tareas de vuelta a nosotros, pero como es observable, podemos usar métodos específicos en él. Como es observable, devolverá ese envoltorio de datos. Entonces aquí en realidad podríamos usar ese suscribirse para suscribirnos a nuestro observable. Al suscribirte a nuestro observable, en realidad obtendremos una respuesta directa de ello. Entonces aquí voy a usar respuesta, que debería establecer el tipo específico de esta respuesta. El tipo serán los datos reales que estamos recuperando. Actualmente, no tenemos el tipo específico, modelo específico para esos datos. Entonces usaré cualquiera aquí, pero volveré a esto más tarde. Una vez que escucho mi respuesta de vuelta mis datos, en realidad podría usar aquí el método de flecha y simplemente console.log mi respuesta. Entonces usaré el registro de la consola de datos y luego la respuesta. Así que en realidad podríamos ver lo que estamos recuperando. Lo bueno de estos suscribirse, no solo maneja la respuesta, también puede manejar el error. Así que aquí en realidad podría pasar el error. Y consola dot log esos datos. Entonces, si se produce un error, sabremos cuál es este error. Y en realidad podríamos manejarlo mostrando algún tipo de alerta en una pantalla, por ejemplo. Lo último antes de verificar nuestros datos, voy a abrir el componente punto home dot archivo HTML vistas aquí este nombre de usuario. Y como eliminamos el nombre de usuario, no sabemos mucho al respecto. Entonces solo moveré este texto para que sea Hello World una vez más. Así que en realidad podríamos hacer que estos componentes sean bien realizables. Ahora, dentro de mi solicitud, si lo hiciera. Bueno, revisa la consola de la aplicación. En realidad podría, en realidad voy a ver este registro de datos, que presentará la matriz de cinco elementos en su interior. Y todos esos elementos son en realidad las tareas pendientes de esa API de marcador de posición JSON, lo que significa que la solicitud de torre para los datos fue exitosa y en realidad estamos obteniendo la respuesta de ese HTTP. Ahora, lo último antes de cerrar este video, ya es lo suficientemente largo. Voy a volver a la carpeta compartida y crear otra carpeta es sitio llamado modelos. En el interior ahora voy a crear el modelo de mis datos. Entonces aquí voy a crear un archivo llamado Task Data Model Ts. Entonces en este archivo, podría exportar la interfaz de una tarea. Y dentro de esta tarea, debo declarar qué tipo de propiedades podrían tener los datos de las tareas. Y en mi aplicación, tengo esas propiedades aquí mismo. Tengo un valor terminado de Booleano. Tengo el ID del número, título de la cadena y el ID de usuario del número también. Entonces en mi tarea, voy a crear valor terminado de Booleano. Entonces tendré DNI de número. Entonces tendré titulo de cadena. Y por último, ID de usuario, que será número. Entonces ahora que tenemos nuestro modelo de tareas, en realidad podemos usar este modelo en lugar de deuda. Bueno, cualquier tipo que usemos. Entonces, antes que nada, de vuelta a mi servicio aquí mismo, estoy usando el observable, que devolverá cualquier dato de vuelta. Entonces aquí debería devolver los datos de la tarea. Solo asegúrese de importar la tarea aquí desde un archivo de modelo de datos de tareas adecuado. Aquí dentro. En realidad, no devolverá solo una tarea, sino la variedad de tareas. Entonces aquí voy a establecer que volverá atrás tarea caret. Y como estoy declarando que el tipo genérico aquí, este getMethod, también debería saber qué tipo de datos nos va a recuperar. Entonces voy a pasar de nuevo tipo genérico aquí y otra vez usar esa matriz de tareas con deuda. También debemos corregir el error aquí. Ahora a partir de aquí, vamos a nuestro componente punto de inicio que P es archivo. Aquí dentro. Nosotros sí tenemos nuestra respuesta la cual volveremos solo que cualquier tipo. Entonces aquí voy a volver a establecer tarea a partir de un modelo de tareas específico que creamos. Y será la matriz de tareas. Con esto, prácticamente hemos terminado con esta conferencia. Ya viste ¿cómo puedes usar el módulo HTTP? ¿ Cómo puedes obtener los datos de tu API? Pase esos datos de un servicio a su componente, y realmente creó el modelo para los datos y prepare los datos para que sean utilizables en su aplicación. Al hablar de eso, en la próxima conferencia, haremos exactamente eso. 9. Plantilla: Tan relacionado con esta conferencia, realidad almacenaremos nuestras tareas localmente en nuestro componente doméstico y usaremos bien esas tareas para presentarlas en una pantalla. Entonces antes que nada, vamos a almacenar esas tareas aquí donde estoy obteniendo la respuesta de los datos. De hecho, podría guardar esa respuesta en algún tipo de propiedad. Entonces aquí en la cima, voy a crear propiedad pública de tareas. Y sostendrá el tipo de tarea Curry porque espera que esos datos. Y por defecto, será una matriz vacía. Porque por defecto no sabemos si tenemos algún dato. Pero una vez que obtengamos los datos, una vez que consigamos estas tareas dentro de aquí, usaré esta propiedad dark tasks que acabamos de crear. Y lo pondré igual a la respuesta que estamos recuperando, que son esas tareas bien pendientes de la API de marcador de posición JSON. Ahora que tenemos estos, vayamos a nuestra casa, ese componente, ese archivo HTML y creamos algo de contenido y también estilo a ese contenido. Entonces dentro de aquí, voy a crear el trato. En este div puede contener una clase de tareas. De esta manera será más fácil después de estilizar. Aquí dentro, pondré la etiqueta h3 para un titular, que veremos solo tareas. Y después del titular, en realidad podría crear la lista de tareas. Para ello, voy a crear la tarea de fotos, que contendrá la clase de tareas. Y, ¿qué debería realmente esta tarea aquí? Bueno, podríamos abarcar, bueno, el título de la tarea y voy a poner eso en un lapso. También lo envolveré con el texto en negrita y podríamos escribir, por ejemplo, aprender Angular. Esta es una de las tareas, por ejemplo. Ahora, junto a este título de una tarea, podría ser bueno usar realmente también el valor completado de la tarea. Entonces pudimos ver si completamos tarea específica. Entonces aquí volveré a usar este bolígrafo y por dentro solo usaré texto completado. Aquí puedes usar algún tipo de icono o una imagen, pero voy a usar textos terminados. Así es más fácil. Ahora, vamos a agarrar toda esta tarea y copiarla. Digamos tres tipos, 12. Entonces estas son tres tareas. Vamos, cambiemos los valores para esas tareas. Aquí, voy a decir lavar un auto. Y también el último puede ser por una comida. Eso es más o menos. En nuestra aplicación, deberíamos ver algo así. Déjame acercarme un poco. Entonces sí tenemos nuestro título de tareas. Cada tarea tendrá su propio título similar y además completó el texto para ello. También vamos a estilizar estos un poco ahora. Entonces, para darle estilo a estos, abriré el archivo CSS de punto de componente de punto de inicio. Dentro, voy a agarrar esas tareas principales que tenemos. Voy a establecer el ancho del div para que sea de 500 píxeles. Voy a establecer el margen para que sea de 100 píxeles, arriba y abajo fuera de izquierda y derecha. Así podríamos alinearlo al centro en Daniel establecer el centro de alineación de texto también. Ahora cada tarea que para ayudar, voy a agarrar esa tarea. Voy a exhibir eso como un flujo y justificaré que el contenido interior esté espaciado entre ellos. Y lo último, voy a texto alinear todo al lado izquierdo. De esta manera con este espacio entre nuestro título de una tarea debe estar en el lado izquierdo, en este valor completado debe estar en nuestro lado derecho. Y finalmente, volveré a agarrar esa tarea. Y los elementos span dentro que tengo, solo voy a poner un poco de margen en esos, como diez pixeles, arriba e abajo, 0 pixeles a la izquierda y a la derecha. Y esto es lo que haremos ahora, estas son las tareas. Esta es la lista de esas tareas. Pero obviamente estas tareas están codificadas. En realidad no estamos usando las tareas que obtuvimos de la API. Entonces déjame mostrarte cómo puedes manejar las plantillas en Angular. Para hacer algo así, volveré al HTML. Vamos a utilizar la directiva llamada MD4. Md4 es un bucle que recorrerá algunos datos específicos. En nuestro ejemplo, recorrerá los datos de tareas. Y para cada tarea específica, vamos a generar un paquete de código como este wrapper de tareas, esta tarea div que tenemos con el contenido dentro. Como solo necesitaremos una de estas, en realidad voy a eliminar estas dos tareas. Esto era, estas eran solo la tarea ficticio para que pudiera mostrarla. ¿ Cómo podemos mirar? Pero ahora usemos esa energía para directriz sobre un acuerdo. Voy a usar star luego mg para usar ese bucle. Entonces aquí recorreré mis tareas. Entonces para cada tarea voy a obtener la variable de la vida tarea por ejemplo, esto aquí puedes nombrarla como desees. Voy a limitar tarea para una convención de nomenclatura. Entonces vamos tarea o tareas. Entonces ahora estamos recorriendo estos, a través de todas las tareas. Y todo aquí dentro será, lo va a generar cinco veces porque tenemos cinco tareas. Entonces en vez de para todos esos cinco, solo mostrando este texto, voy a quitar ese aprendizaje Angular. Y aquí voy a usar la tarea en sí. Y en una tarea, sí tengo propiedad de título. Entonces, cada tarea debe tener aquí un título propio. Y ahora aquí está. Tenemos nuestras tareas apropiadas de esa API de marcador de posición JSON. Se puede ver que todas las tareas tendrán su propio título propio y el valor completado junto a las, que aún no se utiliza correctamente. Lo usaremos correctamente en el siguiente video cuando trabajemos con un estilo específico para ello. Pero antes de terminar este video, olvidé que también tenemos sobre la página. Así que agreguemos algo de contenido a esta página Acerca de. Para esta página Acerca de, voy a crear un div, que contendrá la clase de contenido principal. En el interior, realmente creo el párrafo con algún texto de Lorem Ipsum. Este párrafo, permítame agarrar este texto y de hecho copiado pocas veces así. Ahora desde aquí voy a abrir el archivo CSS, agarrar esa clase de contenido principal que tenemos. Voy a establecer el ancho para que sea de 900 píxeles y también el margen para que sea 50 píxeles arriba y abajo fuera de tu izquierda y derecha. Con esto aquí, con nuestra página de inicio casi terminada. También tendremos el acerca terminado, bueno, Acerca de la página terminada también. Para la página Acerca de, no deseo mostrar nada mucho porque todo el contenido de la aplicación de tareas sucederá en una página de inicio. Pero como ya tenemos esta página Acerca de, vamos a ponerle un poco de contenido ficticio. Se puede jugar con él. Puedes usar algunas imágenes. Podrías, por ejemplo, establecer el título e incluso utilizar las tareas desde aquí, también una página Acerca de. Depende de ti. Pero para el siguiente video, en realidad trabajaremos con el estilo. Para que puedas ver qué estilo diferente podemos usar en Angular. Y también, ¿cómo podemos usar estilo dinámico también para cada elemento específico? 10. Aplicar estilo: Entonces, ¿cuáles son esos diferentes estilos que podemos usar en Angular? Bueno, antes que nada, cuando generamos nuestra aplicación, ya viste que podías elegir un formato de hoja de estilo diferente como CSS, Sass, less, y así sucesivamente. Pero también a la hora de diseñar tu app, también tienes diferentes métodos. Entonces, por ejemplo, si abriera este angular, ese archivo JSON, en este archivo, aquí hay una matriz Styles. De hecho, podríamos importar aquí estilos externos como de bibliotecas de terceros como Bootstrap o tailwind. Al lado de eso. En nuestra aplicación, también deberíamos tener estos estilos ese archivo CSS, este es un archivo de estilos globales y ya puedes ver el comentario aquí que puedes agregar los estilos globales a este archivo y también importar otros archivos de estilos. Esto aquí es muy útil cuando se trabaja con SAS, por ejemplo. Para que puedas importar todos tus propios archivos que tengas en un archivo junto a la deuda. Si me fuera a casa. Dentro del componente home, podemos encontrar un archivo CSS, por lo que somos capaces de darle estilo a cada componente con su propio estilo específico. Y si le daría estilo a algo específico en este componente, bueno, ese código CSS solo es específico del componente de deuda, por lo que no se pasará a otros componentes. Y obviamente hay estilos inline que ya podemos usar en HTML. Pero también podemos utilizar aún más estos estilos en línea para algunos estilos específicos para nuestros elementos específicos que deseamos. Entonces, por ejemplo, sí tengo estas tareas en mi pantalla, y algunas de esas tareas están realmente completadas, pero no estoy indicando eso aquí en absoluto. Se acaba de completar el texto aquí. Entonces ahora voy a usar esos estilos en línea para estilizar solo las tareas específicas que se completan con la línea a través de estos textos. Entonces, para hacer tal cosa en mi texto completado aquí, puedo usar estos corchetes angulares y usar el estilo aquí. Por esto, estoy vinculando el atributo style de este elemento span. Aquí, usaré punto y luego usaré decoración de texto, lo que significa que estoy apuntando al atributo específico de decoración de texto. He escrito mal aquí. Decoraciónde texto. Sí. Y voy a poner eso para que sea igual aquí. Lo que voy a hacer, comprobaré si mi tarea está concluida. Así podría comprobar si es verdad o simplemente tareas que completaron. También comprobaremos si el valor es verdadero. Si ese es el caso, voy a usar la línea para gobernar el estilo aquí. Escribió mal otra vez, usted tiene. Y si ese no es el caso, solo usaré cadena vacía aquí, así que no hay estilo aquí en absoluto. Ahora en mi pantalla, realidad puedo ver que estas completadas, esta tarea. Tiene este valor terminado. Ya está terminada la tarea, lo cual es genial. ¿ Cómo podríamos más, trabajaremos con esta aplicación de tareas. Bueno, sería bueno que realmente pudiéramos completar o incompletar una de nuestras tareas. Entonces para eso, me mudaré a casa ese componente dot txt file. Y aquí voy a crear un método. Entonces después de este motor en él, voy a crear un método público porque este método se utilizará fuera de este archivo. Y el método dirá tarea completa. El método no devolverá nada atrás, por lo que aquí será un método void. Esta tarea completa esperará que se le pase la tarea. Y la tarea debe tener su propio tipo propio, que es el modelo de tareas que ya creamos. Y lo que voy a hacer, voy a agarrar esa tarea y un valor terminado en ella. Y lo voy a poner igual a, bueno, solo invertido. Entonces tarea punto completado de nuevo con este signo de exclamación al inicio. Entonces esto significa que si el valor completado es falso, será cierto. Si es verdad, entonces será falso. Para que así pudiéramos completar una tarea inconclusa todo de una sola vez. Entonces, ¿cómo podríamos usar esta tarea completa ahora? Bueno, en mi casa, ese componente, ese archivo HTML, lo usaré aquí mismo cuando haga clic en este texto completado. Antes que nada, déjame bajar esto un poco para que veas todo con claridad. Entonces tenemos nuestro estilo aquí y aquí, ahora usaré clic evento. Para usar el evento click, solo usamos llaves aquí y tenemos opciones para diferentes eventos. Utilizaré el evento click, y una vez que se haga clic en este texto, usaré ese método de tarea completa que actualmente hay un error porque esta tarea completa realmente espera una tarea específica. Entonces aquí solo voy a pasar la tarea específica de nuestra regla, de nuestra tarea, nuestro NG for loop. Ahora de vuelta a mi aplicación aquí. Si pulsara en, por ejemplo, este texto completado, podemos ver que es un poco completo que Vamos a mover su valor de falso a verdadero. Y si el valor es cierto, entonces tendremos que alinear esa decoración de texto . Por lo que aquí estamos completando nuestras tareas. También, podría hacer clic nuevo para completar esas tareas también. Entonces con esto, viste lo simple que es con solo una función en el poco de estilo en línea para tener estilos específicos para cada una de nuestras tareas en nuestra matriz. Y con esto de aquí, estamos terminados. Esto es, esta es nuestra aplicación, pero todavía estamos aquí. Una cosa que hacer, y eso es el despliegue. 11. Implementación: Entonces al desplegar la aplicación Angular, escuchamos múltiples opciones para hacer eso. Además, antes de desplegarnos, hay un par de pasos que debemos encargarnos. Por ejemplo, deberíamos construir nuestra aplicación. Como saben, nuestra aplicación actual que escuchamos, bueno, todos los componentes son en realidad archivos TypeScript. mecanografiado es algo que no es legible en un navegador. El navegador lee JavaScript. Entonces, al construir la aplicación Angular, también compilaremos el código TypeScript en nuestro código JavaScript. Y es por eso que Angular es framework JavaScript a pesar de que usa tipos. Entonces, ¿dónde podemos desplegar esta singular aplicación? Bueno, hay múltiples opciones. Podríamos simplemente desplegarlo, por ejemplo, a Netlify, o podríamos construir algo de plata personalizado y desplegar todo junto a Heroku. Pero probablemente tomaré el enfoque más fácil aquí, que es el despliegue en Firebase. Ese enfoque también es más profesional porque el Firebase se usa muy a menudo con Angular. Entonces, ¿por qué Firebase? Firebase y angular will, ambos son en realidad productos de Google. Por muertos. Esos están muy bien conectados entre sí. Por lo que es realmente fácil implementar la aplicación de Inglaterra en Firebase. Firebase es un producto de Google, nos ofrecerá muchas características diferentes. Nos puede ofrecer como base de datos en tiempo real o una tienda de bomberos, su propia base de datos. Nos puede ofrecer un hosting que usaremos en este video. Bueno, para publicar nuestra aplicación en Firebase Hosting. Hay un montón de diferentes características y productos que los usuarios de Firebase. Y verás esos Wellstone cuando entre de hecho en la Firebase. Entonces, antes de que hagamos algo aquí, asegúrate de tener una cuenta de firebase. Así que toma tu correo electrónico y regístrate en Firebase. Es gratis, así puedes hacerlo. Una vez que tengas la configuración de tu cuenta, puedes seguir este video e implementar tu aplicación de tareas. Entonces, si tienes tu propia cuenta de Firebase, deberías ser redirigido a este espacio de trabajo de consola de Firebase. Así que aquí dentro, en realidad podemos crear un proyecto. Bueno, un proyecto de Firebase. Ya puedes ver que tengo algunos proyectos ficticios de tutoriales anteriores, pero centrémonos en este. Entonces, para crear el proyecto, da clic en este Agregar proyecto. Obviamente en, aquí dentro, debemos escribir el nombre del producto para que pierda tarea. El nombre será Task up, pero en realidad habrá un id específico asignado a ese proyecto. Por lo que será único para tu, tu perfil. Desde aquí, puedo hacer clic en Continuar, y luego nos preguntan sobre el Google Analytics. Así se utilizará Google Analytics para que Firebase pueda configurarlo automáticamente para nosotros. Deshabilitaré este año porque en realidad no usamos Google Analytics y nuestro límite de tareas es una aplicación muy sencilla. Así que simplemente podemos ir y crear el proyecto aquí. Puedes esperar un poco, y pronto se creará el proyecto. Después de eso, deberías ser redirigido al tablero de tu proyecto. Bueno, ¡Ups! Mi error. No estabas listo dirigido. Por lo que debes hacer clic en estos botón Continuar para resucitar. Y aquí está. Esto es en realidad un proyecto. Este es tu proyecto. Vamos a ponernos el muro, a ver qué tenemos en este proyecto de Firebase. Esto no es importante para este tutorial, pero es muy bueno saberlo porque Firebase es un producto muy alto por ahí y se usa muy a menudo. Entonces aquí, antes que nada, podemos comenzar con Firebase implementando una de nuestras aplicaciones como iOS, Android, VAB, incluso las aplicaciones unity y flatter son compatibles con Firebase. Además, en el lado izquierdo, tenemos diferentes opciones. Si alterno esta compilación, hay todo lo que va a necesitar nuestra aplicación. Básicamente, tenemos autenticación específica, tenemos base de datos, tenemos una base de datos en tiempo real. Hay extensiones, almacenamiento, hosting y muchas otras cosas, incluso aprendizaje automático. Ahora bien, esto es solo sobre el proyecto, pero si iría a lanzar y monitorear, esta es esa parte con el analytics, comprobará el rendimiento de la aplicación para que puedas ver si hay cualquiercaída junto a la deuda. El análisis en sí, el Google Analytics, está completamente convertido aquí. Así tendrás tu propio dashboard y podrás seguir junto con el tiempo real, tus eventos específicos, tus conversiones, puedes seguir básicamente todo dentro del dashboard de Firebase. Y por último, hay una sección comprometida, que se utiliza principalmente con fines de mercadotecnia. Botón nivel anexo, yo diría que hay pruebas AB que puedes configurar, llegar a tu aplicación. Es decir, agrega más de lo que puedas conectar y de hecho tener tus anuncios directamente en tu aplicación presentando. Y hay mucho más que ver con eso. Aquí puedes ver todos los productos que realmente admite Firebase, y eso es un buen montón de productos. Necesitas saber que cada uno de estos es básicamente un producto separado que es compatible con este producto global de Firebase, lo cual es increíble. Entonces volveré a la visión general de mi proyecto. Y podemos empezar desde aquí. Y me gustó una vez más, antes de hacer nada con la Firebase y conectamos nuestro proyecto con la Firebase. Deberíamos construir nuestra aplicación. Deberíamos compilar ese TypeScript en JavaScript. Para hacer eso, simplemente puedes usar NG build. En versiones anteriores de Angular, también hay que usar dash, dash prod. Esta es una bandera que indicará que necesita construir para la producción. Pero en esta versión, lo hará por defecto. Así que solo usa el comando de n g build para construir realmente tu proyecto. Si la compilación funcionó con éxito dentro de tu proyecto, deberías tener una nueva carpeta llamada beast para su distribución. Y dentro debería ser o aplicación de tarea, pero esta vez en el código JavaScript, bueno, el código está bastante liado, minimizado, así que es difícil de leer, pero eso es prácticamente todo. Ahora tenemos nuestra aplicación de distribución, bueno, nuestra aplicación lista para ir a producción. Ahora de vuelta a nuestra visión general del proyecto. Dentro de aquí entraré en esta sección de compilación y seleccionaré hosting. Ahora, dentro del hosting, deberíamos habilitarlo o comenzar con él. Entonces voy a hacer click en esto y básicamente están los pasos que debes dar. En primer lugar, debemos asegurarnos de que tenemos las herramientas de Firebase instaladas globalmente de la misma manera que lo hicimos para Angular CLI, ya que Firebase en realidad tiene su propia herramienta CLI que ayúdanos con las aplicaciones de Firebase. Bueno, productos de Firebase, ya tengo instaladas estas herramientas de Firebase, pero seguiré con esto. Para que puedas ver el proceso en sí. Ahora en el terminal, realidad voy a quitar esto, voy a borrar esta parte del terminal, y luego voy a pegar ese npm instalar dash g para globalmente y Firebase para golpear Enter y esperar paraque se instale. Ahora, una vez que se instaló, volveré a despejar mi terminal. Ahora, lo siguiente, debido a que tenemos instaladas las herramientas de Firebase, podemos usar el método de inicio de sesión de Firebase para realmente iniciar sesión tu propia herramienta CLI V a la Firebase en la web. Así que asegúrate de ejecutar este método. También escribí mal el inicio de sesión de Firebase. Y asegúrate de ejecutar este método, serás redirigido a la versión web del login. Ingresarás con tu cuenta adecuada y podrás volver aquí y seguir trabajando con esta herramienta CLI. Para mí, ya estoy conectado con mi usuario, así que realmente no necesito hacer eso. Pero lo que tenemos que hacer es inicializar el proyecto Firebase en nuestra aplicación. Para ello, debo ejecutar una Firebase en ella para inicializarla. Entonces Firebase solo va a pedir confirmación o ya estamos listos para continuar e iré sí, aquí. Ahora aquí adentro, tal vez esto se acerque bastante. Déjame alejar un poco para que lo veas. Pero aquí, tenemos diferentes productos de Firebase que podemos usar como base de datos en tiempo real vía hosting de funciones de restauración. Esta parte es lo que necesitamos. Además, hay dos tipos de hosting. Una es alojar directamente desde GitHub. Y esto, el primero es configurar los archivos que deseamos publicar el hosting. Y opcionalmente podríamos configurar el GitHub. Y yo iré con la muerte. Entonces aquí voy a golpear espacio para seleccionarlo y luego Enter para confirmarlo. Ahora una vez más aquí ahora tenemos opción de utilizar nuestro propio proyecto específico. Así podremos usar proyecto existente, crear un nuevo proyecto con las herramientas de Firebase, The Fighter basado en el proyecto existente de Google Cloud Platform. Pero no me voy a molestar con eso. Definitivamente usaremos proyecto existente porque ya creamos la aplicación de tareas. Y ahora aquí deberíamos ver la lista de nuestros proyectos. Y voy a ir con esta tarea arriba. Ahora nos preguntan, ¿qué quieres usar como tu directorio público? Lo que básicamente están diciendo es qué parte de tu directorio de roles debemos desplegar en hosting. Y para la deuda, esa será nuestra parte más profunda. Bien dist carpeta y aplicación de tareas dentro porque esta es la aplicación viable real en la web. Entonces para hacer eso, voy a perder aquí esta y luego recortar la tarea. En Idaho. Si puedes ver esto correctamente, alejaré un poco aún más. Entonces esta tarea de barra arriba. Ahora podemos configurar esta aplicación como una aplicación de una sola página. Bueno, Angular es un framework para aplicaciones de una sola página. Entonces iré sí, aquí también. Ahora, ¿deseamos configurar la compilación automática y la implementación con pozo?, despliega con regalo up. Y esta es esa parte opcional. Entonces voy a ir no aquí porque no tenemos repositorio GitHub para este proyecto en absoluto. Ahora bien, esto es una especie de advertencia o un mensaje de error como ese. El archivo index.HTML ya existe en nuestra aplicación de tareas. Y esa es más o menos la verdad en nuestro disco. Entonces barra tope de tarea, tenemos nuestro archivo index.HTML, que es básicamente nuestro contenido HTML. Pero aquí se nos pide que lo hagamos. Deseamos sobrescribir eso. Bueno, no, todavía deseamos mantener nuestro contenido HTML de nuestra aplicación. Y con esto, inicializamos con éxito el proyecto Firebase. Bueno básicamente conectamos nuestra aplicación angular con el proyecto Firebase. Entonces solo hay una cosa más que hacer para implementarlo realmente en el hosting. Voy a aclarar esto aquí. Ahora voy a hacer zoom un poco. Para desplegarlo. Simplemente podemos usar Firebase deploy. Entonces, ¿cómo sabrá Firebase realmente lo que necesita implementar? Mientras que aquí, cuando inicializamos el proyecto con Firebase, en realidad obtuvimos dos archivos nuevos. El primer archivo es en realidad el proyecto que está conectado a esta aplicación, que es nuestro tope de tareas. Y el punto json de Firebase es la configuración del proyecto. Por ejemplo, lo que se debe implementar es que esta aplicación de tareas de barra diagonal. Esto es lo que configuramos. Hay reescrituras que podemos hacer. Hay encabezados que podemos establecer aquí y así sucesivamente y así sucesivamente. Pero esta es una configuración básica que se la dirá a Firebase, bien, esto es lo que deseo desplegar a todo el asunto. Así que simplemente podemos continuar aquí, desplegar Firebase, golpear Enter, y solo esperar a que lo despliegue. Ahora una vez que todo esté desplegado, podríamos, en realidad obtendremos esta URL ficticio directamente a nuestras aplicaciones para que podamos abrirla. Pero no voy a hacer eso. Regresaré a mi Firebase aquí. Como ahora tenemos un alojamiento de configuración, realmente no necesitamos dar seguimiento con estos pasos porque ya hicimos esos pasos. Así que sólo vamos a ir x aquí. Todo el asunto en sí. Podría refrescar la página. Y en un sitio de hosting, ya tenemos nuestra Firebase. Bueno, nuestra aplicación angular, podemos ver, bueno ya no tenemos ese botón de Empezar, pero en realidad nuestra aplicación en la parte inferior veremos también el historial de lanzamientos y también diferentes canales que podemos usar. Pero aquí, si me gustaría hacer clic en esta URL, se abrirá nuestra aplicación en vivo. Por lo que esta aplicación está completamente desplegada en Firebase y lista para ser utilizada. Están listos para que un mundo lo vea. Y podemos ver que nuestras llamadas HTTP también funcionan porque estamos obteniendo los datos de las llamadas HTTP. Y también somos capaces de completar o incompletar que nuestro ruteo está funcionando. Cuando cambio la ruta, hay un contenido en una página diferente, pero eso es prácticamente todo. Entonces con esto aquí chicos, pudimos finalizar nuestra aplicación de tareas y de hecho desplegamos en Firebase. Ahora, saltemos todos al siguiente video para poder darte las gracias propiamente dichas. 12. Gracias y adiós: Bueno, eso es más o menos. Gracias una vez más por tomar este curso en primer lugar. Si te quedaste al final de estas puntuaciones, en realidad tienes tu propia aplicación de tareas angulares construida e implementada. Ahora, puede usar esa aplicación de tareas para su propio portafolio a medida que implementamos la aplicación. Así que realmente te puede ayudar a lo largo tu carrera mientras construimos esa aplicación de tareas, sinceramente espero que aprendas algo nuevo, o al menos que actualices tu conocimiento de ello a través de esto aplicación. Y trabajamos con muchas características principales diferentes de componentes Angular, Servicios, módulo HTTP, enrutamiento, etc. Pero lo que debes saber también es que está pasando mucho más que solo en mi canal de YouTube. En realidad se puede encontrar la serie angular is central donde vamos a todas las características que Angular tiene para ofrecernos. Y si te interesa el material, esa también es la serie Angular Material para ti también. Ahora una vez más, antes de cerrar este curso, bueno, mi nombre es Stefano matrimonio, y tengo más de siete años de experiencia en desarrollo web. Al lado de eso, fui tu instructor a través de este curso. Y como mencioné, junto a estos cursos de Skillshare, también escucho mi canal de YouTube llamado numérico. Así que asegúrate de comprobarlo también. Además, si quieres ver más cursos de mi parte aquí en Skillshare, puedes visitar mi perfil y seleccionar uno de mis cursos que tengo ahí. Por ejemplo, ahí también hay curso Angular. Hay otros cursos para JavaScript, Bootstrap Node JS, JS, y así sucesivamente. Pero con esto, estamos prácticamente terminados. Gracias a todos una vez más, gracias por tomar este curso. Terminando el curso, en realidad, también asegúrate de presentar tus propios proyectos y que construyas a través estas puntuaciones en la sección de proyectos de este curso. todos juntos podamos ir a esos, hablar de esos tal vez también tienes algunas preguntas específicas que podría responder, pero gracias a todos una vez más, y los veo en mis otros cursos. Adiós.