1
00:00:00,210 --> 00:00:00,930
Bienvenidos.

2
00:00:01,020 --> 00:00:06,150
Hoy vamos a ver la estructura de directorio del proyecto que generamos con la consola de Angular con

3
00:00:06,150 --> 00:00:06,570
Angular.

4
00:00:06,570 --> 00:00:10,650
Si elige vamos a comenzar desde el principio con el directorio y TUI.

5
00:00:10,830 --> 00:00:15,510
Básicamente contiene todas las herramientas necesarias para realizar pruebas unitarias.

6
00:00:15,540 --> 00:00:20,850
Todo lo que es testing es un mundo bastante amplio y creo que este curso está más enfocado en Spring

7
00:00:20,910 --> 00:00:22,350
y en la integración con Angular.

8
00:00:22,380 --> 00:00:27,690
Por lo tanto, abarcar este tema se rasca un poco del contexto del curso y lo vamos a dejar para un

9
00:00:27,690 --> 00:00:30,930
próximo curso que sea específicamente de Angular.

10
00:00:31,010 --> 00:00:36,510
Ahí tiene mucho más sentido, pero es bueno saber que este directorio contiene todo lo necesario para

11
00:00:36,510 --> 00:00:37,830
realizar nuestras pruebas.

12
00:00:38,280 --> 00:00:41,010
Bien, el siguiente directorio es el not mudables.

13
00:00:41,100 --> 00:00:47,760
Acá están todas las librerías y dependencias del proyecto, como por ejemplo todo lo relacionado a dependencias

14
00:00:47,760 --> 00:00:48,240
de Angular.

15
00:00:48,330 --> 00:00:50,490
Detalle script reactive estrechos.

16
00:00:50,550 --> 00:00:51,270
Acá está todo.

17
00:00:51,360 --> 00:00:52,980
No tenemos que tocar nada.

18
00:00:53,010 --> 00:00:57,870
Todo se maneja de forma automática a través del not tacas manager del npm.

19
00:00:57,930 --> 00:01:02,400
Y todo esto se maneja y se registra dentro del package punto Jasso.

20
00:01:02,460 --> 00:01:04,770
Acá están todas las dependencias.

21
00:01:04,830 --> 00:01:08,560
Muy parecido a lo que sería el pomme kml en Spring, en Java.

22
00:01:08,850 --> 00:01:10,590
Bien, luego tenemos ese REZEN.

23
00:01:10,710 --> 00:01:12,450
Una carpeta muy importante.

24
00:01:12,510 --> 00:01:13,950
Contiene todo nuestro código.

25
00:01:14,010 --> 00:01:19,680
Todo el código fuente de nuestra aplicación es bastante amplio, así que lo vamos a dejar para una clase

26
00:01:19,710 --> 00:01:22,140
completamente separada para la próxima clase.

27
00:01:22,200 --> 00:01:25,020
Luego tenemos el archivo editor config.

28
00:01:25,200 --> 00:01:30,780
En realidad no lo vamos a ocupar para nada en el curso, pero básicamente contiene toda la configuración

29
00:01:30,780 --> 00:01:31,310
del editor.

30
00:01:31,320 --> 00:01:37,740
Por ejemplo, el charse lent Tf8, el estilo de tabulación que es a través de espacios de la barra espacio,

31
00:01:37,830 --> 00:01:43,830
el tamaño de la tabulación con dos espacios, en fin, configuraciones que podemos modificar del editor.

32
00:01:43,950 --> 00:01:51,300
Luego tenemos el git inor es un archivo de jija del repositorio jija donde podemos subir nuestro proyecto

33
00:01:51,390 --> 00:01:58,050
y compartir este archivo nos permite omitir, ocultar, ignorar archivos y carpetas que no queramos

34
00:01:58,050 --> 00:02:04,800
compartir en el repositorio git, como por ejemplo la carpeta distribución dist que contiene todo el

35
00:02:04,800 --> 00:02:08,940
código compilado cuando generamos el proyecto con MJI build.

36
00:02:09,030 --> 00:02:11,820
Todo el JavaScript y contenido estático del proyecto.

37
00:02:11,910 --> 00:02:12,900
El directorio temp.

38
00:02:12,990 --> 00:02:14,820
El directorio salida de esta descri.

39
00:02:14,880 --> 00:02:16,620
Las dependencias not modules.

40
00:02:16,710 --> 00:02:20,790
No tiene ningún sentido compartir todas las librerías y dependencia del proyecto.

41
00:02:20,850 --> 00:02:27,270
Lo importante es el código fuente, nuestro propio código y así un montón de carpetas y archivos que

42
00:02:27,270 --> 00:02:27,930
podemos ocultar.

43
00:02:28,020 --> 00:02:32,040
Y también podemos agregar nuestro propio archivo, nuestro propio directorio.

44
00:02:32,070 --> 00:02:33,520
Pero no solamente sirve para git.

45
00:02:33,780 --> 00:02:40,230
También nos permite ocultar elementos, archivos, carpetas en el editor en auto, por ejemplo, si

46
00:02:40,230 --> 00:02:46,590
queremos ocultar Not modules, lo podemos hacer acá, pero para eso tenemos que activar esta configuración.

47
00:02:46,650 --> 00:02:52,380
Simplemente nos vamos a la configuración del IDE del editor con control y punto y coma.

48
00:02:52,500 --> 00:02:58,260
Nos vamos a package y acá tenemos que buscar el componente del menú que se llama Try View.

49
00:02:59,820 --> 00:03:00,850
Nos vamos a Settings.

50
00:03:01,110 --> 00:03:05,010
Por defecto aparece desactivado el joie BCS.

51
00:03:05,100 --> 00:03:06,030
Ignorad fails.

52
00:03:06,120 --> 00:03:12,870
Acá lo que hace es leer el archivo git inor y todas las reglas, todos los archivos y directorios que

53
00:03:12,870 --> 00:03:13,350
aparecen.

54
00:03:13,440 --> 00:03:18,360
Lo va a ocultar ahora si lo activo por supuesto que va a desaparecer el módulo.

55
00:03:19,350 --> 00:03:21,780
Se fijan ahí está activado y desaparece.

56
00:03:22,380 --> 00:03:25,320
Lo dejamos desactivado y vuelve a aparecer.

57
00:03:27,490 --> 00:03:33,850
Eso sería una forma de ocultar, de ocultar elementos, otra forma lo voy a dejar desactivado.

58
00:03:33,970 --> 00:03:39,520
Sería utilizando el joie, ignorad names, ocultar nombres que queremos ignorar.

59
00:03:39,550 --> 00:03:44,590
Pero para eso tenemos que ir a la configuración del Kor aka Buscar y no Redmayne.

60
00:03:44,650 --> 00:03:45,550
Por acá lo tenemos.

61
00:03:45,940 --> 00:03:47,080
Ignorad names.

62
00:03:47,230 --> 00:03:50,860
Acá están todos los archivos directorios que están ocultos.

63
00:03:50,890 --> 00:03:57,640
Podemos agregar con una coma el not modules perfecto y ahí lo oculta de forma automática.

64
00:03:57,760 --> 00:03:59,800
Entonces tenemos esas dos alternativas.

65
00:03:59,830 --> 00:04:05,870
Cualquiera de las dos da lo mismo, ya sea con Ignore Main o bien con el archivo git ignore.

66
00:04:05,980 --> 00:04:08,320
Incluso lo podría ver con los dos, los dos activos.

67
00:04:08,350 --> 00:04:09,520
Pero en fin, da lo mismo.

68
00:04:09,640 --> 00:04:13,480
Vamos a dejar oculto el not modules, la idea de ocultar la dependencia.

69
00:04:13,540 --> 00:04:15,730
No es necesario que la tengamos en el editor.

70
00:04:15,790 --> 00:04:16,600
Bien, continuemos.

71
00:04:16,690 --> 00:04:17,350
Angular.

72
00:04:17,410 --> 00:04:18,130
Punto, Yeison.

73
00:04:20,900 --> 00:04:23,420
Es el archivo principal de configuración del proyecto.

74
00:04:23,510 --> 00:04:27,020
Es el más importante, acá podemos configurar prácticamente todo.

75
00:04:27,230 --> 00:04:33,310
Bueno, para comenzar aparece en Proyectes el nombre del proyecto como un atributo con toda la configuración.

76
00:04:33,320 --> 00:04:39,170
Por ejemplo, cuál es la carpeta raíz del proyecto del código fuente SRC?

77
00:04:39,290 --> 00:04:45,080
Entonces en ese recé está todo el código fuente tipo de proyecto application prefijo app.

78
00:04:45,200 --> 00:04:47,090
Luego tenemos todo lo que es build.

79
00:04:47,120 --> 00:04:52,640
Cuando generamos el proyecto, por ejemplo, el directorio de salida output path, todo el contenido

80
00:04:52,640 --> 00:04:59,090
que generamos cuando realizamos el display, la compilación todo se genera dentro del directorio dist.

81
00:04:59,240 --> 00:05:00,470
Clientes a Pepe.

82
00:05:00,740 --> 00:05:04,940
Luego tenemos el index que sería la puerta entrada a nuestra aplicación.

83
00:05:05,000 --> 00:05:06,740
La página de inicio o el jom.

84
00:05:06,860 --> 00:05:09,740
El archivo index html que está dentro de él.

85
00:05:09,830 --> 00:05:10,520
Ese reze.

86
00:05:10,670 --> 00:05:17,230
Luego tenemos la clase principal, ese menta y scrip que básicamente lo que hace es cargar nuestro módulo

87
00:05:17,240 --> 00:05:17,960
por defecto.

88
00:05:18,050 --> 00:05:20,580
El módulo por defecto lo tenemos dentro de app.

89
00:05:20,720 --> 00:05:22,300
Acá lo tenemos app módulo.

90
00:05:22,340 --> 00:05:23,420
Si nos vamos, entonces.

91
00:05:23,480 --> 00:05:23,920
Amén.

92
00:05:24,740 --> 00:05:28,970
Justamente realiza el arranque el vostra del módulo app module.

93
00:05:31,560 --> 00:05:35,940
Luego tenemos los poli fails, que es una herramienta que nos permite dar compatibilidad con todos los

94
00:05:35,940 --> 00:05:42,390
navegadores Internet Explorer, Chrome, Firefox, Ópera Safari, compatibilidad con todos, la configuración

95
00:05:42,390 --> 00:05:44,520
de tags script, todo lo que son los assets.

96
00:05:44,610 --> 00:05:48,840
Muy importante son todos los recursos estáticos de nuestra aplicación.

97
00:05:48,870 --> 00:05:52,480
Por ejemplo, el favicon que aparece en el navegador, en las pestañas.

98
00:05:52,560 --> 00:05:58,260
Todo lo que son imágenes JavaScript, hojas de estilo, cualquier recurso estático lo podemos tener

99
00:05:58,260 --> 00:05:59,520
dentro de los assets.

100
00:05:59,610 --> 00:06:00,990
Por ejemplo, es arrasé.

101
00:06:01,050 --> 00:06:04,740
Assets es el directorio donde guardamos todos estos archivos.

102
00:06:05,220 --> 00:06:09,510
Luego podemos configurar hoja de estilos que se van a anexar a agregar.

103
00:06:09,540 --> 00:06:12,330
Cuando arranca nuestra aplicación dentro del index.

104
00:06:12,690 --> 00:06:15,790
HTML por defecto tiene esta elpunto ceses.

105
00:06:15,840 --> 00:06:17,940
Pero podemos tener más separados por coma.

106
00:06:17,970 --> 00:06:21,810
Podemos agregar más hoja de estilos globales de nuestra aplicación.

107
00:06:21,810 --> 00:06:25,140
Y pasa lo mismo con los scripts que serían los lleva a scripts.

108
00:06:25,230 --> 00:06:30,060
Cualquier archivo JS lo podemos registrar acá también separados por comas.

109
00:06:30,120 --> 00:06:35,190
Luego tenemos configuraciones de ambiente, de producción, desarrollo y un montón de cosas.

110
00:06:35,250 --> 00:06:42,090
Continuamos con Package Punto Yaiza otro chivo muy importante contiene el nombre de la aplicación,

111
00:06:42,180 --> 00:06:47,010
la versión scripts, que son atajos para ejecutar comandos y dependencias.

112
00:06:47,040 --> 00:06:51,060
En este archivo se manejan todas las dependencias con sus versiones.

113
00:06:51,090 --> 00:06:57,090
Por ejemplo, todo lo que dependencias son dependencias para producción para ejecutar nuestra aplicación,

114
00:06:57,090 --> 00:07:03,930
como por ejemplo todos los paquetes de angula animation common core for para formularios http router.

115
00:07:04,050 --> 00:07:07,230
El API reactive stations de JavaScript, en fin.

116
00:07:07,380 --> 00:07:12,390
Y en TEP dependencias son todas las dependencias que están relacionadas al ambiente.

117
00:07:12,390 --> 00:07:12,970
Desarrollo.

118
00:07:12,990 --> 00:07:15,150
Todo lo que es escribir nuestro código.

119
00:07:15,180 --> 00:07:16,380
Pruebas unitarias.

120
00:07:16,470 --> 00:07:20,400
El lenguaje describe el liter para detectar errores de sintaxis.

121
00:07:20,490 --> 00:07:21,120
Está todo acá.

122
00:07:21,180 --> 00:07:21,930
Por supuesto.

123
00:07:21,960 --> 00:07:24,450
Cuando generamos el proyecto lo compilamos.

124
00:07:24,480 --> 00:07:28,380
Todas estas librerías no se incluyen, solamente se van a incluir.

125
00:07:28,440 --> 00:07:31,610
La producción en ningún caso la desarrolla.

126
00:07:31,620 --> 00:07:37,680
Por lo tanto, nuestro proyecto puede tener un montón de archivo, un montón de librerías y configuraciones.

127
00:07:37,710 --> 00:07:44,160
Pero en el momento de compilar JavaScript, de generar nuestro proyecto con Get Build, se va a incluir

128
00:07:44,190 --> 00:07:48,990
en el directorio dist lo justo y necesario y va a quedar nuestra aplicación bastante liviana.

129
00:07:49,020 --> 00:07:52,260
Solamente el JavaScript necesario para correr la aplicación.

130
00:07:52,350 --> 00:07:57,090
Nuestro código también en JavaScript hoja de estilos y HTML, todo estático.

131
00:07:57,210 --> 00:08:02,520
Y en caso de que se haya eliminado, por ejemplo, una librería de nuestro proyecto del directorio,

132
00:08:02,580 --> 00:08:05,670
nos module que se haya borrado o se haya corrompido.

133
00:08:05,760 --> 00:08:08,550
Este archivo nos permite recuperar toda la dependencia.

134
00:08:08,640 --> 00:08:14,670
Incluso podríamos borrar el directorio no module y lo podríamos volver a generar y descargar todas estas

135
00:08:14,670 --> 00:08:21,240
dependencias simplemente a través de archivos con el comando npm install a través del not tacas manoy

136
00:08:21,330 --> 00:08:22,530
en nuestros almadía.

137
00:08:22,620 --> 00:08:22,890
Bien.

138
00:08:22,950 --> 00:08:26,640
Luego tenemos el Redmi con extensión MD o Markdown.

139
00:08:27,120 --> 00:08:28,560
Básicamente la documentación.

140
00:08:28,590 --> 00:08:34,140
Por ejemplo, acá indica que el proyecto fue generado con Angular si el AI y la versión también nos

141
00:08:34,140 --> 00:08:40,340
muestra cómo ejecutar o levantar el servidor de desarrollo a través de Fisher y lo podemos navegar en

142
00:08:40,350 --> 00:08:43,470
local host con el puerto 4200 por defecto.

143
00:08:43,560 --> 00:08:49,980
Un servidor live reloj que se reinicia, que se actualiza automáticamente cuando cambiamos o guardamos

144
00:08:50,040 --> 00:08:51,780
un archivo de nuestro proyecto.

145
00:08:51,840 --> 00:08:52,920
Nuestro código fuente.

146
00:08:53,010 --> 00:08:59,670
Luego tenemos todo el código para generar generar por ejemplo componentes directivas pipe, clase servis,

147
00:08:59,700 --> 00:09:05,070
clases, interface, numeradores, módulos, en fin, a través de endi generate.

148
00:09:05,160 --> 00:09:11,970
Por ejemplo, si queremos generar un componente usamos en txi generate component y el nombre del componente,

149
00:09:12,180 --> 00:09:15,180
pero también tenemos una abreviación, un atajo.

150
00:09:15,210 --> 00:09:21,360
Por ejemplo, en vez de usar en ti generate, podemos usar en ji ji simplemente la letra G y en vez

151
00:09:21,360 --> 00:09:26,340
de componer utilizamos C, por ejemplo en Chi C y C de component.

152
00:09:26,490 --> 00:09:32,850
Luego tenemos ng build para construir nuestro proyecto, el código JavaScript que va a ejecutar el navegador.

153
00:09:32,910 --> 00:09:39,150
Todo queda almacenado dentro del directorio dist en distribución y podemos usar la bandera menos menos

154
00:09:39,150 --> 00:09:40,320
prop para producción.

155
00:09:40,350 --> 00:09:44,850
También tenemos para generar pruebas unitarias y también en Yelp para la ayuda.

156
00:09:44,940 --> 00:09:49,440
En fin, este archivo Redmi es una pequeña documentación con todo resumido.

157
00:09:49,530 --> 00:09:55,350
Luego tenemos el archivo TA escribe con Fiti es Koffi Archivo Configuración detalle script que nos ayuda

158
00:09:55,380 --> 00:09:56,310
con las alertas.

159
00:09:56,340 --> 00:10:01,950
Si estamos usando bien las variables en el código, si estamos creando correctamente una clase, si

160
00:10:01,950 --> 00:10:08,970
estamos usando bien un decorador, una anotación y también nos permite activar la compilación que compila

161
00:10:08,970 --> 00:10:13,980
de forma automática cada vez que guardemos nuestro código fuente un archivo, lo cual nos recomienda

162
00:10:13,980 --> 00:10:16,980
por qué crees que estemos guardando una clase del proyecto?

163
00:10:17,040 --> 00:10:18,660
Un archivo va a estar compilando.

164
00:10:18,720 --> 00:10:23,850
La idea es compilar después que finalicemos nuestra aplicación, pero no ante cualquier cambio.

165
00:10:24,000 --> 00:10:26,010
Luego tenemos el toit script.

166
00:10:26,070 --> 00:10:30,960
El test es lint que igual que el ts config no es necesario que lo toquemos ya que viene configuro.

167
00:10:31,170 --> 00:10:38,210
Voto automático y el Lint se encarga de detectar errores de sintaxis en nuestro código y también nos

168
00:10:38,210 --> 00:10:43,100
ayuda a que todos los errores de sintaxis que puedan ocurrir a medida que estén escribiendo el código

169
00:10:43,160 --> 00:10:46,160
en el editor, se muestren de forma correcta en el IDE.

170
00:10:46,280 --> 00:10:46,940
En el editor.

171
00:10:47,030 --> 00:10:49,010
Y no tenemos más la próxima clase.

172
00:10:49,010 --> 00:10:52,490
Continuamos entonces analizando el reseque.

173
00:10:52,490 --> 00:10:53,900
Bastante completo.

174
00:10:53,930 --> 00:10:54,740
Bastante amplio.

175
00:10:55,220 --> 00:10:55,790
Nada más.

176
00:10:55,880 --> 00:10:56,810
Hasta la próxima.