Master Angular 2 - Parte 2 - 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 1 Introducción a los componentes: hola y bienvenidos a este segundo módulo sobre crear increíble ábside Web con angular dos. Ahora, hasta el momento, tenemos una app muy básica llamada APP Works and Grant. Y si hago clic derecho en esto, que no puedo hacer en safari. Entonces lo que voy a hacer es copiar esta dirección. Voy a abrir Google Chrome, y sólo lo voy a pegar aquí. Anfitrión local 4200. Tenemos esta app ahora si hago clic derecho y hago clic en Inspeccionar, voy a abrir mi consola al costado aquí y me va a mostrar cómo se presenta mi HTML . Y solo te estoy llevando a través de esto antes de que sigamos con cosas de programación. Simplemente tienes una sensación de lo angular que se presenta. Y como cabría esperar, esta es una página web básica. Tenemos una declaración HTML en la parte superior. Tenemos sección por delante donde podemos cargar hojas muy de estilo y varios enlaces. Entonces si quieres poner bibliotecas javascript aquí, podrías hacer eso. Pero en general, no harías eso. Primero buscarías una biblioteca, y también tenemos esta sección de cuerpo la cual contiene nuestra aplicación real y dentro de nuestra app tenemos uproot y recuerda que uproot fue esta etiqueta que en realidad se especificó dentro del primer componente que miramos y luego dentro de ahí tenemos una H uno y A P, y a estos se les ha dado este especial esfuerzo de guión contenido energético, ver nota de plato. Eso es sólo una cosa angular, y eso nos permite poner nuestras propias variables en como App Works y Grant. Entonces eso es sólo una recapitulación rápida de todo lo que hemos cubierto en la primera sección. Para que sepas cómo funciona angular justo en este apartado. Vamos a ver cómo crear otro componente, y ¿por qué querríamos hacer eso? Bueno, hay una razón muy, muy importante, y sólo te mostraré si voy a lo que sea el Manchester Weather Report, ¿por qué no? Vayamos aquí ahora. Esto probablemente no esté escrito en angular, correctamente escrito en PHP. Pero lo que se puede ver aquí es ah, toda la mishmash de información, ¿ verdad? Y también se puede ver Manchester se está congelando, razón por la cual me alejé de Manchester y siempre lloviendo. Pero eso a un lado, lo que se puede ver es toda esta información. Pero como desarrollador, necesitas empezar a buscar algo más allá de toda esta información, y necesitas buscar en las partes fuera de la página. Ahora bien, ¿qué quiero decir con eso? Es decir, aquí tenemos esta sección de acciones y en angular, hay que empezar a pensar de manera modular. Entonces en angular, si quieres compartir algo, no crearías una sección de compartir en tu componente. Lo que harías es crear un componente que se trata de compartir. Por lo que esta sección aquí con los enlaces para compartir sería un componente. Después tomas ese componente y lo pondrías dentro de cualquier página en la que se necesite. Y puedes ver de inmediato que ahorrarías mucho tiempo de escritura de código y mucho tiempo para cambiar el código. Si alguna vez necesitas cambiar las cosas en el futuro, porque tu componente está en un solo lugar, que es solo una buena práctica básica de programación, realmente correcto. Y luego tienes otros componentes, como si tuvieras este cuadro de búsqueda, que es un componente. Tienes estos encabezados. Tienes este menú superior el cual también sería componentes separados, por lo que puedes ver cómo podemos separar las cosas en sus propios módulos independientes, lo que facilita su uso dentro de diferentes partes fuera de nuestra aplicación. O de hecho, incluso podemos levantarlos y ponerlos en aplicaciones completamente nuevas. Si así lo deseamos, podemos compartirlos como módulos con otros desarrolladores. Simplemente hace que todo sea mucho más fácil de manejar en términos de programación, ¿ verdad? Entonces veamos ahora cómo crear nuestro primer módulo. Pero en la próxima conferencia, solo voy a caminar por un par de opciones que tienes para editores para angular, también, y te mostraré cuál es mi favorita. Es completamente gratis, y depende completamente de ti cuál elijas. 3. 2 ¿2de qué editor de códigos debería usar?: De acuerdo, echemos un vistazo a algunos editores para el código que vamos a escribir. Hasta ahora, me has visto usar un editor, pero te voy a pasar por unas cuantas opciones para que sepas lo que hay ahí afuera. El 1er 1 es bastante popular, y esto es sublime, Tex. Y esto también soportará angular a Si no me equivoco, realidad no lo he usado, pero he oído que sí lo hace, pero sí necesitas comprarlo a menos que estés evaluando en comas invertidas de forma gratuita. Entonces esa es una opción texto sublime. Otro es atom, y puedes descargarlo desde Mac, o puedes conseguirlo para otras plataformas. Y Atom es un editor bastante bueno. Creo que lo hace Can't get Hub hasta donde yo recuerdo, es su propio editor, y lo puedes conseguir para Windows, también. Entonces si nos desplazamos hacia abajo, se puede ver cómo se ve. Se ve bastante dulce. Tiene un montón de cosas. Obviamente, si lo hace el equipo get hub , tendrá apoyo. Olvídate de Hub, habría pensado. Déjame ver. No, no puedo ver nada, pero esa es una opción para ti en él. El siguiente es un viejo pero un goodie, que es el pad de notas plus. Y esto viene de los días en que la gente solía usar simplemente viejo bloc de notas para escribir cosas , dieron cuenta de que no era lo suficientemente bueno, así que cambiaron a esto. Si eres un programador de la vieja escuela, esta podría ser tu taza de té, pero he guardado lo mejor para el final. En mi opinión, realmente me gusta mucho el código de estudio visual. Y, supuesto, por supuesto, esto lo hace Microsoft porque es el mismo homónimo que un estudio visual, el grande I D. E. que probablemente sabrás. Este es el que he descargado y uso día a día. Nunca he encontrado nada realmente malo en ello. Tiene montones de extensiones que permiten resaltar la sintaxis angular y crear atajos para escribir código, porque algunas cosas angulares pueden ser bastante dolorosas para escribir una y otra vez. Y estos atajos simplemente nos hacen mucho más fácil. Por lo que a lo largo de la totalidad de este curso voy a utilizar código de estudio visual. Y si no quieres ningún tipo de ambigüedades, entonces adelante, entonces adelante, descarga y usa esta a menos que ya tengas tu editor favorito, en cuyo caso siéntete libre de usar esa 4. 23 Cómo crear un componente: De acuerdo, Es hora de abrir nuestro proyecto y empezar a crear nuestros propios componentes. Adelante y abre tu editor favorito. Entonces código de estudio visual, en mi caso. Y espero que en su caso, haga que sea más fácil seguir adelante. Ahora, la forma en que funciona el editor de estudio visual es que tienes que abrir una carpeta para que no abras ningún archivo necesariamente. , Sólo tienes que abrir una carpeta. Ahora, déjame pensar. ¿ Dónde puse esto? Creo que pongo a alguien documentos de concesión y voy a tu energía Tuapse, donde pones tu primera salida. Ahora haz doble clic en tu app y deberías ver todos los archivos que miramos previamente. No seleccione ninguna. Simplemente selecciona abrir y se abrirán para ti en código de estudio visual. Y tendrás un bonito menos abajo al lado de todos los archivos y carpetas de tu proyecto. Por lo que es realmente útil para navegar por lo que está pasando en este momento. Tan solo para enfatizar, no edites nada en módulos de notas. Generalmente dejamos eso solo. E t e También vamos a hablar en términos generales, dejar eso en paz. Toda nuestra codificación en el sentido general que es tres veces han dicho General ahora se hace dentro de la carpeta fuente y luego dentro de ahí. En términos generales, eso son cuatro generales está dentro de la carpeta APP. No, por el momento tenemos una siesta Componentes CSS, que actualmente no tiene nada en ella. Pero podríamos poner estilos ahí si quisiéramos tener nuestro HTML. Recuerda, lo modificamos con este nombre Variable. Y tenemos nuestra carpeta mecanografiada. Ahora, cuando creamos un módulo, queremos especie de almacenar esto dentro de su propia carpeta. Ahora, el 1er 1 la app, los componentes, la ruta de la APP, si quieres, recuerda, la salida es este selector. Como que salimos en su propio primer nivel fuera de la carpeta raíz. Está bien donde está. Pero si quiero crear otro componente, se puede imaginar con tres archivos por componente, esto se llenaría bastante rápido. Entonces lo que hacemos es simplemente crear una carpeta. Entonces arriba aquí, hay un pequeño botón de carpeta nueva, y vamos a crear otros componentes. Ahora, ¿qué vamos a crear? Vamos a ver, Tal vez esto será un componente de imagen, Así que es buena práctica de nomenclatura toe realmente llamar a esta carpeta algo así como imagen, componente o imagen. Tú decides cuál es tu nombre. Ah, convención es así que depende absolutamente de ti, pero podría tener componentes de guión de imagen ahí dentro. No me gusta usar solo imagen vieja llana porque eso se vuelve confuso a la hora almacenar imágenes. Por lo que siempre es bueno ser un componente de muerte imagen un poco verbosa. Ahora dentro de aquí, vamos a crear un nuevo archivo y arriba en la parte superior tenemos un poco selectores. Déjame expandirlo y golpear ese pequeño selector de archivos nuevo. Ahora llegamos a la convención de nomenclatura real, así que imagen dot componentes dot T s. Eso debería ser un profesor, y eso es una convención de nomenclatura. Por supuesto, se puede ver que es lo mismo que apple component dot ts. Entonces ve a imagen componente dot ts Y adivina qué? Esto aún no es un componente. Está solo en archivo vacío. Ahora la forma en que creamos componentes es generalmente en este orden. No tiene por qué ser desorden. Exportamos una clase llamada componentes de imagen, por lo que ahora tenemos una clase que angular puede usar. Tenemos que decirle angular qué tipo de cosas es esto porque no lo sabe sólo por el nombre. Bueno, queremos darle a esto el tipo de componente. Y para hacer eso usamos lo que llamó decoradores. Y un decorador se sienta en la parte superior con en componentes. Ahora bien, si solo pongo mis corchetes para el componente, y luego mi componente de llaves tiene una línea ardillada roja debajo de él, y si hago clic en él, obtengo esta bombilla de luz y aún no tendrás esta bombilla. Te mostraré cómo conseguirlo, pero nos dice que tenemos que importar el componente desde el núcleo de la varilla angular. Entonces si hago clic en eso arriba en la parte superior, ahora tenemos este componente de importación de la cancha, y eso te está dando una pista de nuevo de lo que está pasando en angular en algún lugar. Se ha declarado un componente como este, pero para usarlo dentro de lo que estamos haciendo, primero tenemos que importarlo a este archivo. Es un poco como la declaración de uso en C Sharp o el equivalente en Java. Olvidé el nombre real. ¿ Es importado también me olvido. Seguro que uno de ustedes me dirá así Ahora tenemos esta importación podemos usar. Componente. Tenemos a este decorador y decíamos que esta clase es un componente. Ahora este concepto fuera de un decorador se encontrará una y otra vez, y hay muchos tipos diferentes fuera de componentes. Pero en términos generales, todos son componentes. Por lo que casi tenemos listos nuestros componentes de imagen. Pero nos falta un par de cosas cruciales. Y si miramos nuestros componentes AP puntean mecanografiado como guía, mira, necesitamos un selector. Necesitamos una plantilla. En realidad no necesitamos un estilo todavía, así que dejaremos eso fuera. Pero estos dos son necesarios para los componentes que vamos a mostrar. Es diferente para otro tipo de componentes, pero una vez que mostramos, debemos tener un selector y debemos tener una plantilla. Volvamos a nuestros componentes de imagen en componentes dentro fuera. Simplemente tecleamos selector y nos ponemos un abrigo en. Y luego en nuestras citas, le damos un nombre. Ahora el selector. Si solo llamo a esta imagen selector y luego fui a mi HTML y usé la etiqueta de imagen empezaría a ponerse un poco confuso con algunos del HTML clásico que tal vez lo conoces convención y angular con un selector es poner algo como AP imagen dash. Entonces esta pequeña precuela, ese es el camino equivocado cabeza a conflicto con el rojo real es ahora mismo. Este poco pre bit antes de la imagen es una especie de identificación única, lo que significa que nuestro HTML no se confundirá con el HTML clásico que está disponible para todas partes sobre Así que tenemos nuestro selector ahora ¿qué más necesitamos? Necesitamos nuestra plantilla y sus dos opciones una plantilla y una plantilla. U R l Ahora una plantilla simplemente significa que podemos definir algún HTML aquí que define esta imagen. Por lo tanto define este componente. Más bien que crear un archivo separado, si mi HTML es solo un poco pequeño, creo que mantener todo contenido aquí. Entonces si mi HTML es simplemente un párrafo que dice que esto es una imagen, sé que un párrafo está en una imagen, así que no me tire hacia arriba en eso. Entonces no tiene sentido la belleza en su propio archivo es bastante feliz de vivir aquí, ¿ verdad? Entonces esa es la totalidad off, creando un componente tenemos las declaraciones de importación para que podamos usar componente. Tenemos a este decorador que contar angular. Esta clase es un tipo de componente. Tenemos un selector para que podamos usarlo en alguna parte. Y tenemos una plantilla. Por lo que nuestro componente está listo. Pero angular en realidad no está listo para usarlo todavía. Esto un par de otros bits que tenemos que agregar para decirle angular para ir y buscar este componente. Entonces eso es lo que haremos en la próxima conferencia. 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.