1
00:00:00,090 --> 00:00:05,340
Pero bueno, antes comenzar con Angular y a ver las herramientas necesarias a comenzar la instalación.

2
00:00:05,400 --> 00:00:06,720
En fin, crear el proyecto.

3
00:00:06,760 --> 00:00:08,790
Bueno, quería ver una introducción angular.

4
00:00:08,880 --> 00:00:14,970
Bueno, justamente Angula es un framework de JavaScript por el ardiente en el frontend para crear aplicaciones

5
00:00:14,970 --> 00:00:18,720
web interactivas y sobretodo amistosas al usuario.

6
00:00:18,810 --> 00:00:23,670
Es decir, con interfaz gráfica bonita, reactivas, instantáneas, dinámicas.

7
00:00:23,730 --> 00:00:26,730
En fin, enriquece nuestra aplicación por el ambiente.

8
00:00:26,880 --> 00:00:31,890
Nuestra aplicación web bienpero angular mucho más que eso, aparte de ser un framework para JavaScript,

9
00:00:31,950 --> 00:00:37,470
también es uno de los más utilizados, más populares en el mercado y es el que más piden en la industria

10
00:00:37,560 --> 00:00:39,630
en las empresas para desarrollar este tipo.

11
00:00:39,630 --> 00:00:45,210
Aplicación cada vez está más posicionado como el framework estándar de JavaScript o de tag script,

12
00:00:45,220 --> 00:00:50,280
porque en realidad se programa en tag script, pero finalmente se tras pilas se convierte a JavaScript.

13
00:00:50,390 --> 00:00:55,550
Bueno, es el más estándar para desarrollar este tipo aplicaciones de lado cliente del lado del front

14
00:00:55,650 --> 00:00:58,110
y además desarrollado por un gigante por Google.

15
00:00:59,130 --> 00:01:02,490
Ven características para crear aplicaciones web responsive?

16
00:01:02,710 --> 00:01:09,450
S que se adaptan a diferentes dispositivos, equipos, tanto a equipos móviles de celular o navegador

17
00:01:09,450 --> 00:01:15,420
de un PC o notebook, tablets, en fin, y están preparada para que se adapten según la resolución y

18
00:01:15,420 --> 00:01:20,220
según nuestro equipo, ya sea utilizando Bootstrap o Angular material propio de Angular.

19
00:01:20,340 --> 00:01:21,990
En fin, hay diferentes herramientas.

20
00:01:22,080 --> 00:01:26,580
Otra característica muy importante, que es la esencia de vincular es S.p.A.

21
00:01:26,670 --> 00:01:30,600
Single Page Application, es decir, aplicación de una sola página.

22
00:01:30,690 --> 00:01:35,880
Al final construimos una gran aplicación con Angular, varios componentes que forman esta aplicación,

23
00:01:35,940 --> 00:01:40,950
pero siempre el usuario va a estar interactuando dentro de la misma página del navegador.

24
00:01:41,040 --> 00:01:46,170
Esta nunca se ha de actualizar, nunca va a realizar un reflejo donde contenido va cambiando de forma

25
00:01:46,170 --> 00:01:47,370
dinámica pero sin recargar.

26
00:01:47,370 --> 00:01:51,180
La página es instantáneo, de forma asíncrona y reactiva.

27
00:01:51,290 --> 00:01:55,230
Bueno, y justamente eso es una de las grandes diferencias con un monolito.

28
00:01:55,260 --> 00:02:02,400
Por ejemplo, si desarrollamos una aplicación con spring web m%s con pistas JSP o LIF dentro, bueno,

29
00:02:02,430 --> 00:02:03,510
todo dentro del servidor.

30
00:02:03,600 --> 00:02:05,370
En el bakker todos ejecutan el Wacken.

31
00:02:05,490 --> 00:02:07,560
Al final se genera el HTML.

32
00:02:07,660 --> 00:02:09,550
Bueno, todo ocurre en el servidor.

33
00:02:09,690 --> 00:02:13,860
Entonces el problema es que por cada rico es que estamos realizando a nuestro backend.

34
00:02:13,950 --> 00:02:20,310
Lo que hace el cliente es enviar todo el contenido HTML completo desde las primeras etiquetas del HTML,

35
00:02:20,430 --> 00:02:25,950
las hojas de estilos, los javascript, el contenido principal, el menú, los banner, el menú lateral,

36
00:02:26,010 --> 00:02:26,730
las imágenes.

37
00:02:26,820 --> 00:02:31,890
Todo se está enviando en cada request al backend y finalmente retorna lo mismo.

38
00:02:32,010 --> 00:02:38,910
Devuelve exactamente lo mismo con el contenido dinámico que cambia según el controlador, según la ruta

39
00:02:38,910 --> 00:02:40,950
que estemos enviando o llamando.

40
00:02:41,010 --> 00:02:41,490
Se fijan.

41
00:02:41,580 --> 00:02:43,320
Entonces envía todo y devuelve todo.

42
00:02:43,410 --> 00:02:48,990
Es una carga bastante pesada al servidor y eso multiplicado por la cantidad de usuarios concurrentes

43
00:02:49,050 --> 00:02:50,460
que usan la aplicación.

44
00:02:50,520 --> 00:02:52,920
Bueno, el rendimiento podría no ser menor.

45
00:02:53,040 --> 00:02:58,020
Hay que tener en cuenta, mientras que Angular todo ocurre en una sola página en el cliente, las hojas

46
00:02:58,020 --> 00:02:58,530
estilo.

47
00:02:58,560 --> 00:03:01,260
Todo permanece intacto en su mismo lugar.

48
00:03:01,350 --> 00:03:06,930
Por ejemplo, el componente del menú, el menú de navegación, menú lateral, los banner, imágenes.

49
00:03:06,960 --> 00:03:08,220
Todos se quedan en clientes.

50
00:03:08,220 --> 00:03:12,210
Solamente enviamos un Jaison al Wacken los datos importantes nada más.

51
00:03:12,330 --> 00:03:18,090
Enviamos los datos y nos regresan datos ya sea modificados o queremos hacer una consulta.

52
00:03:18,180 --> 00:03:24,240
Nos retorna una lista de algo o el detalle de algo, pero solamente un Jetson, no todo el HTML, no

53
00:03:24,240 --> 00:03:27,420
todo el CSS JavaScript, el HTML.

54
00:03:27,480 --> 00:03:29,310
Entonces claro, es mucho más rabio.

55
00:03:29,400 --> 00:03:33,180
Se mantiene forma de una sola página estática en el cliente.

56
00:03:33,270 --> 00:03:38,640
Lo que cambia bueno es la parte dinámica, el contenido principal que va variando según las rutas que

57
00:03:38,640 --> 00:03:41,370
invoquemos en nuestro API Rest en el paquete.

58
00:03:41,460 --> 00:03:42,750
Por eso es S.P.A.

59
00:03:42,960 --> 00:03:49,290
Simplemente cambia nuestro contenido principal, que son otros componentes que están enrutador a jureles

60
00:03:49,290 --> 00:03:56,490
de Angular y está bueno mediante una clase servida angular de forma reactiva utilizando el API RX 10

61
00:03:56,550 --> 00:03:57,780
se comunica con el Bakker.

62
00:03:57,930 --> 00:04:03,930
Realiza esta comunicación con otro micro servicios mediante empeines y manejamos la respuesta de forma

63
00:04:03,930 --> 00:04:06,420
reactiva utilizando la API observable.

64
00:04:06,510 --> 00:04:09,030
Ahí tenemos que suscribirnos y ahí implementar nuestro código.

65
00:04:09,090 --> 00:04:15,090
Hoy se emite la respuesta que obtenemos del Wacken y podemos mostrar está en la vista de alguna forma,

66
00:04:15,180 --> 00:04:22,200
ya sea con un end Gifford y tirando con un loop, por ejemplo, o mostrar los objetos de este Yeison

67
00:04:22,320 --> 00:04:24,210
mediante extrapolación de string.

68
00:04:24,330 --> 00:04:28,260
Pero bueno, son puras cosas que vamos a ver en el curso, así que no se preocupen, esto es solamente

69
00:04:28,260 --> 00:04:28,890
una introducción.

70
00:04:28,950 --> 00:04:31,500
Entonces estas serían las cuatro características principales.

71
00:04:31,590 --> 00:04:33,090
Bueno, por supuesto, hay muchas más.

72
00:04:34,000 --> 00:04:39,730
Bien, otros deben importante en las versiones cuando se actualiza o cambio una versión a otra.

73
00:04:39,820 --> 00:04:43,180
Acá tenemos la versión 9.0 .2 hasta el momento.

74
00:04:43,330 --> 00:04:44,670
La última última versión.

75
00:04:44,740 --> 00:04:47,440
Pero esto va cambiando día a día, semana a semana.

76
00:04:47,560 --> 00:04:50,950
Incluso la versión mayor que la vamos a ver, cambia cada seis meses.

77
00:04:50,960 --> 00:04:52,300
Entonces esto es muy constante.

78
00:04:52,330 --> 00:04:57,610
Pero no se preocupen, porque generalmente la mayoría de las veces no afecta en nada a nuestro código.

79
00:04:57,700 --> 00:04:59,950
La versión consta de tres números.

80
00:05:00,040 --> 00:05:02,280
Acá tenemos, por ejemplo, el 2.

81
00:05:02,350 --> 00:05:04,660
Vamos a comenzar primero de derecha a izquierda.

82
00:05:04,750 --> 00:05:10,380
Esta versión es para arreglos de bugs, mejoras para solución al problema de versiones anteriores,

83
00:05:10,420 --> 00:05:14,020
pero solamente arregla algo y eso no afecta nada en nuestro código.

84
00:05:14,110 --> 00:05:16,480
Nuestro código siempre va a seguir funcionando.

85
00:05:16,570 --> 00:05:17,950
Solamente arreglo de pags.

86
00:05:18,070 --> 00:05:24,070
La segunda versión que tenemos acá, en este caso la 0, es la versión menor que corresponde a nuevas

87
00:05:24,070 --> 00:05:29,470
características pero menores nuevas funcionalidades que no son tan relevantes para el framework.

88
00:05:29,530 --> 00:05:32,740
Pero también nuestro código también va funcionando sin ningún problema.

89
00:05:32,800 --> 00:05:36,790
Solamente agrega nueva característica, nueva función al framework.

90
00:05:36,850 --> 00:05:41,880
Todo nuestro código que ya teníamos implementado, obviamente sigue funcionando tal cual, no afecta

91
00:05:41,890 --> 00:05:42,160
nada.

92
00:05:42,250 --> 00:05:45,910
Y por último, la versión 9 corresponde a la versión mayor.

93
00:05:46,030 --> 00:05:53,340
Esto más o menos ocurre cada 6 meses a un año, pero lo típico 6 meses, 8 meses va cambiando.

94
00:05:53,350 --> 00:05:58,780
Traccion mayor son cambia un poco más importantes que sí podrían afectar en nuestro código, pero las

95
00:05:58,780 --> 00:06:01,180
estadísticas todos los cambio versiones que han ocurrido.

96
00:06:01,270 --> 00:06:06,670
La verdad es que no ha afectado prácticamente nada en las aplicaciones, pero también podría ocurrir

97
00:06:06,760 --> 00:06:07,390
cambios mayores.

98
00:06:07,420 --> 00:06:14,500
Por ejemplo, alguna librería que en alguna versión anterior estaba de pruébatela, es decir, obsoleta

99
00:06:14,590 --> 00:06:16,000
y está marcada como de Kateb.

100
00:06:16,030 --> 00:06:21,700
Puede que en una versión mayor posterior esa clase o característica se elimine ya ahí podríamos tener

101
00:06:21,700 --> 00:06:26,320
un problema, pero este momento no ocurrió de esa forma, pero es importante tenerlo en cuenta.

102
00:06:26,530 --> 00:06:30,820
Entonces, cualquier cambio de versión, incluso mayor, con cambio estructural o con cambio más robustos,

103
00:06:30,910 --> 00:06:36,280
por lo general no afecta al funcionamiento de nuestra aplicación que teníamos desarrollada con otra

104
00:06:36,280 --> 00:06:36,550
versión.

105
00:06:36,670 --> 00:06:41,290
La podemos emigrar sin ningún problema y durante el curso, si llegan a tener algún problema con versiones

106
00:06:41,290 --> 00:06:45,130
posteriores, claro, porque ahora están en la nube, pero muy probable en el momento de que vean esta

107
00:06:45,130 --> 00:06:47,580
clase, quizá en qué versión esté angulas.

108
00:06:47,680 --> 00:06:48,940
Quizá la diez y la once.

109
00:06:49,060 --> 00:06:50,930
En fin, lo más probable que todo funcione tal cual.

110
00:06:50,980 --> 00:06:57,640
Pero en caso de que cambie algo, algún import, alguna clase, bueno, simplemente me avisan y la actualizan.

111
00:06:57,670 --> 00:07:01,990
Pero de todas formas creo que es poco probable dado el historial de cambio de versiones.

112
00:07:02,050 --> 00:07:06,730
Por ejemplo, desde las 7 a la 8 y de la 8 a 9 no hubo ningún cambio en el código.

113
00:07:06,820 --> 00:07:08,560
Ha funcionado de forma transparente.

114
00:07:08,860 --> 00:07:14,710
Entonces, recuerden, de izquierda a derecha, la primera corresponde a la versión mayor cambio estructurales.

115
00:07:14,740 --> 00:07:19,870
Podrían cambiar algunas clases, eliminar alguna clase que está de pruébatela, cambiar algún import,

116
00:07:19,930 --> 00:07:25,660
en fin, la menor nueva característica y la última arreglo de bugs, de errores, optimizaciones del

117
00:07:25,660 --> 00:07:26,140
código.

118
00:07:26,500 --> 00:07:28,300
Pero todo a nivel de Kor del framework.

119
00:07:29,230 --> 00:07:33,790
Bueno, Angular utiliza el lenguaje de programación TypeScript, que es un super conjunto de JavaScript.

120
00:07:33,890 --> 00:07:36,730
Bueno, por supuesto también incluye Mac Script 6.

121
00:07:36,820 --> 00:07:37,990
Bueno, también 5.

122
00:07:38,050 --> 00:07:41,380
La acción 5 es el Jack Deep nativo que se ejecuta.

123
00:07:41,440 --> 00:07:43,740
Interpreta los navegadores en Eclipse.

124
00:07:43,850 --> 00:07:45,680
Es un poco más avanzado, más orientado.

125
00:07:45,680 --> 00:07:46,270
Objeto.

126
00:07:46,360 --> 00:07:47,470
Nueva característica.

127
00:07:47,530 --> 00:07:52,420
Creo que actualmente estamos en la versión 10 de Eggman Script o versión 2019.

128
00:07:52,480 --> 00:07:58,540
También muy característica, pero todo relacionado a la programación orientada a objetos, librerías

129
00:07:58,630 --> 00:07:59,470
mucho más robusto.

130
00:07:59,560 --> 00:08:04,000
Entonces lo que acepta el script es juntar todo esto todas las versiones de ya script este super conjunto

131
00:08:04,090 --> 00:08:09,760
y le agrega una abstracción mucho más robusta, mucho más orientà objeto mucho más al nivel de Java.

132
00:08:09,820 --> 00:08:14,050
Por ejemplo, los tipos de datos se basan en clases e interfaces.

133
00:08:14,110 --> 00:08:16,990
Podemos usar clases interface, clases abstracta.

134
00:08:17,110 --> 00:08:21,460
Los principios orientà objeto de Java o Deshechar o C++.

135
00:08:21,580 --> 00:08:23,560
Bueno, acá se aplican exactamente igual.

136
00:08:23,620 --> 00:08:30,130
Tenemos modificadores, visibilidad, abstracción, polimorfismo bueno y todo lo que polimorfismo todo

137
00:08:30,130 --> 00:08:37,300
lo que herencia sobrecarga métodos o escritura interfaces f. Tipo de datos más fuerte fuertemente tipado

138
00:08:37,420 --> 00:08:42,880
tenemos atributos métodos constructores metodos get métodos set muy parecido también en Java lamentemos

139
00:08:42,880 --> 00:08:48,100
tipo generics podemos implementar nuestro generics para poder reutilizar mejor nuestras clases en la

140
00:08:48,100 --> 00:08:51,160
herencia, decoradores, anotaciones y mucho más.

141
00:08:51,280 --> 00:08:52,840
Es un lenguaje bien robusto.

142
00:08:52,960 --> 00:08:58,510
La escrit a y por último, desarrollado por Microsoft se utiliza en Angular, se integra en Angular

143
00:08:58,540 --> 00:08:59,560
como lenguaje principal.

144
00:08:59,620 --> 00:09:04,480
Pero bueno, por supuesto que cuando generamos el código nuestro proyecto en producción con el comando

145
00:09:04,570 --> 00:09:05,350
en Built.

146
00:09:05,470 --> 00:09:11,950
Bueno, lo que hace es traducir, convertir tras Pilato este código TypeScript e ya script nativo.

147
00:09:12,040 --> 00:09:17,320
HTML y hoja de estilos para que lo ejecuten los navegadores estándar y se puede interpretar.

148
00:09:18,370 --> 00:09:23,650
Componentes principales de Angular del framework, muchos entre ellos y lo más importante, sus componentes,

149
00:09:23,710 --> 00:09:24,940
los componentes mismos de Angular.

150
00:09:25,000 --> 00:09:29,290
Una aplicación de Angular está compuesta por muchos componentes, básicamente componentes, una página,

151
00:09:29,320 --> 00:09:34,540
pero podemos tener un componente principal que está formado por otro componente por sus componentes.

152
00:09:34,570 --> 00:09:40,450
Por ejemplo, un menú de navegación, un banner, un calendario, alguna tabla con datos, algún gráfico,

153
00:09:40,540 --> 00:09:41,860
un pie de página, en fin.

154
00:09:41,920 --> 00:09:47,290
Cada uno de estos elementos de nuestra aplicación es un componente, pero también tiene un componente

155
00:09:47,290 --> 00:09:53,050
principal que es dinámico, que va cambiando según rutas, según link que tengamos de Angular.

156
00:09:53,180 --> 00:09:58,210
Entonces, a medida que hacemos un clic en algún botón en el menú de navegación, nuestro contenido

157
00:09:58,210 --> 00:09:59,680
principal va cambiando.

158
00:09:59,710 --> 00:10:05,800
Podemos enrutar un componente a una ruta VL en Angular ya te cambian de forma dinámica y también muy

159
00:10:05,800 --> 00:10:07,480
importante sin recargar la página.

160
00:10:07,570 --> 00:10:12,580
La página jamás se actualiza, se refresca, no siempre se mantiene en una sola página.

161
00:10:12,670 --> 00:10:14,950
Hace que nuestra aplicación sea instantánea.

162
00:10:15,040 --> 00:10:17,680
Asíncrona, por supuesto, con características reactivas.

163
00:10:17,800 --> 00:10:23,890
Bueno, y en Angular una clase componente es una clase de Tai-Chi común y corriente, pero que tiene

164
00:10:23,980 --> 00:10:30,310
un decorador, una anotación específica component con algunas configuraciones, un selector con la plantilla

165
00:10:30,370 --> 00:10:34,000
que vamos a utilizar para reutilizar el contenido del componente.

166
00:10:34,090 --> 00:10:35,440
En fin, cosa que vamos a ver.

167
00:10:35,530 --> 00:10:40,630
Y también puede implementar algunas interfaces, algunos contrato y otra característica del componente

168
00:10:40,690 --> 00:10:45,910
es que son asíncrono, es decir, se ejecutan cada uno en su propio proceso, se ejecutan y se cargan.

169
00:10:45,970 --> 00:10:51,940
Por lo tanto, entre si no se interrumpe un componente, no tienes que estar esperando a que se cargue

170
00:10:51,940 --> 00:10:54,080
lo demás componentes para poder iniciarse.

171
00:10:54,130 --> 00:10:55,330
No todos ejecutan.

172
00:10:55,330 --> 00:10:57,550
Se inicializa de forma paralela.

173
00:10:57,640 --> 00:11:02,350
Bueno, la plantillas, la plantilla también son parte del componente, el componente en la clase que

174
00:11:02,350 --> 00:11:07,720
hay por detrás y la plantilla la presentación que se muestra al usuario, el HTML.

175
00:11:07,870 --> 00:11:14,620
Ahí podemos imprimir variables de la vista que son atributos del componente y podemos mostrar imprimir

176
00:11:14,620 --> 00:11:18,730
estos atributos mediante extrapolación de strings utilizando llaves.

177
00:11:18,790 --> 00:11:25,240
También podemos utilizar directivas como en If, en Gifford, en Gifford para iterar, en gif para evaluar

178
00:11:25,300 --> 00:11:31,090
una expresión booleana y de esa forma poder mostrar o no mostrar un componente, un elemento HTML,

179
00:11:31,180 --> 00:11:34,210
ocultarlo, por ejemplo, o mostrarlo según una condición.

180
00:11:34,270 --> 00:11:39,040
También los eventos muy importantes eventos para que el usuario pueda interactuar con la aplicación,

181
00:11:39,130 --> 00:11:44,920
eventos en los botones en nuestras tablas, es decir, en las filas o registros en nuestros enlaces.

182
00:11:44,980 --> 00:11:51,460
En fin, por ejemplo, el evento típico change cuando cambia algún elemento en un campo del formulario

183
00:11:51,550 --> 00:11:55,140
o una lista desplegable en un check box, también el evento click.

184
00:11:55,300 --> 00:12:00,580
Cuando hacemos un clic en un botón, en fin, para que llame o invoque un método de la clase componente

185
00:12:00,700 --> 00:12:01,420
en cuestión.

186
00:12:01,510 --> 00:12:07,450
Los Pippy también son filtros que nos permite modificar y dar formato a los datos de nuestra vista.

187
00:12:07,540 --> 00:12:13,690
Por ejemplo, dar formato a una fecha, a una moneda, a números y convertir en mayúscula minúscula.

188
00:12:13,750 --> 00:12:18,550
Podemos hacer muchas cosas y angula trae varios pips por defecto que ya vienen construidos rutas de

189
00:12:18,550 --> 00:12:19,000
navegación.

190
00:12:19,030 --> 00:12:24,160
Tal como explicaba, podemos mapear componentes a rutas para que nuestro contenido principal cambie

191
00:12:24,160 --> 00:12:25,090
de forma dinámica.

192
00:12:25,240 --> 00:12:28,570
A medida que hacemos clic en estas rutas, ejecute el contenido.

193
00:12:28,630 --> 00:12:32,500
Muestre contenido de forma instantánea sin recargar la página.

194
00:12:32,590 --> 00:12:36,930
Decoradores, anotaciones, servicios que se encarga de la lógica negocio.

195
00:12:37,030 --> 00:12:43,540
Se trabajan con datos que vienen desde el Wacken utilizando el http kylian de forma reactiva o utilizando

196
00:12:43,540 --> 00:12:44,320
el observable.

197
00:12:44,380 --> 00:12:50,710
Entonces básicamente el http client nos permite comunicarnos mediante verbos del request post put get

198
00:12:50,740 --> 00:12:56,490
delight con el Wacken para guardar datos para eliminar para enviar fin, subir imágenes y texto de forma

199
00:12:56,500 --> 00:12:59,770
síncrona orientado a evento sin recargar la página.

200
00:12:59,860 --> 00:13:05,710
También podemos crear nuestra propia clase de scrip, ya sea de utilidad, ya helpers o clase del modelo

201
00:13:05,800 --> 00:13:11,260
que representa nuestros dato mapeado a los Yeison que corresponden a los Entity por ejemplo, o a los

202
00:13:11,260 --> 00:13:18,610
pocos en Java en Spring manejo formulario también muy importante data binding para poner datos en Timol,

203
00:13:18,700 --> 00:13:24,760
una directiva que nos permite mapear un formulario a una clase de Tai-Chi de forma automática para que

204
00:13:24,760 --> 00:13:30,010
se vayan poblando los campos los datos a medida que vayamos escribiendo, validad también estos datos

205
00:13:30,100 --> 00:13:32,320
con sus respectivos mensaje de error.

206
00:13:32,430 --> 00:13:35,480
Bueno, sin extenderme más, nos vemos en la siguiente clase.