Entonces, y en la última conferencia, configuramos nuestro proyecto y le agregamos un bootstrap.
Ahora quiero comenzar a agregar los componentes que presentamos aquí.
Aquí está tu desafío.
Intenta hacer esto por tu cuenta.
Ahora bien, si eso no significa rellenar estas plantillas de componentes en vivo durante una hora, cada componente
puede contener simplemente un texto ficticio para que podamos ver que está allí.
Me refiero a crear los componentes y tratar de crear una estructura de carpetas inteligente en la carpeta de la aplicación, no todos
los componentes deben tener una carpeta en el nivel raíz.
También debe anidarlos por función tal vez y tratar de crear al menos un componente de forma
manual, sin usar el Seelye.
Te daré la oportunidad de pausar el video y luego te mostraré mi enfoque.
Lo más probable es que nos desvié en nuestra solución.
Pero esa es una buena práctica para ti.
Así que definitivamente siga adelante y trate de crear estos componentes sin ningún contenido por el momento por
su cuenta.
Entonces fuiste exitoso
Veamos cómo resolvería esto cómo me acercaría a esto.
Tenemos dos recetas de áreas principales en la lista de compras y obtenemos este componente de Hetrick.
Ahora crearé d cabeza o un componente manualmente.
Entonces, para esto, ya podemos comenzar las discusiones si creamos una carpeta de encabezado en la carpeta
de la aplicación donde almacenamos el componente o deberíamos crear un componente en la misma carpeta de la aplicación.
Ahora crearé una carpeta de encabezado, pero colocar el componente directamente en la carpeta no sería incorrecto,
ya que solo es utilizado por nuestro componente de la aplicación.
Así que aquí crearé una nueva carpeta llamada encabezado y allí agregaré mi componente de punto del
encabezado, el archivo Dadda TS.
Ahora que aprendiste un componente es simplemente los tipos de clases.
Vamos a nombrar que tenía un componente aquí y ahora que no sería reconocido como un
componente por angular.
En cambio, aquí tenemos que agregar el decorador de componente en y más tarde voy a usar la función de importación automática
de mi ID.
Por ahora, todos importados manualmente tenemos que importar el componente entre las llaves en el núcleo angular.
Eso es importante.
Ahora con eso necesitamos pasar un objeto javascript al lector de pila para configurar este componente.
Específicamente necesitamos agregar una plantilla y la pondré como un archivo externo para que usted sea la
plantilla l en este caso y como Lechter para que podamos usar este componente de modo que el selector aquí sea
el hedor de la aplicación porque quiero asegurarme de que tengo un selector único y que no sobrescribo un elemento HVM
existente, por ejemplo, y hador sería un elemento existente.
La plantilla que está aquí quiero señalar el encabezado punto componente h archivo HTML.
Y como probablemente hayas reconocido, este archivo no existe.
Así que puedo crear esto rápidamente creando un nuevo archivo en la misma carpeta en la carpeta del encabezado aquí.
Componente de encabezado o HDMI cerca del nombre completo de archivo y Endace HDMI aquí.
Simplemente quiero sacar ese encabezado por ahora.
Voy a agregar algo de contenido pronto.
Así que ese es mi componente de encabezado y ya puedo incluir esto en el componente de mi aplicación.
Tal vez por encima del contenedor porque en el contenedor, más adelante, solo quiero contener mi componente
de contenido. Diré que aquí añadiré el encabezado de la aplicación así.
Entonces con eso editamos eso aquí.
Ahora veamos si podemos verlo.
Y simplemente veo cargar dot dot dot que siempre es un indicador de que ha habido un error.
Por lo tanto, consulte la consola de JavaScript en sus herramientas de desarrollador para ver el error y el error es bastante claro.
El encabezado AB no es un elemento conocido.
Este es un problema común, por eso quería mostrarlo.
Por qué no se sabe
Editamos aquí y configuramos para seleccionar o aquí a la derecha.
Recuerda que debes registrar todas las funciones que vas a utilizar en el módulo de la aplicación.
Y como no usamos el sello para crear este componente, no se agregó allí automáticamente.
Entonces, debemos agregarlo manualmente a nuestra matriz de declaraciones.
Y eso significa que también tenemos que agregar la importación.
Entonces deberíamos importar el componente del encabezado desde y ahora apuntando al encabezado de una carpeta y luego allí.
El archivo de un componente sin la extensión de archivo.
Así que papá ahora bloquea el componente hetero en nuestra aplicación y si guardamos esto ahora vemos el encabezado.
Ahora eso no está listo.
Vamos a cambiar pronto, pero podemos ver que está funcionando.
Ahora pasemos a agregar todos los otros componentes con Selye por ahora.
Así que teníamos un par de componentes que quería agregar y usaré el comando DNG generate o simplemente MGG como un
acceso directo y luego queremos generar un componente.
O simplemente vea como un atajo y el primer componente que deseo agregar es ¿el componente 4 de la receta tiene el área de
características de la receta?
Añadiré Spack falso para evitar la creación de un archivo de prueba que no necesito.
Entonces, si tenemos una nueva carpeta en nuestra carpeta Apfel there recipes que contiene el componente de
nuestra receta, es genial.
Ahora bien, este será el componente de nuestra receta general y, en realidad, es un componente.
No esbocé aquí.
Aquí solo tenemos el elemento de la lista de recetas en detalle.
Ahora también podrías simplemente trabajar con esto.
Pero quiero crear una configuración donde tengo una lista a la izquierda, digamos.
Y si hago clic en el elemento, el componente detallado se muestra a la derecha.
Entonces necesitaré un componente general que contenga ambos.
Ahora que es una configuración opcional.
También puede ir con un número uno donde los detalles están integrados de algún modo en el componente de la lista.
Elegí crear este componente general.
Ahora, además de eso, seguiré adelante y crearé los componentes Avar.
Recetas Sobersides.
Ahora también crearé el componente de la lista de recetas como se describe en el sector.
Ahora aquí no quiero crear la lista de recetas en la carpeta de la aplicación o dentro de la misma, aunque es
un comportamiento diferente para ver.
Ahora presionaría ingresar en su lugar.
Eso debería ir dentro de la carpeta de la receta porque ahí es donde deberían ir todos los componentes
relacionados con la receta.
Podemos decir fácilmente a estos Seelye que creen un componente en una subcarpeta básicamente al pasar una ruta aquí.
Entonces, en lugar de solo decir la lista de recetas, podemos decir que las recetas cortan la lista de recetas y, como
ya tiene la carpeta de recetas, tratará la carpeta de la lista de recetas dentro de la carpeta de recetas.
Eso es lo que quise decir con la forma de estructurar las carpetas por función ahora con la lista de recetas. También quiero agregar
aquí los detalles de la receta porque los detalles de la receta deben mostrarse junto a la lista en mi
configuración aquí, así que lo agregaré a la carpeta de recetas también.
Entonces ahora todos tenemos la carpeta de detalles de recetas aquí.
Y también necesitamos un componente para un solo elemento de receta correcto.
Por lo tanto, elemento de receta.
Sin embargo, no quiero agregar eso a la carpeta de recetas que debe ir dentro de la carpeta de la lista de
recetas porque está en la lista de recetas donde quiero que también tenga ese elemento.
Así que apuntaré a la subcarpeta de la lista de recetas aquí y ahora presionaré Enter.
Y ahora tenemos el componente dentro de la lista de recetas porque nuevamente el ítem de la receta es solo
un ítem en esta lista de recetas.
Ahora, nuevamente, solo es posible una estructura.
Puede eliminar el componente de recetas y poner el componente de la lista de recetas como componente principal de la receta
y agregar detalles en algún lugar de este componente.
Luego elegí tener esta configuración aquí sin embargo.
Ahora pasemos a la lista de compras.
Mucho antes de esto, por supuesto, ejecute NGC nuevamente para generar un nuevo componente y una lista de compras con nombre.
También agregaré el error de moteado aquí para evitar la verdadera relación de este archivo de prueba y esto me dará una carpeta
de lista de compras en la carpeta de mi aplicación principal.
Así que al lado de las recetas y el encabezado dentro de la lista de compras.
Solo hay otro componente que deseo crear y ese es el componente agregado de la lista de compras
que nos permitirá agregar nuevos ingredientes o agregar los existentes que ahora deben ir al componente de la
lista de compras.
Así que al igual que antes con las recetas, simplemente lo cambiaré a la lista de compras. Agregué las compras con barras,
y ahora se agregarán dentro de este componente.
Entonces ahora tenemos todos los componentes que necesitamos por ahora o al menos creo que necesitamos por ahora.
Por supuesto, siéntete libre de elegir una configuración diferente pero con todos estos componentes agregados y, dado que
utilizas la opción Ver, también he añadido automáticamente el módulo AB.
Si creó manualmente, asegúrese de agregarlos aquí también.
Entonces, con todo lo creado que se agregó al módulo AB, ahora podemos usarlos.
Comencemos a usarlos en la próxima conferencia y empecemos a llenarlos de vida allí.