1
00:00:00,150 --> 00:00:01,890
Ahora sí que estamos listos para comenzar.

2
00:00:01,920 --> 00:00:07,170
Para crear nuestra aplicación con Angular desde cero, utilizando Angular Ziel.

3
00:00:07,380 --> 00:00:11,370
Lo primero es ir a la página angular Punto y o por ejemplo nos vamos.

4
00:00:11,430 --> 00:00:13,590
Hay que started y algo.

5
00:00:13,590 --> 00:00:20,340
Vimos la clase anterior que podemos crear un proyecto con el comando en new y el nombre del proyecto.

6
00:00:20,430 --> 00:00:27,450
Por ejemplo, en New Clientes APP, el comando en GI propio de la consola de Angular lo tenemos disponible

7
00:00:27,630 --> 00:00:29,250
con la instalación de Angular.

8
00:00:29,310 --> 00:00:34,920
Si ella la realizamos la clase anterior, ahora simplemente vamos al terminal de nuestro sistema operativo

9
00:00:35,010 --> 00:00:36,490
y vamos a crear el proyecto.

10
00:00:36,540 --> 00:00:42,510
Pero primero tenemos que crear un directorio en el cual vamos a guardar todos nuestros ejemplos y proyectos

11
00:00:42,570 --> 00:00:43,320
del curso.

12
00:00:43,350 --> 00:00:49,170
Todos los archivos relacional, cursos, por ejemplo, le podríamos llamar sprint o angula como queramos,

13
00:00:49,210 --> 00:00:56,010
pero la idea es que sea un nombre simple, sin caracteres especiales, sin acento, sin eñes, sin espacio,

14
00:00:56,010 --> 00:00:56,550
sin nada.

15
00:00:56,640 --> 00:01:02,250
Sea lo más simple posible y así evitar cualquier dolor de cabeza que tengamos al ejecutar nuestras aplicaciones,

16
00:01:02,250 --> 00:01:03,900
ya sea con sprint o con Angular.

17
00:01:05,720 --> 00:01:09,510
Bien, en mi caso lo tengo en la raíz del disco Spring 5.

18
00:01:09,630 --> 00:01:12,240
Ese es el nombre del directorio principal.

19
00:01:12,480 --> 00:01:13,310
Acá lo tenemos.

20
00:01:13,380 --> 00:01:16,620
Y dentro de este directorio voy a crear el de Angular.

21
00:01:19,800 --> 00:01:21,690
Ahí tenemos nuestro directorio raíz de angula.

22
00:01:21,780 --> 00:01:26,520
Entonces todos los proyectos relacionados con Spring 5 lo vamos a dejar en el directorio principal.

23
00:01:26,610 --> 00:01:29,220
Spring 5 y todo lo relacionado con Angular.

24
00:01:29,310 --> 00:01:30,900
Lo dejamos en este directorio.

25
00:01:30,960 --> 00:01:32,820
Pero en realidad pueden usar como quieran.

26
00:01:32,910 --> 00:01:38,230
Si quieren, pueden dejar 2 directorio en paralelo o uno dentro del otro como te acomode.

27
00:01:38,340 --> 00:01:42,860
Entonces dentro de Angular vamos a crear con MJI New el proyecto.

28
00:01:42,960 --> 00:01:47,790
Le vamos a llamar clientes guión a Pepe y.

29
00:01:48,840 --> 00:01:54,900
Lo primero que pregunta es si queremos agregar en nuestra aplicación con Angular el componente routing.

30
00:01:54,990 --> 00:01:58,860
Le colocamos que no porque eso después lo vamos a agregar de forma manual.

31
00:01:58,920 --> 00:02:02,340
La idea es aprender cómo se configura, así que lo dejamos para después.

32
00:02:02,370 --> 00:02:04,110
Por ahora simplemente no.

33
00:02:04,260 --> 00:02:07,140
La segunda pregunta es qué tipo de estilos?

34
00:02:07,170 --> 00:02:10,020
Qué formato de estilos vamos a querer utilizar?

35
00:02:10,050 --> 00:02:16,350
Por defecto vamos a usar CSS es más que suficiente y aceptamos simplemente con un ENTER seleccionamos

36
00:02:16,370 --> 00:02:17,190
CSS.

37
00:02:17,280 --> 00:02:22,780
De hecho está marcado por defecto y ENTER ahí crea el proyecto, va a descargar toda la dependencia.

38
00:02:22,800 --> 00:02:28,590
Por lo tanto, se puede demorar un buen rato acá realiza todas las carga de todas las librerías dependencias

39
00:02:28,590 --> 00:02:35,280
de Angular Angular Core para desarrollar el lenguaje de script ambiento el API Reactive Stations de

40
00:02:35,280 --> 00:02:39,330
JavaScript para trabajar con flujos con strings reactivos.

41
00:02:39,420 --> 00:02:40,770
En fin, un montón de cosas.

42
00:02:50,820 --> 00:02:51,390
Perfecto.

43
00:02:51,480 --> 00:02:55,230
Una vez que haya finalizado en Windows pueden aparecer un par de warnings.

44
00:02:55,320 --> 00:02:58,060
Acá tenemos lo mismo que cuando escalamos Angular.

45
00:02:58,080 --> 00:03:04,560
Si el hoy se debe a que Windows no tiene soporte a esta librería, pero si en Mackintosh en Obsequie

46
00:03:04,950 --> 00:03:09,630
llega, tenemos otro warning también típico de Windows que no hay que dar ninguna importancia.

47
00:03:09,720 --> 00:03:11,160
Es algo propio de Windows.

48
00:03:11,220 --> 00:03:16,470
De hecho, en otro sistema operativo como el Linux o Imaging Touch, esto no ocurre, no aparecen.

49
00:03:16,500 --> 00:03:22,050
Pero bien, una vez que se haya creado con éxito, el siguiente paso es abrir con Atom, como ya lo

50
00:03:22,050 --> 00:03:23,700
tenemos instalado con todos los plugins.

51
00:03:23,790 --> 00:03:26,640
Ahora simplemente vamos a abrir nuestro proyecto.

52
00:03:28,880 --> 00:03:30,590
Hacemos clic en Open Project.

53
00:03:32,850 --> 00:03:36,030
Vamos a buscar nuestro proyecto en la ubicación que le dimos.

54
00:03:36,090 --> 00:03:42,480
Spring 5 Angular Seleccionamos Cliente App y seleccionar carpeta y acá lo tenemos.

55
00:03:42,600 --> 00:03:44,520
Vamos a cerrar la ventana de Wacom.

56
00:03:44,610 --> 00:03:46,980
También la guía y listo.

57
00:03:47,100 --> 00:03:51,000
En la pestaña izquierda tenemos el proyecto con todos sus archivos.

58
00:03:51,090 --> 00:03:54,960
Si se fijan, aparece un icono distinto por cada tipo de archivo.

59
00:03:55,050 --> 00:03:58,140
Eso es porque instalamos el Plains, el Field.

60
00:03:58,680 --> 00:04:01,770
Si nos vamos a la carpeta SRC es el más importante.

61
00:04:01,830 --> 00:04:03,300
Acá tenemos nuestra aplicación.

62
00:04:03,330 --> 00:04:05,670
Todo nuestro código dentro de APP.

63
00:04:06,000 --> 00:04:08,430
Acá tenemos nuestro componente principal.

64
00:04:08,520 --> 00:04:13,350
Ahora vamos a ejecutar nuestra aplicación utilizando el comando en jefe CER.

65
00:04:13,500 --> 00:04:18,780
Nos vamos a la consola y dentro del directorio de Angular, donde tenemos creado nuestro proyecto,

66
00:04:21,390 --> 00:04:26,040
nos vamos a clientes app y levantamos con el comando en sí.

67
00:04:26,850 --> 00:04:34,410
Ser menos, menos open, menos menos open es para abrir en el navegador o pueden utilizar el atajo menos

68
00:04:34,500 --> 00:04:37,620
o cualquiera de los dos menos o menos menos open.

69
00:04:37,740 --> 00:04:43,230
Muy parecido a Spring Boot, que incluye embebido un servidor para desplegar nuestra aplicación acá

70
00:04:43,230 --> 00:04:44,050
también angular.

71
00:04:44,100 --> 00:04:47,850
También incluye su propio servidor para levantar nuestra aplicación.

72
00:04:47,940 --> 00:04:50,040
Vamos a levantar entonces con un enter.

73
00:04:54,750 --> 00:04:58,230
Y acá lo tenemos y acá tenemos nuestra página de bienvenida.

74
00:04:58,320 --> 00:05:03,810
Un prototipo por defecto que prácticamente podemos quitar, eliminar todo lo que aparece y reemplazarlo

75
00:05:03,810 --> 00:05:05,100
por nuestro propio contenido.

76
00:05:05,220 --> 00:05:07,070
Ahora este servidor en Disher.

77
00:05:07,140 --> 00:05:08,580
Por supuesto que es para desarrollar.

78
00:05:08,670 --> 00:05:11,250
No es para un ambiente de producción.

79
00:05:11,310 --> 00:05:17,370
Cuando llevamos nuestra aplicación a producción, lo que hacemos es transpirar, convertir todo nuestro

80
00:05:17,580 --> 00:05:25,050
script en JavaScript en código estático HTML y JavaScript puro que es interpretado y lo entienden los

81
00:05:25,050 --> 00:05:25,590
navegadores.

82
00:05:25,680 --> 00:05:30,780
Y eso lo podemos llevar, lo podemos subir a cualquier servidor que pueda publicar este contenido estático,

83
00:05:30,840 --> 00:05:33,090
como por ejemplo Google Storage.

84
00:05:33,240 --> 00:05:35,730
O también tenemos Amazon S3.

85
00:05:35,820 --> 00:05:37,380
En fin, hay varias alternativas.

86
00:05:37,440 --> 00:05:42,960
De todas formas, el curso más adelante vamos a ver cómo llevar a producción y publicar nuestra aplicación.

87
00:05:43,050 --> 00:05:48,570
Incluso lo podríamos hacer con почти con el servidor que trae no 10, con Apache, con cualquiera,

88
00:05:48,660 --> 00:05:51,480
con cualquiera que pueda servir contenido estático.

89
00:05:51,540 --> 00:05:56,580
Básicamente llevas creep, HTML y hoja de estilos, ya que levantamos nuestra aplicación.

90
00:05:56,670 --> 00:05:59,730
El siguiente paso es modificar el contenido que tenemos.

91
00:05:59,790 --> 00:06:02,220
Lo que está cargando es el componente principal.

92
00:06:02,280 --> 00:06:03,600
El app component.

93
00:06:03,720 --> 00:06:07,140
Acá tenemos la clase componente y acá tenemos varias cosas.

94
00:06:07,170 --> 00:06:13,680
Pero antes de entrar en detalle, lo primero que observamos es que está asociada a un template a una

95
00:06:13,680 --> 00:06:14,850
vista HTML.

96
00:06:14,910 --> 00:06:20,130
Después vamos a analizar el decorador componen y todo lo demás, pero primero vámonos a la vista.

97
00:06:20,310 --> 00:06:22,170
Acá tenemos la vista a component.

98
00:06:22,470 --> 00:06:25,740
HTML y todo lo que se visualiza en el navegador.

99
00:06:26,340 --> 00:06:30,120
Acá es justamente el código HTML que tenemos en esta plantilla.

100
00:06:30,180 --> 00:06:32,040
Por lo tanto, vamos a quitar todo.

101
00:06:32,100 --> 00:06:35,760
Por ahora vamos a dejar solamente el H1, nada más.

102
00:06:36,960 --> 00:06:43,980
Todo lo demás lo vamos a quitar el world con también vamos a guardar con control S y volvemos al navegador.

103
00:06:44,160 --> 00:06:48,300
Observamos que aparece solamente clientes app el nombre de nuestra aplicación.

104
00:06:48,330 --> 00:06:48,810
Perfecto.

105
00:06:48,930 --> 00:06:56,490
Vamos a abrir nuevamente el app component con doble clic y como paréntesis aparte, cualquier sugerencia

106
00:06:56,580 --> 00:07:02,430
o pregunta para instalar algún tipo de plugins le colocan que sí, que instale todos los plugins necesarios,

107
00:07:02,430 --> 00:07:07,530
como por ejemplo lo más probable que te va a pedir instalar el Inter, que es necesario para detectar

108
00:07:07,530 --> 00:07:11,010
errores de sintaxis en nuestro código en tiempo de desarrollo.

109
00:07:11,070 --> 00:07:16,590
A medida que estás escribiendo nuestro código contain script, el LITER se encarga de evaluar los errores,

110
00:07:16,650 --> 00:07:21,540
detectarlos y mostrar cualquier mensaje de estos errores en el editor.

111
00:07:21,660 --> 00:07:26,070
Entonces, si nos pide instalar el Inter, lo tenemos que instalar de todas maneras.

112
00:07:26,190 --> 00:07:32,670
El Liter y todas sus dependencias y también John's o cualquier dependencia que necesite, simplemente

113
00:07:32,670 --> 00:07:38,280
le colocan que si bien, pero ahora analicemos el componente es un decorador, una anotación con cierta

114
00:07:38,280 --> 00:07:43,740
configuración metadata muy parecido a las anotaciones en Spring es para lo mismo para configurar.

115
00:07:43,740 --> 00:07:48,600
Por ejemplo, acá tenemos una clase a component que está marcada con el decorador.

116
00:07:48,600 --> 00:07:52,650
Compen es una clase componente de angular tiene un selector.

117
00:07:52,740 --> 00:07:55,590
El selector corresponde a una etiqueta HTML.

118
00:07:55,680 --> 00:07:59,190
Esta etiqueta HTML la podemos incluir en otros componentes.

119
00:07:59,280 --> 00:08:06,540
En este caso, como es el componente root o principal, la tenemos que incluir en el index html, que

120
00:08:06,540 --> 00:08:10,200
es la página principal en la puerta de entrada a nuestra aplicación.

121
00:08:10,320 --> 00:08:17,040
Si se fijan en el body, la estamos incluyendo simplemente una etiqueta HTML que contiene el nombre

122
00:08:17,130 --> 00:08:18,780
del selector app root.

123
00:08:20,220 --> 00:08:25,500
Por lo tanto, si colocamos cualquier cosa, cualquier nombre que queramos acá tenemos que reflejar

124
00:08:25,590 --> 00:08:28,080
ese mismo nombre y acá se incluye.

125
00:08:28,170 --> 00:08:34,830
Estamos viviendo todo el contenido de este componente, todo el HTML que tiene y toda la programación

126
00:08:34,830 --> 00:08:38,610
dinámica dentro de la clase, con toda la lógica que le queramos dar.

127
00:08:38,970 --> 00:08:45,480
Lo segundo es el temple o RL en la vista contenido HTML que está asociado a esta clase component.

128
00:08:45,540 --> 00:08:49,410
Luego tenemos estilos o RL serían nuestras hoja de estilos.

129
00:08:49,440 --> 00:08:51,030
Podríamos tener una o más.

130
00:08:51,060 --> 00:08:57,090
Por eso el corchete se separa por comas por defecto una sola que es la que tenemos acá ab component

131
00:08:57,210 --> 00:08:58,470
puntos es acá.

132
00:08:58,500 --> 00:09:04,740
Podemos tener solamente los estilos de este componente sin afectar a los demás componentes que tengamos

133
00:09:04,830 --> 00:09:05,730
en nuestra aplicación.

134
00:09:05,760 --> 00:09:09,570
Solo hacen efecto en el propio componente y no en los demás.

135
00:09:09,600 --> 00:09:15,090
Después vamos a ver cómo aplicar estilos de forma global a todos nuestros componentes, por ejemplo,

136
00:09:15,180 --> 00:09:18,510
agregándose estilos en Styles, CSS.

137
00:09:18,600 --> 00:09:24,000
Acá en Stills cualquier estilo que coloquemos se va a aplicar a toda nuestra aplicación, a toda nuestra

138
00:09:24,000 --> 00:09:25,530
página y a todo el componente.

139
00:09:25,620 --> 00:09:32,550
Para resumir a component sería nuestro componente principal o por defecto raíz se tiene que dejar tal

140
00:09:32,550 --> 00:09:39,150
cual y a partir de este componente podemos incluir agregar otro componente y empezamos a crear y armar

141
00:09:39,150 --> 00:09:39,940
nuestra aplicación.

142
00:09:40,020 --> 00:09:44,790
Un componente de Angular son piezas de código que van a componer nuestra aplicación.

143
00:09:44,880 --> 00:09:50,280
Un componente se pueden idear dentro de otro como un componente hijo o bien un componente padre.

144
00:09:50,340 --> 00:09:53,520
Podría estar formado por varios componentes hijos.

145
00:09:53,870 --> 00:09:59,960
Se le conoce como el patrón de diseño composites o compositor por debajo implementa este patrón de diseño.

146
00:10:00,030 --> 00:10:04,190
Eso es lo que lo hace bastante modular, escalable y también fácil de mantener.

147
00:10:04,250 --> 00:10:07,310
Por ahora vamos a modificar un poco más nuestra clase.

148
00:10:07,400 --> 00:10:10,250
Acá vamos a colocar Bienvenido Angular

149
00:10:13,700 --> 00:10:18,440
y también podríamos tener más atributos de la clase componente, por ejemplo, curso.

150
00:10:19,760 --> 00:10:22,950
Podemos usar comillas simple para hacer referencia a un string.

151
00:10:23,120 --> 00:10:26,630
Como recomendación, aunque no es obligación el punto y coma final.

152
00:10:26,690 --> 00:10:31,340
Ahora, como buena práctica se recomienda colocar entonces el curso sería.

153
00:10:34,410 --> 00:10:35,940
Con Angular 7.

154
00:10:36,090 --> 00:10:40,590
Como había mencionado, también una de las características que maneja este script es el tipado.

155
00:10:40,620 --> 00:10:41,880
Si bien es opcional.

156
00:10:41,940 --> 00:10:46,660
Por ejemplo, acá asume que es un string porque le estamos asignando un valor del tipo string.

157
00:10:46,740 --> 00:10:49,080
Pero también lo podríamos dejar de forma estática.

158
00:10:49,110 --> 00:10:53,640
Por ejemplo, 2 punto 2 punto es string es opcional.

159
00:10:53,670 --> 00:10:56,010
Pero también es buena práctica definir los tipos.

160
00:10:56,100 --> 00:10:57,600
Lo hacemos un poco más robusto

161
00:11:00,960 --> 00:11:01,680
en los strings.

162
00:11:01,710 --> 00:11:04,650
También podemos usar comilla doble o comillas simple.

163
00:11:04,740 --> 00:11:08,910
Bueno, en realidad a gusto de cada uno se ve más limpio utilizar comillas simple.

164
00:11:08,970 --> 00:11:14,100
Así que durante el curso vamos a tratar los strings con comillas simples, pero no es tan relevante.

165
00:11:16,020 --> 00:11:16,590
Perfecto.

166
00:11:16,680 --> 00:11:18,900
Vamos a guardar con control s.

167
00:11:19,140 --> 00:11:21,240
Vamos a ir a la vista a component.

168
00:11:21,360 --> 00:11:22,950
Acá tenemos el título.

169
00:11:23,580 --> 00:11:25,950
Vamos a tener una lista u alhelí

170
00:11:29,070 --> 00:11:30,030
en el primer lím.

171
00:11:30,120 --> 00:11:35,880
Vamos a colocar el nombre del curso siempre usando doble llaves para interpolar las variables.

172
00:11:35,970 --> 00:11:37,500
Interpolar es para que se imprima.

173
00:11:37,530 --> 00:11:39,560
Se imprima la variable en la salida.

174
00:11:39,570 --> 00:11:44,160
En la respuesta en el navegador simplemente hacemos referencia al nombre del atributo.

175
00:11:44,160 --> 00:11:46,020
En este caso curso después.

176
00:11:46,020 --> 00:11:46,560
Pro-fesor.

177
00:11:48,830 --> 00:11:49,970
Vamos a copiaré li.

178
00:11:54,860 --> 00:12:00,060
Y guardamos entonces siempre las variables que vamos a imprimir es con doble llave.

179
00:12:00,630 --> 00:12:03,690
Una vez que guardamos, volvemos al navegador y vemos el cambio.

180
00:12:03,750 --> 00:12:04,800
Bienvenido Angular.

181
00:12:04,830 --> 00:12:07,290
Curso Spring 5 con Angular 7.

182
00:12:07,350 --> 00:12:10,290
Profesor Andres Guzman por ahora nada mas.

183
00:12:10,410 --> 00:12:16,050
Y en la próxima clase vamos a estudiar, analizar la estructura de directorio y explicar un poco en

184
00:12:16,050 --> 00:12:20,510
qué consiste cada componente, cada tipo de archivo, cada directorio.

185
00:12:20,520 --> 00:12:27,330
Por ejemplo, en módulos la carpeta es RCE, la carpeta app, los asset y también cada tipo de archivo,

186
00:12:27,360 --> 00:12:30,360
todos los archivos importante de nuestra aplicación.

187
00:12:30,480 --> 00:12:33,300
Y antes que me olvide, un pequeño detalle es opcional.

188
00:12:33,360 --> 00:12:39,600
Si nos vamos a la clase a component se me fue justamente el punto y coma como no lo marca como un error,

189
00:12:39,630 --> 00:12:42,600
porque en realidad no es un error, simplemente es opcional.

190
00:12:42,660 --> 00:12:48,510
Es recomendable como buena práctica para mantener un orden y nuestro código sea un poco más estricto.

191
00:12:48,630 --> 00:12:54,180
Entonces agregamos el punto y coma en el profesor, pero insisto, es opcional y nuestra aplicación

192
00:12:54,180 --> 00:12:55,950
va a funcionar exactamente igual.

193
00:12:56,280 --> 00:12:57,480
Y volvemos a guardar.

194
00:12:58,200 --> 00:12:59,280
Hemos llegado a su fin.

195
00:12:59,370 --> 00:13:00,380
Hasta la próxima.