1
00:00:00,150 --> 00:00:04,650
Vamos a comenzar con la instalación de todas las herramientas necesarias para el curso, pero por el

2
00:00:04,650 --> 00:00:08,130
lado de Angular, por el lado del cliente, el Fronte.

3
00:00:08,250 --> 00:00:13,100
Después vamos a ver la instalación del backend, todas las herramientas por el lado de Spring.

4
00:00:13,230 --> 00:00:20,670
Lo primero que tenemos que instalar es Nott, ya que incluye un componente llamado npm Not Package Manager,

5
00:00:20,730 --> 00:00:25,440
muy parecido a lo que es Maven en Java para administrar y cargar dependencias.

6
00:00:25,500 --> 00:00:31,260
Acá es lo mismo, pero llevado al mundo JavaScript Not back es manager o npm, no permite descargar

7
00:00:31,260 --> 00:00:36,870
por ejemplo cualquier herramienta o framework JavaScript para Angular si elide para crear proyectos

8
00:00:36,870 --> 00:00:37,440
en Angular.

9
00:00:37,530 --> 00:00:43,800
En fin, yo recomiendo que sea la versión más estable recomendada para la mayoría de los usuarios la

10
00:00:43,800 --> 00:00:50,220
versión LTS que significa soporte a largo plazo, mientras que la versión Current incluye las últimas

11
00:00:50,220 --> 00:00:50,960
características.

12
00:00:51,090 --> 00:00:54,760
Pero para trabajar con Angular no se requieren las últimas características.

13
00:00:54,870 --> 00:01:01,320
Además que podríamos tener algún problema de compatibilidad de soporte, entonces por eso es mejor siempre

14
00:01:01,440 --> 00:01:06,990
la última versión que aparezca LTS recomendada para la mayoría de los usuarios.

15
00:01:07,290 --> 00:01:12,660
Vamos a descargar esta última versión LAS10 van a tener disponible una versión más actualizada.

16
00:01:12,720 --> 00:01:16,260
Esto va cambiando continuamente para trabajar con Angular.

17
00:01:16,350 --> 00:01:20,040
Es suficiente con la versión de Nott 8 o Superior 8 o 10.

18
00:01:20,130 --> 00:01:22,080
Ahora la 10 está perfecta.

19
00:01:22,240 --> 00:01:27,330
Entonces simplemente hacer un clic y la descarga comienza a descargar.

20
00:01:27,420 --> 00:01:30,660
Una vez que finaliza, doble clic es bastante simple.

21
00:01:30,690 --> 00:01:32,250
Siguiente, siguiente, siguiente.

22
00:01:32,310 --> 00:01:34,830
Es un Wizard y se instala de forma automática.

23
00:01:34,890 --> 00:01:35,760
Comencemos.

24
00:01:35,850 --> 00:01:37,560
Acá aparece la ventana de instalación.

25
00:01:37,620 --> 00:01:39,270
Hacemos clic en siguiente.

26
00:01:39,360 --> 00:01:40,500
Aceptamos licencia.

27
00:01:40,560 --> 00:01:41,280
Siguiente.

28
00:01:41,370 --> 00:01:42,180
Siguiente.

29
00:01:42,270 --> 00:01:42,990
Siguiente.

30
00:01:43,080 --> 00:01:44,910
Instalamos todo y siguiente.

31
00:01:45,030 --> 00:01:46,590
Para finalizar, instalamos.

32
00:01:49,970 --> 00:01:52,460
Cuando finaliza, hacemos clic en Finish.

33
00:01:52,580 --> 00:01:57,260
Estamos listos, ahora vamos a ir a la consola del terminal, tendremos que revisar la versión de NO.

34
00:01:57,350 --> 00:02:03,290
Y la versión del No рамках manage que nos permite gestionar y descargar nuestras dependencias o paquetes

35
00:02:03,410 --> 00:02:07,200
JavaScript con no menos recortÃ.

36
00:02:07,250 --> 00:02:10,310
Pero vamos a la versión y tenemos instalada la 10.13.

37
00:02:10,430 --> 00:02:17,960
Ahora vamos a revisar la versión de npm npm menos B de versión y tenemos la Sait 4.1.

38
00:02:18,050 --> 00:02:18,620
Perfecto.

39
00:02:18,740 --> 00:02:24,050
Continuamos instalando TypeScript a pesar de que cuando creamos un proyecto con Angular con Angular,

40
00:02:24,050 --> 00:02:28,250
si el hoy se incluye, esta descrip va a agregar e instalar TypeScript de forma automática.

41
00:02:28,280 --> 00:02:33,050
Por lo tanto, en teoría no sería necesario tener que instalar TypeScript en nuestra máquina de forma

42
00:02:33,050 --> 00:02:38,960
global, pero se recomienda ya que nos ayuda a detectar todos los errores en tiempo de escritura.

43
00:02:39,020 --> 00:02:43,670
Cuando estemos escribiendo el código en el editor, nos va marcando y nos va indicando los errores de

44
00:02:43,670 --> 00:02:44,150
sintaxis.

45
00:02:44,270 --> 00:02:49,550
Entonces, por eso es importante instalar de forma global independiente, que después se incluya en

46
00:02:49,550 --> 00:02:50,360
el proyecto de Angular.

47
00:02:50,390 --> 00:02:51,980
Pero bien, qué es lo que está escrito?

48
00:02:52,130 --> 00:02:56,030
Es fundamental porque es el lenguaje con el cual se programa.

49
00:02:56,090 --> 00:02:57,860
Se escribe el código en Angular.

50
00:02:57,980 --> 00:03:04,580
Hablemos de Angular desde la versión 2 en adelante, la 4, las 5, las 6 y la última las 7.

51
00:03:04,640 --> 00:03:07,460
Y posteriormente van a seguir saliendo versiones la 8, la 9.

52
00:03:07,550 --> 00:03:10,550
En fin, cambian cada cierto tiempo, cada 6 meses.

53
00:03:10,640 --> 00:03:13,940
Independiente al número, a la versión angular es uno solo.

54
00:03:14,030 --> 00:03:15,020
Es el mismo framework.

55
00:03:15,080 --> 00:03:20,930
Cuando cambia de una versión a otra es para dar mejoras, solucionar bugs, optimizar el código interno

56
00:03:20,930 --> 00:03:23,930
del framework, el core, agregar nuevas funcionalidades.

57
00:03:23,960 --> 00:03:27,560
Pero en ningún caso vamos a tener problemas con nuestro código.

58
00:03:27,650 --> 00:03:29,510
Nuestro código sigue intacto.

59
00:03:29,630 --> 00:03:35,000
Todas nuestras clases TypeScript que tengamos en el proyecto, nuestros component de Angular, los pipe,

60
00:03:35,090 --> 00:03:40,970
los servis, todo ese código de desarrollo va a seguir funcionando independiente a la versión de Angular

61
00:03:41,090 --> 00:03:43,460
es la 4, la 5, la 6 o la 7.

62
00:03:43,550 --> 00:03:48,060
Ahora bien, cambiando el tema sobre el lenguaje, este script está basado en JavaScript.

63
00:03:48,110 --> 00:03:53,200
Es un super conjunto de todas las evoluciones que ha tenido JavaScript, por ejemplo, es la que más

64
00:03:53,210 --> 00:03:59,180
Crips 5, que básicamente es el script que conocemos todos y que se ejecuta en todos los navegadores.

65
00:03:59,240 --> 00:04:05,300
Es el JavaScript estándar, pero también tenemos el script 6 o 2015. Como le queramos llamar.

66
00:04:05,330 --> 00:04:10,680
Esta inscrip agrupa es un super conjunto que incluye las diferentes variantes del JavaScript.

67
00:04:10,730 --> 00:04:18,470
Es una evolución mucho más orientado objetos mucho más robusto es una capa por sobre los lenguajes JavaScript

68
00:04:18,500 --> 00:04:22,610
como característica es fuertemente tipado es un tipado estático.

69
00:04:22,700 --> 00:04:24,980
Visibilidad en los atributos de la clase.

70
00:04:25,040 --> 00:04:31,460
Por ejemplo public protected private podemos trabajar con clases, con herencia, con interfaces, clases

71
00:04:31,460 --> 00:04:32,150
abstracta.

72
00:04:32,240 --> 00:04:32,570
En fin.

73
00:04:32,660 --> 00:04:38,720
Incluye todas las características importantes de la programación orientado e desarrollado por Microsoft.

74
00:04:38,720 --> 00:04:43,550
Por lo tanto trae muchas cosas del lenguaje se echarpe propio de Microsoft.

75
00:04:43,580 --> 00:04:45,890
Todo el modelo orientado objeto es muy similar.

76
00:04:45,920 --> 00:04:52,070
Toman el lenguaje JavaScript eleg ma escribi6, hacen un super conjunto pero mejorado, lo hacen más

77
00:04:52,070 --> 00:04:56,240
robusto y con una programación orientada a objetos mucho más poderosa.

78
00:04:56,370 --> 00:04:58,130
Bien, vamos a la instalación para instalar.

79
00:04:58,190 --> 00:05:03,770
Nos vamos a download y acá tenemos el comando para instalar este paquete.

80
00:05:03,830 --> 00:05:07,360
Si se fijan es un npm, un not package manager.

81
00:05:07,610 --> 00:05:10,460
Por eso importante también no para instalar estos paquete.

82
00:05:10,580 --> 00:05:15,560
Y como nota importante acá incluye un Benoni significa global.

83
00:05:15,650 --> 00:05:18,320
Lo vamos a instalar de forma global en nuestro equipo.

84
00:05:18,380 --> 00:05:21,530
Por lo tanto, tenemos que tener permiso de administrador.

85
00:05:21,620 --> 00:05:27,170
Si estamos trabajando en Windows, simplemente vamos a abrir nuestro terminal, el Power PowerShell

86
00:05:27,260 --> 00:05:30,920
o el Command Prompt con permiso de administrador con click derecho.

87
00:05:31,010 --> 00:05:32,000
Hay diferentes formas.

88
00:05:32,030 --> 00:05:39,440
Por ejemplo, hacemos un clic derecho sobre el icono Start de Windows y seleccionamos Window PowerShell

89
00:05:39,550 --> 00:05:40,310
Administrador.

90
00:05:40,400 --> 00:05:43,310
Es importante que sea administrador y hacemos un clic.

91
00:05:43,400 --> 00:05:44,510
Eso sería una forma.

92
00:05:44,630 --> 00:05:48,170
Otra forma es ir a buscar en la lupa.

93
00:05:48,290 --> 00:05:55,460
Escribimos CMD y en símbolos sistema hacemos un clic derecho y ejecutar como administrador.

94
00:05:56,210 --> 00:05:58,340
Entonces vamos a copiar este comando.

95
00:05:58,670 --> 00:06:01,640
Vamos a ir a la consola como administrador.

96
00:06:01,670 --> 00:06:06,530
Si se fijan, acá lo tenemos como administrador acá arriba y vamos a pegar.

97
00:06:06,770 --> 00:06:15,200
Si somos usuarios de Linux o Mackintosh o SX tenemos que agregar sudo por ejemplo sudo npm install me

98
00:06:15,200 --> 00:06:21,530
enojé Tai-Chi sudo para instalar con permisos de administrador en linux y en o ezek una vez que apretar

99
00:06:21,530 --> 00:06:24,590
enter va a pedir el password y se instala bien.

100
00:06:24,620 --> 00:06:30,530
Pero como estamos en windows vamos a quitar el sudo y se instala simplemente en la consola como administrador.

101
00:06:31,070 --> 00:06:31,580
Enter.

102
00:06:33,430 --> 00:06:38,320
Una vez que finaliza, instala, instálate script y acá aparece la versión, probablemente van a tener

103
00:06:38,320 --> 00:06:41,950
una versión más actualizada, pero con esta versión o superior está perfecto.

104
00:06:42,010 --> 00:06:47,410
Vamos a probar la instalación con CSS detalle script menos recortà de versión.

105
00:06:47,770 --> 00:06:50,470
Y acá también aparece la 3.o 1.4.

106
00:06:50,590 --> 00:06:53,200
El siguiente paso es instalar Angular.

107
00:06:53,260 --> 00:06:59,290
Si elige la consola al terminal, el gestor de Angular para crear nuestros proyectos angula y no solamente

108
00:06:59,290 --> 00:07:03,420
el proyecto, sino también para crear clases, componentes, servicios.

109
00:07:03,880 --> 00:07:07,570
En fin, un montón de cosas relacionadas a nuestro proyecto con Angular.

110
00:07:07,600 --> 00:07:14,020
Para comenzar, vamos a ir a que el starter como prerrequisito necesitamos no 10.

111
00:07:14,080 --> 00:07:15,940
Y el componente npm.

112
00:07:16,030 --> 00:07:21,190
El paquete Manage, tal como había explicado, requiere una versión 8 o 10.

113
00:07:21,610 --> 00:07:25,400
Ya probamos la versión y tenemos que instalar ahora Angular.

114
00:07:25,510 --> 00:07:28,390
Si ella es la consola, el gestor, entonces también.

115
00:07:28,450 --> 00:07:30,580
Si se fijan, incluye el menaje.

116
00:07:30,670 --> 00:07:33,040
Lo tenemos que instalar de forma global en nuestra máquina.

117
00:07:33,100 --> 00:07:39,970
Con permiso de administrador es Linux o making touch con sudo y en Windows con click derecho y ejecutar

118
00:07:39,970 --> 00:07:40,990
como administrador.

119
00:07:41,920 --> 00:07:44,830
Vamos a copiar, pegamos en el terminal y ejecutamos.

120
00:07:44,980 --> 00:07:46,470
Esto se puede demorar un poco más.

121
00:07:51,050 --> 00:07:53,090
Perfecto, instaló sin ningún problema.

122
00:07:53,180 --> 00:07:58,310
Acá aparece un par de warning, pero en Windows no es ningún problema, ya que es una dependencia opcional

123
00:07:58,370 --> 00:08:02,390
que solamente tiene soporte en la plataforma Machine Touch en Windows.

124
00:08:02,480 --> 00:08:04,290
Esta dependencia no la tenemos.

125
00:08:04,370 --> 00:08:09,140
Entonces por eso de ser guarni solamente disponible en Mackintosh se instalo correctamente.

126
00:08:09,230 --> 00:08:11,420
Tenemos la versión 7, la última versión.

127
00:08:11,510 --> 00:08:14,600
Íbamos a probar la instalación con MJI versión.

128
00:08:16,310 --> 00:08:25,550
De angulas y elit 7.0 No.3 NOF 10.13 y acá están todos los componentes de desarrollo específicos, entre

129
00:08:25,550 --> 00:08:26,740
ellos que tenemos ta descrip.

130
00:08:26,840 --> 00:08:32,070
También tenemos reactive extensión de JavaScript para trabajar con flujos reactivos.

131
00:08:32,090 --> 00:08:38,120
Cosas que vamos a ver en el curso y una vez que ya tenemos instalado el angular Clyde no permite crear

132
00:08:38,120 --> 00:08:43,640
proyectos de Angular con el comando Ending New, el nombre proyecto, cosa que vamos a ver después en

133
00:08:43,640 --> 00:08:45,140
las próximas clases en detalle.

134
00:08:45,200 --> 00:08:47,270
Por ahora solamente lo voy a mencionar.

135
00:08:47,330 --> 00:08:52,670
También tenemos para levantar el servidor nuestra aplicación para hacer un tipo play y un montón de

136
00:08:52,670 --> 00:08:53,060
comandos.

137
00:08:53,090 --> 00:08:57,590
Por ejemplo, si nos vamos hacia el hoy commands lo más importante.

138
00:08:57,620 --> 00:09:03,620
Por ejemplo, para agregar o instalar un package, un paquete para generar una clase, un componente

139
00:09:03,620 --> 00:09:08,690
de angular, una clase servis, un pipe, cualquier estructura, cualquier clase de nuestro proyecto

140
00:09:08,690 --> 00:09:14,510
con Angular Ziel que la ayuda new para crear un nuevo proyecto ser para levantar nuestra aplicación

141
00:09:14,600 --> 00:09:21,380
ADAT para actualizar nuestra versión de angular del proyecto en diversión para ver la versión en fin

142
00:09:21,470 --> 00:09:26,870
endi build para construir para generar nuestro proyecto compilar nuestro proyecto.

143
00:09:26,960 --> 00:09:32,180
Recordemos que Angular utiliza lenguaje script para desarrollar para escribir nuestro código.

144
00:09:32,240 --> 00:09:34,310
Pero no es interpretado en los navegadores.

145
00:09:34,340 --> 00:09:41,000
Por lo tanto tenemos que tras pilar el tag script en código JavaScript nativo estándar que lo entiendan

146
00:09:41,060 --> 00:09:43,640
y que lo puedan interpretar los navegadores.

147
00:09:43,700 --> 00:09:49,130
Para eso utilizamos herramientas que ya se incluye dentro de Angular como Babes es un transportador

148
00:09:49,190 --> 00:09:53,730
que básicamente compila, transforma, convierte nuestro toit script en JavaScript.

149
00:09:53,960 --> 00:09:59,060
La siguiente herramienta, que es opcional pero muy recomendada, es que instalen el navegador Krom,

150
00:09:59,150 --> 00:10:03,440
ya que trae una poderosa herramienta de desarrollo que nos permite ver los errores que vaya a ocurrir

151
00:10:03,470 --> 00:10:04,490
por el lado de Angular.

152
00:10:04,520 --> 00:10:06,860
Por ejemplo, si habilitamos la consola.

153
00:10:07,820 --> 00:10:11,750
Nos vamos al menú Mord Tools, seleccionamos Developer Turs.

154
00:10:13,220 --> 00:10:18,620
Acá tenemos varias herramientas, entre ellas la consola, que es muy importante para visualizar todos

155
00:10:18,620 --> 00:10:21,460
los errores que puedan ocurrir y también para el log.

156
00:10:21,860 --> 00:10:25,910
Inspeccionar elementos HTML y un montón de cosas más.

157
00:10:25,940 --> 00:10:32,420
Por ejemplo, si nos vamos a aplicar schön, acá tenemos el local Storage, el en storage y varias herramientas

158
00:10:32,420 --> 00:10:35,120
para trabajar con nuestros datos, con el caché.

159
00:10:35,240 --> 00:10:35,550
En fin.

160
00:10:35,660 --> 00:10:37,550
Y para finalizar, tenemos el editor.

161
00:10:37,610 --> 00:10:39,470
Vamos a utilizar Atton en el curso.

162
00:10:39,560 --> 00:10:43,880
Es uno de los más robustos y utilizados para trabajar con Angular y no solamente con Angular, sino

163
00:10:43,880 --> 00:10:47,390
con cualquier framework de cliente del lado JavaScript.

164
00:10:47,510 --> 00:10:52,640
Además que incluye un montón de páginas que podemos descargar para traja con Busta, para traja con

165
00:10:52,640 --> 00:10:53,150
Angular.

166
00:10:53,240 --> 00:10:55,580
En fin, un montón de cosas muy poderoso.

167
00:10:55,700 --> 00:11:00,560
Este editor y también tenemos otro editor que es excelente, que muy bueno, que está a la par con Atom,

168
00:11:00,590 --> 00:11:02,510
que es Visu Alcott, que es de Miklos.

169
00:11:02,600 --> 00:11:04,910
También es otra excelente alternativa.

170
00:11:04,970 --> 00:11:07,850
Pero en el curso vamos a ver y vamos a trabajar con autos.

171
00:11:07,880 --> 00:11:12,680
Pero si ya conocen Biso Alcott y están acostumbrados a trabajar con él, lo pueden utilizar sin ningún

172
00:11:12,680 --> 00:11:13,010
problema.

173
00:11:13,460 --> 00:11:15,320
Y la instalación sería muy simple.

174
00:11:15,410 --> 00:11:19,070
Lo descargan y automáticamente con doble clic se instala solo.

175
00:11:19,190 --> 00:11:20,120
No hay que hacer nada.

176
00:11:20,210 --> 00:11:21,140
Acá lo tenemos.

177
00:11:21,200 --> 00:11:23,300
Pero por ahora hemos llegado a su fin.

178
00:11:23,360 --> 00:11:24,050
Nada más.

179
00:11:24,140 --> 00:11:25,040
Y la próxima clase?

180
00:11:25,040 --> 00:11:31,700
Continuamos revisando un poco más en detalle el auto, instalando algunos рамках algunos plugins necesarios

181
00:11:31,700 --> 00:11:35,010
para el curso, como por ejemplo para Angular para traja combustible.

182
00:11:35,150 --> 00:11:36,170
En fin, nada más.

183
00:11:36,230 --> 00:11:36,950
Nos vemos.