1
00:00:00,180 --> 00:00:06,090
Bien, en el ejemplo anterior creamos nuestro Nordberg, nuestro menú para nuestra página, pero la

2
00:00:06,090 --> 00:00:10,620
incluimos en duro dentro del html del app component.

3
00:00:10,710 --> 00:00:15,540
La idea es tener un componente separado que no esté tan acoplado al componente principal.

4
00:00:15,690 --> 00:00:18,030
Entonces la idea es crear desde cero.

5
00:00:18,180 --> 00:00:24,750
Vamos a ver diferentes formas para crear componentes, ya sea de forma automática utilizando la consola

6
00:00:24,750 --> 00:00:25,290
de Angular.

7
00:00:25,380 --> 00:00:31,860
O bien crear cada componente, la clase, las vistas de forma manual, archivo por archivo.

8
00:00:31,920 --> 00:00:35,880
Y por supuesto, tenemos que configurar y registrarlo en Angular.

9
00:00:36,030 --> 00:00:44,790
La idea es en el archivo vitta a component acá donde tenemos el menú de navegación en vez de tener todo

10
00:00:44,790 --> 00:00:45,210
esto.

11
00:00:45,270 --> 00:00:53,820
Por ejemplo, acá tener la etiqueta App Jaber o menú o como le queramos llamar la etiqueta y acá se

12
00:00:53,820 --> 00:00:57,030
incluya el menú el gelder de nuestra página.

13
00:00:57,150 --> 00:01:02,700
Acá va a estar el contenido principal y abajo podríamos tener por ejemplo un footer.

14
00:01:02,820 --> 00:01:08,880
Por ejemplo, si guardamos acá el apreder y vamos a la consola, ejecutamos.

15
00:01:12,240 --> 00:01:15,330
En Geezer menos o para abrir el navegador.

16
00:01:19,570 --> 00:01:25,970
Cuando se abre la página observamos un error, ya que la etiqueta a Bieber no existe y Angular trata

17
00:01:25,970 --> 00:01:29,320
de educaste componente y no lo encuentra dentro de su contenedor.

18
00:01:29,470 --> 00:01:30,880
Entonces esa es la idea.

19
00:01:31,920 --> 00:01:37,620
Entonces, cuál sería el siguiente paso para que el Ab7 funcione y no muestre el error?

20
00:01:37,830 --> 00:01:39,330
Vamos a dejar tal como estaba.

21
00:01:40,410 --> 00:01:41,940
Y vamos a crear el componente.

22
00:01:42,000 --> 00:01:48,450
Lo primero, para tener un orden, una estructura, una nomenclatura recomendada, cada componente.

23
00:01:48,600 --> 00:01:53,070
Se recomienda que esté dentro de un folder, un directorio, por ejemplo.

24
00:01:54,240 --> 00:01:55,080
Le vamos a llamar.

25
00:01:56,130 --> 00:01:59,670
Acá tenemos una carpeta y acá vamos a crear nuestra clase.

26
00:01:59,700 --> 00:02:00,360
Component.

27
00:02:00,510 --> 00:02:01,800
Getter component.

28
00:02:02,010 --> 00:02:06,570
La forma manual es crear una clase con click derecho new file.

29
00:02:06,720 --> 00:02:07,530
Es un archivo.

30
00:02:07,950 --> 00:02:12,480
Le vamos a llamar Jeeter component.

31
00:02:12,690 --> 00:02:13,770
Punto ts.

32
00:02:13,920 --> 00:02:14,850
Y por qué este nombre?

33
00:02:14,970 --> 00:02:20,550
Este nombre responde también a una nomenclatura, a un estándar recomendado en Angular.

34
00:02:20,640 --> 00:02:27,540
Por ejemplo, acá tenemos una clase tipo componente de Angular que va a responder al jede de nuestra

35
00:02:27,540 --> 00:02:33,120
página, que va a contener el menú de navegación y todo el contenido típico de una cabecera de página.

36
00:02:33,210 --> 00:02:34,320
Entonces vamos a guardar.

37
00:02:37,460 --> 00:02:39,500
Acá tenemos el jet recomponen.

38
00:02:39,830 --> 00:02:42,380
Lo primero es crear la clase.

39
00:02:42,620 --> 00:02:44,900
La sintaxis es con export.

40
00:02:45,560 --> 00:02:51,140
Después vamos a explicar bien, pero básicamente nos permite poder exportar esta clase para que se pueda

41
00:02:51,230 --> 00:02:54,590
utilizar, por ejemplo, para que se pueda registrar.

42
00:02:54,680 --> 00:03:00,710
Guardar en la configuración del módulo en app module en el contenedor de Angular.

43
00:03:00,860 --> 00:03:04,550
Entonces Export class y el nombre también.

44
00:03:05,330 --> 00:03:11,120
Continuando con el standard y muy parecido al estándar de Java, las clases comienzan siempre en mayúscula

45
00:03:11,180 --> 00:03:12,020
y compuesta.

46
00:03:12,080 --> 00:03:18,110
Se separan también con mayúscula Kamel Keys y por supuesto, una clase del tipo Component tiene que

47
00:03:18,110 --> 00:03:19,550
llevar o debería llevar.

48
00:03:19,640 --> 00:03:25,520
Es una práctica recomendada el sufijo component y pasa lo mismo con la clase de servicio.

49
00:03:25,670 --> 00:03:34,940
Por ejemplo cliente service, cliente component, cliente pipe, cliente directive getter component

50
00:03:35,180 --> 00:03:35,840
y las llaves.

51
00:03:36,180 --> 00:03:37,460
Ahí tenemos nuestra clase.

52
00:03:37,610 --> 00:03:46,340
La clase tiene que estar anotada con un decorador component el decorador componen y también la diferencia

53
00:03:46,340 --> 00:03:49,400
entre cualquier tipo de clase de angular es su decorador.

54
00:03:49,460 --> 00:03:56,750
Por ejemplo, ungía recomponen vas tratado con Arruà componer una clase servis de Angular va a estar

55
00:03:56,750 --> 00:04:03,040
anotado con la notación inyectable, es decir, un servicio que se puede inyectar mediante inyección

56
00:04:03,060 --> 00:04:04,880
dependencia en componentes.

57
00:04:05,000 --> 00:04:11,030
Los pipe va a tener la anotación pipe la directivas y así cada tipo de clase.

58
00:04:11,120 --> 00:04:14,720
Lo que lo diferencia es su decorador, su anotación.

59
00:04:14,810 --> 00:04:21,020
Justamente lo mismo como sucede en Spring para clase del tipo controladoras tenemos la anotación Controller

60
00:04:21,110 --> 00:04:22,800
para la clase del tipo service.

61
00:04:22,880 --> 00:04:26,330
Usamos servis para el tipo de clases que acceden a los datos.

62
00:04:26,390 --> 00:04:27,530
Usamos repository.

63
00:04:27,650 --> 00:04:28,100
En fin.

64
00:04:28,190 --> 00:04:30,590
Y de forma genérica en spring se utiliza component.

65
00:04:30,830 --> 00:04:38,390
Pero acá la filosofía exactamente la misma es poder decorar según el tipo, el rol que cumple la clase

66
00:04:38,390 --> 00:04:42,110
dentro de Angular y por supuesto lo que representa y lo que hace.

67
00:04:42,290 --> 00:04:46,850
En este caso es un componente y siempre con el ArruÃ, una anotación, una metadata.

68
00:04:47,300 --> 00:04:50,120
Luego tenemos que importar esta anotación.

69
00:04:50,240 --> 00:04:57,480
Entonces con import hacemos referencia con las llaves al nombre component.

70
00:04:59,270 --> 00:05:08,210
From con comilla simple arroba, angulas, kor y puntico, entonces queremos importar la clase, guardamos

71
00:05:08,540 --> 00:05:12,410
y acá tenemos que agregar los atributos, por ejemplo el selector.

72
00:05:14,090 --> 00:05:20,280
De cómo hace llamar a Cheever o el nombre que queramos coma y va a tener el temple.

73
00:05:21,420 --> 00:05:23,820
Podemos usar el template o template o RL.

74
00:05:23,970 --> 00:05:31,680
Por ahora lo vamos a dejar en template y acá utilizamos el caracter de multi línea para colocar el contenido

75
00:05:31,770 --> 00:05:33,150
HTML acá.

76
00:05:34,170 --> 00:05:39,540
Entonces acá pueden escribir todo el contenido HTML en vez de usar una vista, una plantilla HTML.

77
00:05:39,660 --> 00:05:41,460
Por supuesto, vamos a ver las dos formas.

78
00:05:41,490 --> 00:05:44,160
Primero, contemplaré para ver lo más simple.

79
00:05:44,280 --> 00:05:48,970
Se recomienda cuando son HTML muy básico, de 3 a 5 líneas como máximo.

80
00:05:49,020 --> 00:05:50,640
Pero así son más de 5 líneas.

81
00:05:50,700 --> 00:05:56,370
Es mucho mejor ya tener un archivo separado, una vista utilizando template °l, pero por ahora lo vamos

82
00:05:56,370 --> 00:05:57,450
a dejar de esta forma.

83
00:05:57,610 --> 00:06:01,800
Y para el ejemplo, por ahora vamos a tener acá el un H1.

84
00:06:04,520 --> 00:06:05,210
Angular.

85
00:06:07,340 --> 00:06:07,910
Angular.

86
00:06:08,000 --> 00:06:08,480
Spring.

87
00:06:10,760 --> 00:06:11,090
Bien.

88
00:06:11,220 --> 00:06:18,710
Ahí tenemos nuestro componente decorado con component, una clase export que contiene el nombre ider

89
00:06:18,800 --> 00:06:22,190
y el sufijo component y tenemos que importar el decorador.

90
00:06:22,700 --> 00:06:23,420
Estamos listos.

91
00:06:23,570 --> 00:06:29,390
Ahora, si vamos al navegador, revisamos la aplicación y por supuesto que no hay ningún cambio.

92
00:06:29,780 --> 00:06:31,490
Eso está bien, es normal.

93
00:06:31,550 --> 00:06:36,380
Qué es lo que faltaría para que este componente funcione en nuestra aplicación, ya que hasta el momento

94
00:06:36,380 --> 00:06:37,520
solamente hemos creado la clase.

95
00:06:37,640 --> 00:06:38,180
Nada más.

96
00:06:38,240 --> 00:06:43,190
Una clase dentro de proyecto, pero en ninguna parte le estamos diciendo Angular.

97
00:06:43,250 --> 00:06:45,020
Acá tenemos un nuevo componente.

98
00:06:45,140 --> 00:06:46,880
Tiene que desplegarlo en la página.

99
00:06:47,000 --> 00:06:49,670
En ninguna parte hemos configurado nada.

100
00:06:50,060 --> 00:06:51,710
Entonces, por supuesto que no va a funcionar.

101
00:06:51,800 --> 00:06:56,990
Para que funcione tenemos que registrar IndyCar Angular de que existe este componente.

102
00:06:57,080 --> 00:07:00,950
Para eso nos vamos a App móvil e importante.

103
00:07:00,980 --> 00:07:04,430
Tenemos que primero importar import.

104
00:07:05,600 --> 00:07:13,310
Justamente cuando creamos la clase se define la firma como export para que después se pueda importar

105
00:07:13,370 --> 00:07:14,000
y utilizar.

106
00:07:14,180 --> 00:07:23,960
Entonces sería import si fija que automáticamente reconoce la clase dentro del proyecto FROM y acá indicamos

107
00:07:23,960 --> 00:07:25,100
su ubicación.

108
00:07:25,390 --> 00:07:34,340
Jader Larch sería getter el directorio y el nombre del archivo, pero si la extensión solamente el nombre

109
00:07:34,340 --> 00:07:35,540
del archivo getter.

110
00:07:37,850 --> 00:07:44,840
Component Ahí lo tenemos y donde se tiene que registrar en declare Echols justo debajo de app component.

111
00:07:45,590 --> 00:07:51,380
Acá colocamos el componente Z guardamos.

112
00:07:51,500 --> 00:07:54,920
Ahora si vamos a navegador tampoco va a haber ningún cambio.

113
00:07:55,850 --> 00:07:56,360
Se fijan?

114
00:07:56,540 --> 00:07:57,170
No hay ningún cambio.

115
00:07:57,170 --> 00:07:58,250
Todavía no pasa nada.

116
00:07:58,370 --> 00:07:59,380
Y qué me faltaría?

117
00:07:59,470 --> 00:08:00,390
Faltaría.

118
00:08:00,830 --> 00:08:02,450
Acá tenemos el G de componer.

119
00:08:02,540 --> 00:08:10,250
Faltaría utilizar el selector entonces en el lugar de nuestra aplicación, donde utilicemos esta etiqueta.

120
00:08:10,340 --> 00:08:15,750
Ahí se va a desplegar el contenido y la lógica del ider component.

121
00:08:16,010 --> 00:08:18,860
Si lo queremos mostrar, por ejemplo, en el app component.

122
00:08:19,340 --> 00:08:20,090
HTML.

123
00:08:20,540 --> 00:08:22,310
Justo acá al lado del menú.

124
00:08:22,610 --> 00:08:25,160
Acá estoy usando un plan jinns el m.t que autocomplete.

125
00:08:26,180 --> 00:08:30,470
Coloco el nombre de la etiqueta y me genera todo de forma automática.

126
00:08:30,560 --> 00:08:32,780
Un playing muy bueno y recomendado.

127
00:08:33,230 --> 00:08:33,500
Bien.

128
00:08:33,590 --> 00:08:35,570
Guardamos y ahora volvemos al navegador.

129
00:08:36,660 --> 00:08:38,680
Y ahí aparece Angular Spring.

130
00:08:38,850 --> 00:08:39,420
Se fijan?

131
00:08:39,570 --> 00:08:44,730
Entonces ahora vamos a mover todo el contenido del menú de navegación y lo vamos a colocar acá.

132
00:08:44,880 --> 00:08:45,810
Volvemos al autom.

133
00:08:46,960 --> 00:08:53,470
Vamos a cortar todo el NAF completamente, dejamos solamente la etiqueta Gelder, guardamos.

134
00:08:53,620 --> 00:09:01,870
Volvemos al Gelder Component y quitamos el H1 y lo cambiamos por el menú de navegación.

135
00:09:02,380 --> 00:09:03,070
Guardamos.

136
00:09:03,220 --> 00:09:13,810
Vamos a crear acá un título del tipo String con el valor AB Angular Spring.

137
00:09:14,290 --> 00:09:17,770
Y este atributo lo vamos a agregar acá.

138
00:09:19,270 --> 00:09:26,310
Entonces, en vez de colocar bar, simplemente vamos a colocar las llaves de interpolación de Streak,

139
00:09:26,500 --> 00:09:32,380
que justamente para imprimir o una expresión de salida se le llama interpolación de string en Angular.

140
00:09:32,500 --> 00:09:36,550
Y acá colocamos el atributo título title.

141
00:09:37,600 --> 00:09:41,490
Guardamos y debería mostrar en el menú App Angular Spring.

142
00:09:41,620 --> 00:09:42,880
Le puedo colocar ahí un guión.

143
00:09:43,030 --> 00:09:43,690
Guardamos.

144
00:09:43,780 --> 00:09:44,770
Vamos a navegador.

145
00:09:45,770 --> 00:09:46,700
Y acá lo tenemos.

146
00:09:47,220 --> 00:09:49,730
Entonces acá tenemos nuestro menú de navegación.

147
00:09:49,880 --> 00:09:54,650
Creo que el nombre que un poco un poco largo, así que lo vamos a achicar, le vamos a colocar solamente

148
00:09:54,680 --> 00:09:59,750
por ahora a Pepe Angulas y después, cuando trajimos con Shrink, le colocamos la parte de Spring.

149
00:10:03,100 --> 00:10:09,630
A sí, entonces está funcionando nuestro menú de navegación, un componente completamente acoplado del

150
00:10:09,630 --> 00:10:16,410
componente principal del app component y en la siguiente clase vamos a separar a una vista independiente.

151
00:10:17,340 --> 00:10:23,280
Es decir, en vez de tener acá todo este HTML que realmente se ve un poco complejo, quizás de mantener,

152
00:10:23,370 --> 00:10:26,220
es mejor tenerlo dentro de su propia vista.

153
00:10:26,310 --> 00:10:32,040
Por ejemplo, en Jeeter component punto html, pero eso lo dejamos para la próxima clase.

154
00:10:32,130 --> 00:10:36,180
Quedamos hasta acá y cualquier duda que tengan la revisamos en el foro.

155
00:10:36,330 --> 00:10:37,230
Hasta la próxima.