1
00:00:02,290 --> 00:00:06,670
Entonces, y en la última conferencia, configuramos nuestro proyecto y le agregamos un bootstrap.

2
00:00:06,670 --> 00:00:09,870
Ahora quiero comenzar a agregar los componentes que presentamos aquí.

3
00:00:09,970 --> 00:00:11,740
Aquí está tu desafío.

4
00:00:11,740 --> 00:00:13,540
Intenta hacer esto por tu cuenta.

5
00:00:13,540 --> 00:00:18,670
Ahora bien, si eso no significa rellenar estas plantillas de componentes en vivo durante una hora, cada componente

6
00:00:18,670 --> 00:00:22,530
puede contener simplemente un texto ficticio para que podamos ver que está allí.

7
00:00:22,570 --> 00:00:30,370
Me refiero a crear los componentes y tratar de crear una estructura de carpetas inteligente en la carpeta de la aplicación, no todos

8
00:00:30,370 --> 00:00:33,640
los componentes deben tener una carpeta en el nivel raíz.

9
00:00:33,640 --> 00:00:40,420
También debe anidarlos por función tal vez y tratar de crear al menos un componente de forma

10
00:00:40,480 --> 00:00:42,580
manual, sin usar el Seelye.

11
00:00:42,580 --> 00:00:45,820
Te daré la oportunidad de pausar el video y luego te mostraré mi enfoque.

12
00:00:45,820 --> 00:00:48,460
Lo más probable es que nos desvié en nuestra solución.

13
00:00:48,460 --> 00:00:50,450
Pero esa es una buena práctica para ti.

14
00:00:50,530 --> 00:00:56,320
Así que definitivamente siga adelante y trate de crear estos componentes sin ningún contenido por el momento por

15
00:00:56,320 --> 00:00:56,940
su cuenta.

16
00:01:00,000 --> 00:01:01,890
Entonces fuiste exitoso

17
00:01:02,070 --> 00:01:06,090
Veamos cómo resolvería esto cómo me acercaría a esto.

18
00:01:06,090 --> 00:01:11,110
Tenemos dos recetas de áreas principales en la lista de compras y obtenemos este componente de Hetrick.

19
00:01:11,490 --> 00:01:16,020
Ahora crearé d cabeza o un componente manualmente.

20
00:01:16,020 --> 00:01:21,510
Entonces, para esto, ya podemos comenzar las discusiones si creamos una carpeta de encabezado en la carpeta

21
00:01:21,510 --> 00:01:27,510
de la aplicación donde almacenamos el componente o deberíamos crear un componente en la misma carpeta de la aplicación.

22
00:01:27,510 --> 00:01:33,300
Ahora crearé una carpeta de encabezado, pero colocar el componente directamente en la carpeta no sería incorrecto,

23
00:01:33,510 --> 00:01:37,230
ya que solo es utilizado por nuestro componente de la aplicación.

24
00:01:37,620 --> 00:01:44,490
Así que aquí crearé una nueva carpeta llamada encabezado y allí agregaré mi componente de punto del

25
00:01:44,520 --> 00:01:46,400
encabezado, el archivo Dadda TS.

26
00:01:46,470 --> 00:01:50,220
Ahora que aprendiste un componente es simplemente los tipos de clases.

27
00:01:50,220 --> 00:01:56,580
Vamos a nombrar que tenía un componente aquí y ahora que no sería reconocido como un

28
00:01:56,580 --> 00:01:57,690
componente por angular.

29
00:01:57,700 --> 00:02:06,540
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

30
00:02:06,540 --> 00:02:07,590
de mi ID.

31
00:02:07,650 --> 00:02:17,280
Por ahora, todos importados manualmente tenemos que importar el componente entre las llaves en el núcleo angular.

32
00:02:17,400 --> 00:02:19,020
Eso es importante.

33
00:02:19,020 --> 00:02:24,220
Ahora con eso necesitamos pasar un objeto javascript al lector de pila para configurar este componente.

34
00:02:24,420 --> 00:02:30,330
Específicamente necesitamos agregar una plantilla y la pondré como un archivo externo para que usted sea la

35
00:02:30,330 --> 00:02:37,470
plantilla l en este caso y como Lechter para que podamos usar este componente de modo que el selector aquí sea

36
00:02:37,470 --> 00:02:44,460
el hedor de la aplicación porque quiero asegurarme de que tengo un selector único y que no sobrescribo un elemento HVM

37
00:02:44,550 --> 00:02:47,580
existente, por ejemplo, y hador sería un elemento existente.

38
00:02:47,580 --> 00:02:54,730
La plantilla que está aquí quiero señalar el encabezado punto componente h archivo HTML.

39
00:02:54,870 --> 00:02:58,630
Y como probablemente hayas reconocido, este archivo no existe.

40
00:02:58,920 --> 00:03:05,050
Así que puedo crear esto rápidamente creando un nuevo archivo en la misma carpeta en la carpeta del encabezado aquí.

41
00:03:05,080 --> 00:03:11,130
Componente de encabezado o HDMI cerca del nombre completo de archivo y Endace HDMI aquí.

42
00:03:11,370 --> 00:03:14,740
Simplemente quiero sacar ese encabezado por ahora.

43
00:03:14,760 --> 00:03:17,050
Voy a agregar algo de contenido pronto.

44
00:03:17,370 --> 00:03:22,230
Así que ese es mi componente de encabezado y ya puedo incluir esto en el componente de mi aplicación.

45
00:03:22,320 --> 00:03:29,730
Tal vez por encima del contenedor porque en el contenedor, más adelante, solo quiero contener mi componente

46
00:03:29,760 --> 00:03:34,820
de contenido. Diré que aquí añadiré el encabezado de la aplicación así.

47
00:03:35,280 --> 00:03:37,160
Entonces con eso editamos eso aquí.

48
00:03:37,410 --> 00:03:39,390
Ahora veamos si podemos verlo.

49
00:03:40,770 --> 00:03:46,350
Y simplemente veo cargar dot dot dot que siempre es un indicador de que ha habido un error.

50
00:03:46,480 --> 00:03:52,400
Por lo tanto, consulte la consola de JavaScript en sus herramientas de desarrollador para ver el error y el error es bastante claro.

51
00:03:52,410 --> 00:03:55,400
El encabezado AB no es un elemento conocido.

52
00:03:55,510 --> 00:03:58,930
Este es un problema común, por eso quería mostrarlo.

53
00:03:58,930 --> 00:04:00,090
Por qué no se sabe

54
00:04:00,100 --> 00:04:03,410
Editamos aquí y configuramos para seleccionar o aquí a la derecha.

55
00:04:03,670 --> 00:04:09,300
Recuerda que debes registrar todas las funciones que vas a utilizar en el módulo de la aplicación.

56
00:04:09,460 --> 00:04:14,770
Y como no usamos el sello para crear este componente, no se agregó allí automáticamente.

57
00:04:14,770 --> 00:04:18,970
Entonces, debemos agregarlo manualmente a nuestra matriz de declaraciones.

58
00:04:19,270 --> 00:04:22,300
Y eso significa que también tenemos que agregar la importación.

59
00:04:22,300 --> 00:04:30,680
Entonces deberíamos importar el componente del encabezado desde y ahora apuntando al encabezado de una carpeta y luego allí.

60
00:04:30,690 --> 00:04:34,370
El archivo de un componente sin la extensión de archivo.

61
00:04:34,870 --> 00:04:42,740
Así que papá ahora bloquea el componente hetero en nuestra aplicación y si guardamos esto ahora vemos el encabezado.

62
00:04:42,740 --> 00:04:43,900
Ahora eso no está listo.

63
00:04:43,900 --> 00:04:48,380
Vamos a cambiar pronto, pero podemos ver que está funcionando.

64
00:04:48,380 --> 00:04:53,810
Ahora pasemos a agregar todos los otros componentes con Selye por ahora.

65
00:04:54,160 --> 00:05:01,630
Así que teníamos un par de componentes que quería agregar y usaré el comando DNG generate o simplemente MGG como un

66
00:05:01,630 --> 00:05:04,570
acceso directo y luego queremos generar un componente.

67
00:05:04,690 --> 00:05:12,330
O simplemente vea como un atajo y el primer componente que deseo agregar es ¿el componente 4 de la receta tiene el área de

68
00:05:12,340 --> 00:05:13,640
características de la receta?

69
00:05:14,080 --> 00:05:20,400
Añadiré Spack falso para evitar la creación de un archivo de prueba que no necesito.

70
00:05:20,980 --> 00:05:27,730
Entonces, si tenemos una nueva carpeta en nuestra carpeta Apfel there recipes que contiene el componente de

71
00:05:28,420 --> 00:05:30,150
nuestra receta, es genial.

72
00:05:30,230 --> 00:05:37,090
Ahora bien, este será el componente de nuestra receta general y, en realidad, es un componente.

73
00:05:37,090 --> 00:05:38,390
No esbocé aquí.

74
00:05:38,410 --> 00:05:41,300
Aquí solo tenemos el elemento de la lista de recetas en detalle.

75
00:05:41,320 --> 00:05:43,370
Ahora también podrías simplemente trabajar con esto.

76
00:05:43,540 --> 00:05:47,960
Pero quiero crear una configuración donde tengo una lista a la izquierda, digamos.

77
00:05:47,980 --> 00:05:52,090
Y si hago clic en el elemento, el componente detallado se muestra a la derecha.

78
00:05:52,270 --> 00:05:55,480
Entonces necesitaré un componente general que contenga ambos.

79
00:05:55,510 --> 00:05:57,310
Ahora que es una configuración opcional.

80
00:05:57,310 --> 00:06:03,190
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.

81
00:06:03,190 --> 00:06:07,370
Elegí crear este componente general.

82
00:06:07,420 --> 00:06:11,940
Ahora, además de eso, seguiré adelante y crearé los componentes Avar.

83
00:06:11,990 --> 00:06:13,790
Recetas Sobersides.

84
00:06:13,990 --> 00:06:19,060
Ahora también crearé el componente de la lista de recetas como se describe en el sector.

85
00:06:19,120 --> 00:06:25,400
Ahora aquí no quiero crear la lista de recetas en la carpeta de la aplicación o dentro de la misma, aunque es

86
00:06:25,420 --> 00:06:26,730
un comportamiento diferente para ver.

87
00:06:26,740 --> 00:06:29,420
Ahora presionaría ingresar en su lugar.

88
00:06:29,470 --> 00:06:34,870
Eso debería ir dentro de la carpeta de la receta porque ahí es donde deberían ir todos los componentes

89
00:06:34,870 --> 00:06:35,950
relacionados con la receta.

90
00:06:35,950 --> 00:06:42,550
Podemos decir fácilmente a estos Seelye que creen un componente en una subcarpeta básicamente al pasar una ruta aquí.

91
00:06:42,610 --> 00:06:49,780
Entonces, en lugar de solo decir la lista de recetas, podemos decir que las recetas cortan la lista de recetas y, como

92
00:06:49,780 --> 00:06:56,050
ya tiene la carpeta de recetas, tratará la carpeta de la lista de recetas dentro de la carpeta de recetas.

93
00:06:56,080 --> 00:07:05,250
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

94
00:07:05,250 --> 00:07:12,720
aquí los detalles de la receta porque los detalles de la receta deben mostrarse junto a la lista en mi

95
00:07:12,720 --> 00:07:17,200
configuración aquí, así que lo agregaré a la carpeta de recetas también.

96
00:07:17,310 --> 00:07:20,580
Entonces ahora todos tenemos la carpeta de detalles de recetas aquí.

97
00:07:21,090 --> 00:07:25,390
Y también necesitamos un componente para un solo elemento de receta correcto.

98
00:07:25,560 --> 00:07:27,560
Por lo tanto, elemento de receta.

99
00:07:27,630 --> 00:07:35,520
Sin embargo, no quiero agregar eso a la carpeta de recetas que debe ir dentro de la carpeta de la lista de

100
00:07:35,790 --> 00:07:41,150
recetas porque está en la lista de recetas donde quiero que también tenga ese elemento.

101
00:07:41,490 --> 00:07:45,920
Así que apuntaré a la subcarpeta de la lista de recetas aquí y ahora presionaré Enter.

102
00:07:46,290 --> 00:07:52,590
Y ahora tenemos el componente dentro de la lista de recetas porque nuevamente el ítem de la receta es solo

103
00:07:52,590 --> 00:07:54,690
un ítem en esta lista de recetas.

104
00:07:54,690 --> 00:07:57,400
Ahora, nuevamente, solo es posible una estructura.

105
00:07:57,540 --> 00:08:04,620
Puede eliminar el componente de recetas y poner el componente de la lista de recetas como componente principal de la receta

106
00:08:04,650 --> 00:08:07,480
y agregar detalles en algún lugar de este componente.

107
00:08:07,470 --> 00:08:10,810
Luego elegí tener esta configuración aquí sin embargo.

108
00:08:11,850 --> 00:08:13,990
Ahora pasemos a la lista de compras.

109
00:08:14,310 --> 00:08:22,950
Mucho antes de esto, por supuesto, ejecute NGC nuevamente para generar un nuevo componente y una lista de compras con nombre.

110
00:08:22,950 --> 00:08:30,120
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

111
00:08:30,120 --> 00:08:33,500
de lista de compras en la carpeta de mi aplicación principal.

112
00:08:33,510 --> 00:08:38,080
Así que al lado de las recetas y el encabezado dentro de la lista de compras.

113
00:08:38,080 --> 00:08:44,580
Solo hay otro componente que deseo crear y ese es el componente agregado de la lista de compras

114
00:08:44,580 --> 00:08:50,880
que nos permitirá agregar nuevos ingredientes o agregar los existentes que ahora deben ir al componente de la

115
00:08:50,880 --> 00:08:51,800
lista de compras.

116
00:08:51,810 --> 00:08:58,920
Así que al igual que antes con las recetas, simplemente lo cambiaré a la lista de compras. Agregué las compras con barras,

117
00:08:58,920 --> 00:09:01,670
y ahora se agregarán dentro de este componente.

118
00:09:01,980 --> 00:09:08,030
Entonces ahora tenemos todos los componentes que necesitamos por ahora o al menos creo que necesitamos por ahora.

119
00:09:08,100 --> 00:09:13,560
Por supuesto, siéntete libre de elegir una configuración diferente pero con todos estos componentes agregados y, dado que

120
00:09:13,560 --> 00:09:16,830
utilizas la opción Ver, también he añadido automáticamente el módulo AB.

121
00:09:16,890 --> 00:09:20,430
Si creó manualmente, asegúrese de agregarlos aquí también.

122
00:09:20,760 --> 00:09:25,190
Entonces, con todo lo creado que se agregó al módulo AB, ahora podemos usarlos.

123
00:09:25,200 --> 00:09:30,660
Comencemos a usarlos en la próxima conferencia y empecemos a llenarlos de vida allí.