Ahora pasaremos a
nuestro próximo ejercicio donde crearemos
un nuevo componente y lo agregaremos a nuestra aplicación Angular.
A continuación, haremos uso de ese componente para controlar una parte
de la pantalla que hemos diseñado para nuestra aplicación Angular.
La pantalla para nuestra aplicación Angular es bastante aburrida en este momento.
Todo lo que tenemos es una barra de herramientas en la parte superior y luego una pantalla blanca
en blanco aquí, pero eso también nos da ideas.
Ahora podemos tomar contenido adicional y luego
colocar eso en esta parte de la pantalla aquí. ¿Cómo lo hacemos?
Podemos crear un nuevo componente y luego entregar
sobre esta parte de la pantalla a ese componente y decir,
«Te encargamos de representar lo que quieras en esa parte de la pantalla».
Por lo tanto, esa vista será controlada por el nuevo componente.
¿Cómo lo hacemos? Vamos a pasar por el ejercicio ahora.
Para comenzar con el ejercicio,
ve a las instrucciones de ejercicio que siguen este video en particular.
Luego, en las instrucciones de ejercicio,
verá algunos recursos de ejercicio,
que es un archivo zip disponible para usted.
Descargue ese archivo zip en su computadora,
y esto le dará un images.zip files.
Así que guárdelo como images.zip en tu carpeta de descargas,
descomprimirlo, y entonces esto te dará
una carpeta de imágenes que contiene
un conjunto de imágenes que vamos a hacer uso en nuestra aplicación.
Descomprima el archivo images.zip que acaba de descargar,
y mueva ese archivo images.zip a su proyecto,
y dentro de su proyecto,
a la carpeta de fuentes y activos aquí.
Así que, de nuevo, mueva la carpeta de imágenes que obtiene por
descomprimiendo el archivo images.zip y luego mueva esa carpeta de imágenes a su aplicación,
por lo tanto, dentro de su aplicación,
en la subcarpeta de fuentes y activos.
Estas imágenes que se suministran aquí estarán
disponibles para su uso dentro de su aplicación Angular.
Ahora, vamos a hacer uso de la CLI angular para
generar automáticamente un componente para nosotros y añadirlo a nuestra aplicación Angular.
Entonces, en la terminal,
vaya a la carpeta que contiene su aplicación Angular y escriba
ng generate component menu.
Por lo tanto, nombraremos este componente como el MenuComponent.
Este MenuComponent contendrá el menú para
el restaurante para el que estamos preparando nuestra aplicación Angular.
Entonces, cuando escriba esto,
esto generará automáticamente
el MenuComponent y luego lo agregará a su aplicación Angular.
Este MenuComponent se creará y agregará en
la carpeta source/app/menu de su aplicación.
Por lo tanto, creará un conjunto de archivos en la carpeta del menú.
Por lo tanto, se puede ver que crea un archivo SCSS,
un archivo HTML, y el archivo ts,
y luego algo llamado el archivo ts espectral.
Volveremos a eso más tarde.
Luego, también, actualizará su archivo module.ts de la aplicación.
Entonces, vamos a echar un vistazo a lo que acaba de suceder cuando
creó este MenuComponent y lo agregó a su aplicación Angular.
Vayamos al Editor.
Viniendo a nuestro Editor,
ahora notarás que,
en la carpeta de la aplicación,
hay una nueva carpeta llamada menú allí,
y esta carpeta de menú contiene todos los archivos relacionados con MenuComponent aquí.
La CLI angular sigue la guía de estilo estándar angular.
La guía de estilo sugiere que cada componente debe colocarse
en su propia carpeta como se ve aquí,
y me gusta mucho esto porque soy muy obsesivo con
mantenerlo limpio jerarquía para mis carpetas de aplicaciones aquí.
Entonces, esto funciona muy bien para mí.
A algunas personas les gusta una jerarquía plana,
pero me confundo con esa parte.
Entonces, prefiero almacenar cada componente en su propia carpeta.
Por lo tanto, funciona bien para mí.
Ahora, si abre el archivo module.ts de la aplicación,
notará que el archivo module.ts de la aplicación se ha actualizado
incluyendo otra importación en el archivo module.ts de la aplicación.
Entonces, verá que, junto con AppComponent,
el MenuComponent se ha agregado automáticamente como una importación a su módulo de aplicación.
Por lo tanto, esto significa que MenuComponent está ahora
disponible para su aplicación Angular para ser utilizada.
Además, si comprueba la propiedad de declaraciones dentro del decorador ngModule,
verá que en la propiedad de declaraciones,
además del AppComponent,
también tiene el MenuComponent incluido.
Esta es la razón por la que me encanta Angular CLI,
porque simplifica todo esto funcionó para mí.
Si tuviera que hacerlo a mano,
tendré que ir manualmente al módulo de la aplicación y luego escribir todo este código allí,
y hay una alta probabilidad de que termine cometiendo errores allí.
Por lo tanto, nos estamos ahorrando muchos problemas usando la CLI angular.
Entonces, es por eso que me he enamorado de
Angular CLI para crear mis aplicaciones Angular.
Así que, con eso, hemos configurado
nuestro MenuComponent para estar disponible para nuestra aplicación Angular.
Ahora, ¿dónde voy a hacer uso del MenuComponent?
Voy a hacer uso del MenuComponent dentro de mi plantilla AppComponents.
Entonces, iré a la plantilla AppComponents y luego
incluiré el MenuComponent aquí en mi AppComponent.
Entonces, eso esencialmente entregará esa parte de la pantalla a mi MenuComponent.
¿Cómo lo hacemos?
Para hacer eso, primero echaremos un vistazo rápido al archivo MenuComponent.ts.
Por lo tanto, cuando abra el archivo MenuComponent.ts,
verá que el selector para MenuComponent se ha definido como app-menu.
Por lo tanto, este es el nombre de selector estándar que la CLI angular da para sus componentes.
Puede cambiar esto si lo desea,
pero cualquier selector que especifique aquí,
que formaría las etiquetas que usa para incluirlo en su archivo de plantilla.
Así que, volviendo a AppComponent.html,
ahora, si quiero incluir el archivo de menú aquí,
así que solo diré,
etiqueta de menú de aplicación y listo,
esa parte de la pantalla ahora se entrega a mi MenuComponent,
y depende del MenuComponent decidir qué quiere colocar allí.
Entonces, lo que sea que se defina,
la plantilla MenuComponents se colocará en su lugar aquí.
Así que, ahora, todo lo que nos queda es ir y preparar
nuestro MenuComponent para mostrar la información adecuada para nosotros.
Guardemos los cambios,
y luego cambiaremos a
el siguiente paso donde crearemos el menú para nuestro restaurante usando el MenuComponent.
Antes de hacer eso,
lo que voy a hacer es,
ir a la carpeta de la aplicación aquí,
y luego en la carpeta de la aplicación,
Voy a crear una nueva subcarpeta y nombre que como subcarpeta compartida.
Ahora, cualquier archivo que voy a compartir a través de varios componentes,
voy a ponerlo en la carpeta compartida aquí.
Ahora, dentro de la carpeta compartida,
voy a crear un nuevo archivo llamado dish.ts.
Dentro de este plato.ts, voy a crear una clase para definir
un plato y hacerlo disponible para que los componentes restantes lo usen.
Entonces, para definir una clase TypeScript aquí,
diré export,
, así que estoy exportando esta clase TypeScript aquí,
clase de exportación, y luego nombraré la clase como dish.
Dentro de esta clase de plato,
ahora puedo definir varias propiedades.
Entonces, para la clase de plato,
definiré una propiedad,
que es una ID, que defino como una cadena.
Ahora, observe, si viene del mundo JavaScript,
en JavaScript, no necesita especificar el tipo de ninguna variable.
TypeScript incluye esta función para que especifique el tipo para cada variable.
Por lo tanto, si especifica el nombre, la columna y la cadena,
significa que la variable de nombre será siempre del tipo de cadena.
Entonces, si intenta asignar un entero al nombre,
, el compilador de TypeScript automáticamente
lo captará y luego le dirá que hay un error.
Esa es la razón por la que, al usar TypeScript,
, puede reducir el número de errores que puede causar.
JavaScript tradicionalmente no hace este error
comprobar porque no tiene ningún concepto de tipos de datos.
Pero si viene de un lenguaje de programación tradicional como C ++ o Java,
está muy familiarizado con los tipos de datos,
los tipos de datos primitivos y
otros tipos de tipos de datos que ya están definidos en el lenguaje.
TypeScript trae esa característica a JavaScript o más bien como parte de TypeScript,
y que le permite definir variables y adjuntar tipos a esas variables,
de ahí el nombre TypeScript.
Así que, para el plato,
voy a crear una propiedad de nombre.
Entonces voy a crear una propiedad de imagen,
que también es una cadena.
Esta cadena de imagen será una cadena que apunta a
la URL de la imagen que voy a usar para este plato en particular.
Entonces definiré una categoría para este plato como también otra cadena presentada como booleano, etiqueta
como una cadena.
Precio como cadena y luego descripción como cadena.
Entonces, estas son propiedades que asocio con la clase de plato.
Así, esto definirá varios platos en mi menú de mi restaurante,
y para cada plato necesito especificar todas estas diversas propiedades.
Ahora, ¿por qué necesitaría eso?
Eso me ayudará a construir el menú para mi restaurante como verá muy pronto.
Así que, con esto, completamos la definición de mi clase allí.
Guardemos los cambios en el archivo dish.ts.
Ahora, este archivo dish.ts está exportando una clase.
Ahora, puedo importar esta clase a cualquiera de
los archivos de script de tipo de componente de mi aplicación.
A continuación, voy a cambiar a mi archivo menu.component.ts.
Dentro del archivo menu.component.ts además de importar el componente,
también veré que está importando un OnInit allí.
Llegaremos a la parte OnInit en uno de los ejercicios posteriores.
Explicaré lo que hace en un ejercicio posterior.
También importaremos la nueva clase que creamos llamada clase Dish.
¿Por qué importamos esta clase de plato?
Para que podamos usar eso como un tipo para una variable que estoy definiendo aquí.
Entonces, ¿dónde está esta clase de platos?
Está en..carpeta /shared/dish.
Entonces, esto está en la carpeta de plato compartido arriba.
Entonces verá que hemos definido el componente de menú aquí.
Entonces, puede ver que dice,
«Exportar componente de menú de clase» y luego dice, «Implementar en él».
Vamos a volver a eso en un poco más tarde.
También ve que hay un constructor y hay un método más aquí llamado ngOnIt.
Vamos a usarlos en algunos de los ejercicios posteriores.
Así que dejémoslo ahí como tal y
volveremos a entender lo que es en poco tiempo.
Además, tenga en cuenta que para este componente,
la plantilla se define en el menú componente dot HTML,
y las URL de estilo definidas allí.
Ahora, además, en mi clase de componente de menú,
voy a incluir una nueva variable llamada como platos
que sería una matriz del tipo de plato.
¿De acuerdo? Entonces voy a simplemente incluir el conjunto de platos
en mi variable de platos que he definido aquí.
Ahora, escribir todo a mano me va a llevar mucho tiempo.
Así que en su lugar, lo que te sugeriría que hagas es simplemente ir y copiar
el contenido directamente de las instrucciones que siguen este video.
Entonces, eso es lo que voy a hacer.
Luego vuelve y pega eso aquí.
Ahora puedes ver que he cortado y pegado la información para
todos mis platos de las instrucciones aquí.
Entonces, esto completa la matriz de todos los platos que se definen en mis instrucciones.
Por lo tanto, esa es la forma más fácil de obtener esta información.
Por lo tanto, sólo corta y pega desde allí.
Ahora, observe que para este plato,
cada uno de ellos es un objeto JavaScript aquí.
Entonces, eso se puede asignar a la clase de script de tipo correspondiente allí.
Entonces, puede ver que cada objeto JavaScript tiene propiedades allí,
y estas propiedades coinciden exactamente con las propiedades que definí para mi clase de plato.
Así que, una vez que defina esto,
entonces estos platos ahora se convertirán en una matriz de
platos y esto ahora estará disponible para
me use cuando defina mi plantilla HTML para mi menú.
Guardemos los cambios que hemos hecho hasta ahora y luego
abriremos el archivo menu.component.html.
Entonces, iremos al archivo menu.component.html.
Verá que en el archivo menu.component.html,
actualmente tiene solo una P con menú funciona aquí.
Entonces, si lo pegaron allí y luego viendo la aplicación funcionando,
habrías visto que este menú funciona en la pantalla.
Voy a reemplazar esto con mi propio código de plantilla aquí.
Aquí es donde voy a tomar la ayuda del diseño flexible angular para ayudarme
a diseñar bien mi contenido en mi pantalla.
Entonces, para comenzar,
comenzaré con un div,
a la que aplicaré una clase llamada contenedor.
Voy a definir la clase contenedora usando
algún código CSS un poco más adelante en este ejercicio.
Entonces, aplicaré el contenedor de clase aquí.
También voy a definir una propiedad llamada fxlayout.
Un atributo llamado fxlayout.
Ahora, este fxlayout es un atributo
que el diseño flexible angular me permite aplicar a un div.
Esto especifica si los diversos contenidos
que incluyo dentro de esos div deben colocarse horizontal o verticalmente.
Entonces, voy a especificar que esto sea una columna.
Entonces, cualquiera que sea el contenido que incluya dentro de este div,
se presentará verticalmente uno debajo del otro en mi pantalla.
Si has visto la forma de cuadrícula de trabajar con contenido en Bootstrap,
verías que esto esencialmente me dice que voy a
poner todo en una sola columna allí abajo.
No confunda esta columna con la columna de Bootstrap de la cuadrícula de Bootstrap.
Son dos cosas diferentes.
Aquí, el atributo es fxlayout y especifico la columna.
También puedo especificar esto como fila,
, lo que significa que el contenido se presentará horizontalmente.
Ahora también, un atributo más que voy a especificar para esto es fxLayoutGap,
que especificaré como 10 píxeles.
Entonces, lo que esto significa es que cualquier contenido que incluyo aquí
estará separado el uno del otro por un espacio de 10 píxeles entre cada uno de ellos.
Desde el conocimiento de Bootstraps, ves lo que es un corte aquí.
Esto define una separación de corte entre
dos partes de contenido en mi plantilla de aplicación.
Entonces, con esto, cerraremos el div aquí.
Ahora, dentro de este div,
voy a definir el contenido real que entrará en mi archivo menu.component.html.
Ahora aquí, voy a hacer uso de otro componente que el diseño de material
me proporciona llamado como un componente de lista de esteras.
Por lo tanto, este componente me permite crear una lista de
elementos que incluyo en mi plantilla aquí.
Entonces, este es un componente de lista de materiales angular.
Desde Bootstrap, observa que en Bootstrap teníamos el objeto multimedia.
Entonces, la lista de esteras es como el objeto multimedia en algún sentido de Bootstrap.
Ahora a esto, voy a aplicar una clase,
un atributo llamado como fxFlex.
Ahora, lo que esto significa es que todo esto será tratado como una unidad o una pieza de contenido
que serán establecidos por mi diseño flexible aquí.
Entonces, si está familiarizado con el diseño flexible CSS.
Entonces, esta es una pieza de contenido que será presentada por mi diseño flexible CSS.
Entonces, aplique FXFlex aquí,
y luego dentro aquí voy a definir mat-list-item.
Por lo tanto, este es un elemento de lista aquí.
Entonces, por su conocimiento HTML,
si la etiqueta LI que usa en HTML es similar a esta aquí.
Entonces, este es un artículo de la lista de mg aquí.
Así que obviamente, dentro de este elemento de la lista,
vas a estar definiendo la lista de cosas.
Ahora, angular proporciona algunas directivas estructurales que puede aplicar
a sus etiquetas aquí que le permite crear su contenido.
Ahora, voy a usar una directiva estructural llamada ngFor.
Veremos cómo lo usamos en esta plantilla.
Luego, después de este ejercicio,
les explicaré brevemente cuáles son las directivas estructurales y
cuál es el propósito que sirven para definir aquí sus plantillas.
Así que, dentro de este elemento de la lista vacía, voy a decir,
star, nota la sintaxis, star ngFor.
Entonces, esta es la directiva estructural,
la directiva estructural NGFor en angular.
Lo que esta directiva estructural ngFor le permite hacer es
iterar sobre una matriz de elementos.
Recuerde que definimos los platos como una matriz de objetos de plato en nuestro código.
Ahora, en mi plantilla,
tendré acceso a ese objeto de platos.
Así que aquí, si quiero iterar sobre él,
la forma en que lo especifiqué es, diré,
«Deje plato de platos.»
Así es como funciona la sintaxis para la directiva estructural ngFor.
Así que, vamos plato de platos.
Lo que esto significa es que los platos son la matriz de objetos de plato.
Cuando seleccionamos digamos plato de platos,
esto me permitirá acceder a cada elemento de
la matriz y luego me ayuda a iterar sobre la matriz.
Esto es como un bucle for,
si está familiarizado con los bucles for de la programación.
Entonces, esto actúa como un bucle for para ti y luego te ayuda a iterar
sobre todos los elementos de la matriz de platos aquí.
Este plato se convierte en un objeto JavaScript que me permite
acceder a cada elemento de esa matriz allí.
Ahora, a partir de esto, también podemos obtener acceso
a las propiedades de cada objeto individual dentro de mi matriz de platos.
Entonces, puedo hacer uso de ellos para definir mi plantilla aquí.
Permítanme diseñar la plantilla y luego vamos a volver y
mirar cómo estos dos están interrelacionados aquí.
Ahora, dentro de mi elemento de lista vacío,
puedo incluir una imagen con el atributo como MatListAvatar.
Entonces, esto me permite incluir una imagen y luego con la fuente especificada aquí.
Ahora curiosamente, mira la sintaxis que estoy usando aquí.
Dentro de llaves dobles, voy a decir dish.image.
Lo que esto significa es que se trata de una interpolación unidireccional de la que estamos hablando.
Aquí, cuando especifico esto,
lo que esto significa es que esta fuente obtendrá el valor de dish.image que ha definido en
mi objeto JavaScript que he definido en
mi clase de script de tipo allí y que está disponible para mí para hacer el diseño aquí.
Entonces, para que el valor dish.image esté disponible para mí y también para esta imagen,
especificaré un valor alternativo como dish.name.
Recordemos que mi plato también tenía la propiedad de nombre disponible para
me así que define una imagen para mi lista aquí.
Pronto se dará cuenta de cómo se ve esta lista en
la pantalla cuando completemos esta plantilla aquí.
Además, voy a usar un h1 con la etiqueta MatLine.
Una vez más, este es el uso de
el componente de material angular de lista para definir mi plantilla aquí.
Así que, digo h1 MatLine así que esto me ayuda a definir una línea aquí y luego dentro de allí,
voy a usar las llaves dobles y decir dish.name aquí.
Entonces, esto me permite obtener el valor del nombre del plato allí.
Entonces, eso define una línea y luego la en la siguiente línea voy a decir p MatLine.
Entonces, voy a usar la etiqueta p aquí y luego cerrar
de la etiqueta p y luego dentro de la etiqueta p,
voy a usar un span para definir dish.description.
Entonces, si está familiarizado con los objetos JavaScript,
ahora ve cómo estoy accediendo a las propiedades de
mi objeto JavaScript aquí, dish.description aquí.
Para tener en cuenta, ejecutando esto una vez más
el atributo ngFor me permite iterar sobre una matriz de objetos aquí.
Entonces, los platos aquí es una variedad de objetos de plato.
Así que, cuando digo que plato de platos,
este plato me dará acceso a cada elemento de
mi matriz de platos y yo iterar sobre cada elemento de la matriz
y luego voy a estar creando este contenido para cada uno de ellos.
Entonces, este elemento de la lista vacía,
esencialmente actúa como un bucle for de
su lenguaje informático tradicional y luego itera sobre
la lista de platos y luego establece cada uno de ellos en mi pantalla.
Así que, con este cambio,
vamos a guardar el archivo de componente de menú.
A continuación, vamos a app.module.ts y necesitamos importar el módulo MatList en esto.
Así que, decimos, importar MatListModule
desde Angular/Material/list.Una vez que hemos importado esto allí,
luego bajamos y luego actualizamos las importaciones en
el decorador del módulo Ng y agregamos
el módulo MatList a la lista de importaciones allí.
Esta mi aplicación module.ts ahora está actualizada y luego también,
voy a ir al archivo styles.scss y luego agregar
en la clase contenedor aquí.
¿Qué define la clase de contenedor aquí?
La clase contenedor es margen 20 píxeles
y mostrar flex y guardar los cambios.
Ahora, vamos a echar un vistazo a nuestra página web.
Ir a nuestra página web.
Voila. Ahí lo tienes.
El menú de nuestro restaurante se muestra en todo su esplendor en la pantalla.
Usted ve cómo se ha creado este menú.
Mira la matriz de objetos JavaScript que has visto.
Mire cómo se ha utilizado cada una de las propiedades de la matriz de objetos JavaScript y
se ha asignado a los cuatro elementos de mi lista.
Mira cómo se han incluido las imágenes correspondientes aquí
usando el MatListAvatar aquí.
Por lo tanto, esto crea imágenes redondas aquí y luego nota cómo el nombre de
el plato se muestra aquí y luego la descripción del plato incluido aquí.
Maravilloso. Ahora, tenemos el menú para nuestro restaurante en
la pantalla utilizando un componente de menú en Angular.
Esto completa este ejercicio.
En este ejercicio aprendimos a crear un nuevo componente.
añadirlo a nuestra aplicación Angular,
cómo incluir ese componente en la plantilla de
otro componente para que cree la jerarquía de los componentes.
Luego vimos cómo podemos hacer uso de la disposición flexible angular y también
los componentes de diseño de material para diseñar
la plantilla para nuestro componente de menú para mostrar el contenido aquí.
Ahora, si me preguntas cómo recuerdo todas estas cosas.
Bueno, para ser honesto,
no puedes recordar todo pero necesitas entender el enfoque.
Eso es más importante que tratar de memorizar cualquiera de estas cosas.
Ahora, si me preguntas dónde obtengo la información sobre
el componente de lista de material angular.
Podemos ordenar la documentación de material angular y allí
tendrá los detalles sobre cómo se debe preparar un componente de lista.
Ahora, ¿dónde obtenemos los detalles sobre cómo diseñamos un componente en angular?
Acabamos de examinar un poco de eso y luego en este ejercicio,
aprendimos cómo crear un nuevo componente y luego aplicarlo en nuestra aplicación angular.
Por lo tanto, este es un buen punto para que hagas un
get comment con los componentes del mensaje parte uno.
En el próximo ejercicio,
vamos a mejorar esto un poco más usando otro tipo
de componente de material angular para diseñar el contenido en mi pantalla.