Master Angular 2 - Parte 3 - Componentes

1. Introducción a Angular 2 en Skillshare: hola y bienvenidos a este módulo en angular, también. Ahora este módulo es todo sobre lo que puedas ver en tu título. Actualmente he seleccionado el módulo de componentes, pero podrías estar en cualquier otro módulo. Depende exactamente lo que diga tu título. Si recién llegas aquí ahora y eres nuevo en angular, también, también, entonces solo vas a encontrar lo que sea que haya en este título. Entonces en este caso, sus componentes, aunque podrías estar buscando enraizamientos o cualquier otra cosa. Si no sabes nada de angular a, lo mejor es hacer clic en mi perfil haciendo clic en uno de los enlaces de la mano superior derecha o buscando angular dentro de nave de habilidad y encontrando mis cursos. Una vez que hayas hecho eso, puedes seguir adelante y empezar en el número uno. Es el primer curso que publiqué en mi perfil. Entonces, vuelve ahí atrás. Si eres completamente nuevo en angular, también, es muy importante que te quites toda esta serie de tutoriales desde el principio , así que ve por ahí ahora mismo. De lo contrario, si te interesa el tema que está aquí arriba componentes, entonces a veces los divido en dos secciones, por lo que es posible que tengas que hacer clic en la sección número tres una vez que hayas completado esta sección en particular . Entonces, en general, estás en el lugar correcto para aprender angular, para hacer clic y rodar, y empecemos. 2. 2 4 Registra tus componentes para uso: De acuerdo, entonces tenemos un bonito componente de imagen nuevo listo para salir? Bueno, ya casi está listo para irse. ¿ Y por qué digo eso? Bueno, angular no es exactamente como los lenguajes de programación tradicionales, si de ahí vienes. Y estoy seguro de que sabes que javascript es un poco diferente. Es más forma libre que a lo que estamos acostumbrados. Mangula tipo de le da una estructura agradable, pero en un lenguaje de programación tradicional, crearías una clase. Y si estás usando C sharp, por ejemplo, por ejemplo, esa clase se sentaría y algunos dentro de algún tipo de espacio de nombres, y entonces podrías acceder de inmediato a ese componente en otro lugar. Podrías simplemente decir nuevo componente de imagen, y crearía un objeto para ti, no del todo el caso con angular, porque no hay compilación riel fuera de nuestro programa. Sucedir en segundo plano es más de lo que llamamos una traducción, que es simplemente traducir de nuestro mecanografiado a JavaScript. Entonces, ¿cómo sabemos dónde está el componente de imagen? Si estamos hablando de angular demasiado bien en el módulo app dot ts angular va y tiene un vistazo a todos los módulos que tiene disponibles. Piensa en esto es una especie del mapa o la referencia Esa es una mejor explicación. Explicación la referencia a la que debe acudir siempre que necesite encontrar algo que hemos nombrado. Y ya puedes ver esto en acción aquí. Dentro de esto en decorador de módulo de energía, tenemos un array off declaraciones, y el 1er 1 de esas es apt componente. Ahora, obviamente, sabemos qué es eso, porque si vamos al componente de aplicación Doctor, Sí, ahí está. No es tan angular sabe que el componente de la aplicación está ahí. Si volvemos al módulo, lo que podemos hacer ahora es importar dentro de esta matriz de declaraciones, nuestro componente de imagen. Pero antes de que realmente podamos hacer eso, primero tenemos que importarlo en la parte superior en un comunicado. Entonces vamos a tener componentes de imagen bien desde y luego entre comillas, vamos a poner la dirección en la que está el componente de imagen. Ahora. Si nos fijamos en dónde esta carpeta apt up module dot ts. Lo que queremos hacer es entrar en los componentes de la imagen y luego conseguirlo a partir de ahí. Ahora, la forma en que hacemos eso es navegar hacia él. Entonces lo que queremos hacer es mirar la carpeta actual en la que estamos, que es la slash de puntos y luego le damos el nombre de la carpeta porque la carpeta del componente de imagen está dentro de esa misma carpeta. Así que digamos image dash components forward slash y luego le damos el nombre del archivo de componentes espera su campo automático algo para su. Para mí ahí. No hacemos ese componente de punto de imagen y notarás que no agregamos en el dock ts porque no necesitamos finales de archivo para esta parte. En otros lugares lo hacemos. Es un poco frustrante. En realidad no se han mantenido verdaderos Teoh algún tipo de marco. Pero supongo que esa es una de las grandes cosas de angular dos es donde tiene una de las cosas malas , dependiendo de tu punto de vista. Entonces lo que hemos hecho aquí es que hemos entrado en esta carpeta en la misma sección, y hemos buscado el componente de imagen. Y si no consigues una línea roja, por ejemplo, si la escribo mal, obtengo una línea roja, entonces eso significa que el estudio visual realmente la ha encontrado. Eso significa que ahora lo tenemos disponible para importar en nuestra declaración. Por lo que tenemos el componente de imagen ahí Ahora nuestro componente de imagen está registrado y listo para su uso. Y en la próxima conferencia te mostraremos cómo realmente lo usamos. Pero por ahora, solo quiero mostrarte, uh lo que olvidé ¿qué? Te iba a mostrar por un segundo ahí. Vamos, juntaselo. Correcto. Contamos con nuestros componentes de imagen. Ah, eso fue todo. Si solo elimino esto, no dejes que el tuyo solo me vea componentes de imagen, y te darás cuenta de que consigo este pop up que probablemente no obtienes, y eso me permite importar automáticamente lo que necesito. Y es un ah infierno de un ahorrador de tiempo. Entonces déjame guardar eso y déjame mostrarte de dónde sacas eso en código de estudio visual, puedes conseguir un enchufe o una extensión, que es este pequeño ícono aquí cuando haces clic en esos, Estos son los que he instalado angular a mecanografiado. Soy su auto importacion es la que quieres y tal vez npm intelli ya que así, si buscas auto import, si solo hago click en que hay la que debes buscar y verás cuando ponga sus entradas en ella. Importaciones de automóviles para él como acabamos de ver. Entonces esa es una extensión muy útil para conocer. De acuerdo, así que adelante, instala eso si lo necesitas. Pero ahora te he mostrado donde angular mantiene un registro de todos los componentes que has hecho para que podamos usarlos a lo largo de nuestra app. 3. 2 5 con tus componentes: todo bien. Es hora de usar realmente nuestro componente. Lo hemos declarado en nuestro módulo APP. Déjenme cerrar eso. Y en realidad lo hemos creado por sí mismo. Entonces podemos cerrar eso también. Ahora bien, ¿ cómo usamos el componente? Bueno, usemos esto en un lado de nuestro componente APP punto T s y dentro de aquí Ahora estamos viendo esta plantilla u r l y la plantilla Earl es donde realmente usas el componente. Entonces vamos a abrir el componente app dot html y luego dentro de aquí podemos dejar todas estas cosas y abajo. Vamos a crear en poco div hacia adelante slash rígido. Mi formato está un poco estropeado. Ahí vamos. Y dentro de aquí, realidad lo vamos a alimentar al componente de imagen con creado. Ahora recuerda los componentes de la imagen. En este punto, sólo salidas enfrenta una imagen sólo para que sepamos que funciona. Lo que necesitamos usar es este selector a imagen. Así que ve al HTML y simplemente usa en dash image y luego cierra tu etiqueta. Ahora di que ve a tu app la cual debería descubrir que necesita volver a compilar. Te recargará la página y vamos a ver, ahí vamos. Tenemos Esta es una imagen látigos dedo equivocado. Entonces eso ahora se incluye el componente para nosotros. Pero eso no es todo lo que quiero mostrarles. Mira, ¿qué pasa si copio esto y dejo caer otro y lo guardo? Volvemos, se re compila y obtienes exactamente los resultados que esperas, que es a esto es una imagen. Ahora, ¿por qué he hecho eso? Bueno, te puedes imaginar si tuvieras algún tipo de aplicación enorme y dentro de esa aplicación, digamos que sabes, compraste este curso Así que es buen ejemplo. Digamos que tienes en la etiqueta de curso sí y lo cierras y luego dentro de la etiqueta del curso de la app , vas a tener quizás los favoritos de la app tag Teoh market. Algo es tus favoritos. Podrían tener detalles de la aplicación y ¿pueden ver cómo tipo de debilitar las cosas de nido dentro de los componentes? Por lo que más adelante, si quiero crear una lista de desplazamiento de 100 cursos, todo lo que necesitaría hacer era incluir la etiqueta del curso AP y eso a su vez incluiría los detalles de la APP incluiría el favorito out, y usaría todos estos componentes una y otra vez de una manera muy modular. Y si eres un programador clásico de una manera de programación muy clásica, porque quiero decir que así es básicamente como hacemos las cosas en lenguajes clásicos. Entonces si guardo eso, solo te mostraré este pedacito. Mira lo que le pasa a nuestra APP. Re compilar, volver a compilar, recargar y chocar. Todo el asunto se estrellará. Entonces, ¿sabes cómo dije que es como la programación clásica? Bueno, en términos de choques, sin duda lo es. Y no conseguirías esto en simple y viejo JavaScript. Pero lo haces en angular también. Y te dice que tenemos algunos errores pasados de plantilla, así que vamos a conseguir los eventos de rid y vamos a cubrir la depuración un poco más adelante y de hecho se deshará de esta imagen de APP. Entonces ahora si digo que nuestra APP debe estar de vuelta a la normalidad y en cuanto vuelva a la normalidad , vamos a ver esta sección nuestro desarraigo. Permítanme ampliar esto. Tenemos I h un r p y tenemos el DIV que contiene nuestra imagen. Entonces eso es lo básico off, crear un componente en angular a y luego registrarlo para su uso y luego usarlo dentro otro componente. Por lo que felicidades ahora casi sabes todo lo que necesitas saber sobre angular. A eso es lo fundamental que debes saber para APS básicas, angulares. 4. 2 6 Resumen de los componentes: De acuerdo, Esto es sólo un pequeño resumen rápido de todo lo que has aprendido. Lo que quiero que le quites a este módulo es que todo es un componente en angular . Si puedes dividirlo en un componente, entonces hazlo, sobre todo si vas a reutilizar ese componente. Y acabo de sacar mega Boone dot com, que es un sitio de música donde puedes comprar música y este es un gran ejemplo de crear componentes. Ahora no sé cuál es su arquitectura, pero puedes ver claramente que tienes unos componentes por aquí abajo, que es, ya sabes, ya sabes, probablemente como la vista previa del álbum. Tenemos componentes aquí abajo, que es una gran vista previa del álbum. A lo mejor hemos rastreado previsualizaciones a un lado, y estos son todos componentes reutilizados. Por lo que esto sería en realidad bastante simple de hacer en angular dos. A pesar de lo complejo que se ve. Es sólo un puñado de Dave que tienen un montón fuera. Ah, a lo que les llamas etiquetas. Una palabra tan grande, ¿no? Ten un montón de etiquetas que hagan referencia a todos los componentes que vas a usar, Así que si te llevas una cosa, son todos los componentes que creas en angular, necesitas empezar a mirar sitios web como lo verías en la Matrix, sólo un montón de código en un montón de componentes que todas las ranuras juntas. Está bien. Con eso dicho, ahora estamos listos para seguir adelante y empezar a aprender algunos conceptos más fundamentales fuera de angular a en el siguiente módulo. 5. Cómo seguir el aprendizaje: Enhorabuena. Terminas esto. Un módulo muy rápido sobre angular al ahora, si quieres seguir aprendiendo y ¿por qué no lo harías? Porque angular es bastante impresionante. Entonces hay una manera fácil de hacer eso. Yo lo he configurado, así que es bonito y sencillo. Pocos y habilidad comparten lo que ves en la esquina inferior de la imagen en pantalla, hay un número que es un número secuencial. También lo puedes ver en el título fuera del curso. Entonces, por ejemplo, esta es la primera parte, pero podrías estar en la parte cinco o la parte 50. No importa si quieres acceder a la siguiente parte de este curso, entonces simplemente busca angular dos o ve a mi página de perfil haciendo clic en uno de los enlaces relevantes arriba en la esquina superior derecha, y verás una lista de los cursos que enseño. Posibilidades. ¿ Estás confinado? Se puede avistar de inmediato cuál es el siguiente, por lo que en este caso es el número dos. Pero en tu caso podría ser el número 51. Entonces así es como continúas. Simplemente haz clic en el curso ahora e insértate para continuar tu aprendizaje angular, aunque no lo vayas a completar en este momento. Es buena idea inscribirse ahora. Para que sepas dónde estás la próxima vez que inicies sesión en share de habilidades y quieres mantener la experiencia de aprendizaje en marcha, te veré en el siguiente módulo.