1
00:00:00,000 --> 00:00:04,599
[MUSIC]

2
00:00:04,599 --> 00:00:09,853
Acabamos de crear nuestra primera aplicación Angular en el ejercicio anterior.

3
00:00:09,853 --> 00:00:13,758
Debe estar preguntándose, ¿cómo se ve una aplicación angular típica?

4
00:00:13,758 --> 00:00:16,345
¿Cuál es su estructura y arquitectura, y

5
00:00:16,345 --> 00:00:18,669
cómo construimos una aplicación Angular?

6
00:00:19,800 --> 00:00:25,560
Hablemos de estas cosas paso a paso, comenzando con esta conferencia.

7
00:00:27,390 --> 00:00:34,280
Echando un vistazo rápido a la carpeta de la aplicación, en un editor.

8
00:00:34,280 --> 00:00:39,469
Usted nota inmediatamente que la CLI angular ha creado un montón de archivos

9
00:00:40,530 --> 00:00:45,820
en varias carpetas en nuestra aplicación.

10
00:00:47,260 --> 00:00:50,240
¿Qué contienen estos archivos?

11
00:00:50,240 --> 00:00:53,930
¿Cómo constituyen una aplicación angular?

12
00:00:53,930 --> 00:00:58,832
Vamos a examinarlos paso a paso para entender la arquitectura típica de

13
00:00:58,832 --> 00:01:00,556
una aplicación angular.

14
00:01:00,556 --> 00:01:03,688
Como ya nos hemos dado cuenta,

15
00:01:03,688 --> 00:01:08,828
aplicaciones angulares se construyen como una combinación

16
00:01:08,828 --> 00:01:13,727
de HTML y TypeScript o JavaScript.

17
00:01:13,727 --> 00:01:18,735
En este curso vamos a utilizar TypeScript como el lenguaje de elección para

18
00:01:18,735 --> 00:01:21,169
construir nuestra aplicación Angular.

19
00:01:21,169 --> 00:01:25,146
Angular en sí consta de varias bibliotecas,

20
00:01:25,146 --> 00:01:30,585
algunas de ellas llamadas bibliotecas y otras son bibliotecas opcionales.

21
00:01:30,585 --> 00:01:35,389
Dependiendo del tipo de aplicación Angular que esté tratando de construir,

22
00:01:35,389 --> 00:01:38,910
incluirá algunos de estos en su aplicación.

23
00:01:38,910 --> 00:01:44,510
Como ya hemos aprendido, Angular es un framework de JavaScript y

24
00:01:44,510 --> 00:01:48,610
lo aprovecharemos para construir nuestra aplicación.

25
00:01:49,715 --> 00:01:56,800
En resumen, la aplicación angular es modular en su naturaleza y constará de

26
00:01:56,800 --> 00:02:03,160
varios componentes, junto con sus plantillas, que componen la aplicación.

27
00:02:03,160 --> 00:02:09,090
No solo eso, estos componentes y otras partes de la aplicación Angular,

28
00:02:09,090 --> 00:02:13,060
como servicios, se organizarán en módulos.

29
00:02:13,060 --> 00:02:18,892
Y estos módulos, a su vez, serán utilizados por módulos de nivel superior.

30
00:02:18,892 --> 00:02:23,889
Así que puede ver una aplicación Angular siendo una arquitectura modular

31
00:02:23,889 --> 00:02:27,822
con un módulo raíz en la parte superior,

32
00:02:27,822 --> 00:02:34,966
que toma la ayuda de otros módulos organizados en su jerarquía de modelado.

33
00:02:34,966 --> 00:02:41,170
Examinemos nuestra aplicación para entender cómo se crea esto.

34
00:02:41,170 --> 00:02:45,550
Antes de continuar, el módulo raíz por defecto

35
00:02:45,550 --> 00:02:50,810
en Angular normalmente se denomina módulo de aplicación.

36
00:02:50,810 --> 00:02:55,970
Ir a nuestro código, vamos a empezar nuestro viaje e index.html.

37
00:02:55,970 --> 00:03:03,519
Así que en este archivo index.html, puede ver que tenemos el código html típico aquí,

38
00:03:03,519 --> 00:03:09,079
junto con esta línea en particular que dice app-root.

39
00:03:09,079 --> 00:03:15,270
Inmediatamente los reconoce, esto no parece una etiqueta HTML típica.

40
00:03:15,270 --> 00:03:20,130
Así que empecemos haciéndonos la pregunta, ¿qué significa esto, y

41
00:03:20,130 --> 00:03:25,970
por qué está eso incluido en la página index.html?

42
00:03:25,970 --> 00:03:31,090
Como ya vimos, una típica aplicación angular

43
00:03:31,090 --> 00:03:35,490
es una jerarquía de módulos con un módulo raíz.

44
00:03:35,490 --> 00:03:40,660
Su aplicación Angular se inicia iniciando el módulo raíz

45
00:03:40,660 --> 00:03:42,520
para iniciar su aplicación.

46
00:03:42,520 --> 00:03:46,430
Entonces, ¿cómo arrancamos una aplicación Angular?

47
00:03:46,430 --> 00:03:53,566
Ya vimos la página index.html, y viste un elemento allí llamado app-root.

48
00:03:53,566 --> 00:03:58,306
Así que vamos a hacernos algunas preguntas más.

49
00:03:58,306 --> 00:04:03,102
Un complemento de la página index.html es el archivo main.ts.

50
00:04:03,102 --> 00:04:07,602
Si abre ese archivo verá que contiene un conjunto

51
00:04:07,602 --> 00:04:12,790
de instrucciones de importación en TypeScript, como está escrito aquí.

52
00:04:12,790 --> 00:04:16,460
No profundizemos demasiado en los detalles, pero

53
00:04:16,460 --> 00:04:20,160
volveré para explicarlo en un corto tiempo.

54
00:04:20,160 --> 00:04:21,652
Pero en particular,

55
00:04:21,652 --> 00:04:27,017
permítanme llamar su atención sobre esta línea particular en el archivo main.ts.

56
00:04:27,017 --> 00:04:31,600
Que dice PlatformBrowserDynamic () .BootstrapModule

57
00:04:31,600 --> 00:04:36,277
y luego observe el parámetro aquí, que dice (AppModule).

58
00:04:36,277 --> 00:04:41,075
Así que como mencioné, anteriormente el módulo de la aplicación es el nombre

59
00:04:41,075 --> 00:04:45,985
típico dado al módulo raíz en una aplicación angular.

60
00:04:45,985 --> 00:04:48,643
Si nos fijamos en la jerarquía de archivos,

61
00:04:48,643 --> 00:04:52,867
ya verá un archivo allí llamado app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Vamos a visitar ese archivo en poco tiempo para ver qué contiene.

63
00:04:57,131 --> 00:04:59,877
Ahora, volviendo a estas importaciones,

64
00:04:59,877 --> 00:05:05,250
puede ver que vamos a tomar el ejemplo de la primera importación aquí.

65
00:05:05,250 --> 00:05:10,330
Dice importar EnableProdMode desde '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Entonces, lo que esto especifica es que importaremos este módulo

67
00:05:15,740 --> 00:05:19,970
en particular de la biblioteca central angular.

68
00:05:19,970 --> 00:05:24,820
Y de manera similar, ves el segundo diciendo importar PlatformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
de '@angular /platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
Así que desde esta biblioteca está importando este módulo en su lugar.

71
00:05:32,500 --> 00:05:37,896
Ahora, el módulo PlatformBrowserDynamic le permite iniciar

72
00:05:37,896 --> 00:05:44,100
su aplicación Angular tomando su módulo raíz como parámetro.

73
00:05:44,100 --> 00:05:51,237
Obviamente hay muchos otros archivos en esta carpeta y las subcarpetas allí.

74
00:05:51,237 --> 00:05:55,534
No nos preocupemos demasiado por ellos en este momento.

75
00:05:55,534 --> 00:05:59,900
Aprenderemos sobre algunos de ellos a medida que avanzamos en este curso.

76
00:05:59,900 --> 00:06:05,868
Ahora, Angular CLI ayuda a crear esta jerarquía de carpetas y archivos

77
00:06:05,868 --> 00:06:09,848
, con la configuración necesaria para

78
00:06:09,848 --> 00:06:16,768
usted para poder arrancar su aplicación angular y empezar.

79
00:06:16,768 --> 00:06:20,233
Hacer esto a mano es una tarea un poco tediosa.

80
00:06:20,233 --> 00:06:24,811
Por lo tanto, la CLI angular simplifica la preparación

81
00:06:24,811 --> 00:06:29,460
de la carpeta para su aplicación Angular.

82
00:06:29,460 --> 00:06:36,210
Así que de nuevo, yendo al archivo app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Como mencioné, este es el módulo raíz para su aplicación Angular.

84
00:06:41,820 --> 00:06:47,912
Ahora normalmente, el módulo raíz se nombraría como archivo app.module,

85
00:06:47,912 --> 00:06:51,915
pero eso es solo un nombre sugerido en Angular.

86
00:06:51,915 --> 00:06:57,627
Verá que muchos de los archivos que constituyen una aplicación Angular,

87
00:06:57,627 --> 00:07:01,297
hay formas sugeridas de nombrar esos archivos.

88
00:07:01,297 --> 00:07:05,889
A medida que vayamos a través del curso aprenderemos específicamente acerca de cada uno de estos archivos

89
00:07:05,889 --> 00:07:06,720
.

90
00:07:06,720 --> 00:07:11,032
Así que echando un vistazo al contenido de app_module.ts,

91
00:07:11,032 --> 00:07:15,790
dentro de allí, verá un conjunto de declaraciones de importación allí.

92
00:07:15,790 --> 00:07:19,213
Echando un vistazo rápido a ellos dice import {browserModule} de

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Importar {ngModule} desde '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
Y ngModule es un módulo angular.

96
00:07:29,550 --> 00:07:34,070
Aprenderemos un poco más al respecto un poco más tarde.

97
00:07:34,070 --> 00:07:38,532
Además, verá otra instrucción de importación aquí,

98
00:07:38,532 --> 00:07:44,159
que dice import {appComponent} from './app.component '.

99
00:07:44,159 --> 00:07:47,309
Y echando un vistazo a los archivos aquí,

100
00:07:47,309 --> 00:07:52,141
ya ves un app.component.tsfileware, y

101
00:07:52,141 --> 00:07:58,863
luego varios otros archivos aquí, incluyendo un app.component card.html,

102
00:07:58,863 --> 00:08:02,972
un app.component.acss, y otros archivos.

103
00:08:02,972 --> 00:08:10,939
Ahora, esta declaración especifica que este módulo raíz incluirá este componente,

104
00:08:10,939 --> 00:08:17,640
y formará el complemento raíz de su aplicación Angular.

105
00:08:17,640 --> 00:08:22,450
Una típica aplicación Angular, como vimos, consiste en una serie de módulos

106
00:08:22,450 --> 00:08:27,330
con el módulo raíz como módulo primario,

107
00:08:27,330 --> 00:08:31,360
que le ayuda a arrancar su aplicación Angular.

108
00:08:31,360 --> 00:08:38,970
El módulo raíz es un módulo angular con una entidad, o es una clase.

109
00:08:38,970 --> 00:08:44,690
Así que aquí es donde se ve el uso de una clase TypeScript aquí,

110
00:08:44,690 --> 00:08:49,380
por lo que si se baja en el módulo rojo abajo aquí verá

111
00:08:49,380 --> 00:08:53,485
esta declaración llamada clase de exportación AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript agrega clases a su código JavaScript típico.

113
00:08:59,550 --> 00:09:03,085
Si está familiarizado con sólo ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
entonces las clases aún no se han introducido allí, pero

115
00:09:06,873 --> 00:09:11,942
las versiones más recientes de JavaScript introducirán soporte para clases.

116
00:09:11,942 --> 00:09:14,971
TypeScript también tiene soporte para clases.

117
00:09:14,971 --> 00:09:18,651
Así que si tienes experiencia con la programación orientada a objetos,

118
00:09:18,651 --> 00:09:21,139
ya estás familiarizado con las clases.

119
00:09:21,139 --> 00:09:27,106
Así que ese tipo de enfoque se está introduciendo en JavaScript con la introducción

120
00:09:27,106 --> 00:09:31,750
de clases en TypeScript y futuras versiones de JavaScript.

121
00:09:31,750 --> 00:09:37,028
Además notarás que esta clase tiene

122
00:09:37,028 --> 00:09:42,314
un decorador Ngmodule asociado con eso.

123
00:09:42,314 --> 00:09:47,312
Así que un decorador es, de nuevo, una función de

124
00:09:47,312 --> 00:09:51,874
que modifica las clases de JavaScript.

125
00:09:51,874 --> 00:09:59,254
Veremos el uso de decoradores en muchos lugares en nuestra aplicación Angular.

126
00:09:59,254 --> 00:10:00,980
Este es un Ngmodule.

127
00:10:00,980 --> 00:10:05,850
El decorador de eso le permite especificar algunos detalles sobre este módulo de aplicación

128
00:10:05,850 --> 00:10:06,797
.

129
00:10:06,797 --> 00:10:12,398
Así que esta función de decorador toma un cierto conjunto

130
00:10:12,398 --> 00:10:18,295
de metadatos para ayudarle a describir este módulo.

131
00:10:18,295 --> 00:10:23,232
Así que este objeto de metadatos aquí contiene, como puede ver, declaraciones

132
00:10:23,232 --> 00:10:28,430
, importaciones, proveedores, bootstrap.

133
00:10:28,430 --> 00:10:33,080
Y también contendrá exportaciones si este módulo está exportando algo que puede ser

134
00:10:33,080 --> 00:10:35,110
utilizado por otro módulo.

135
00:10:35,110 --> 00:10:41,734
Dado que este es el módulo raíz, no tenemos una exportación de este módulo.

136
00:10:41,734 --> 00:10:47,418
Así que en su lugar solo tenemos declaraciones, importaciones, proveedores y bootstrap.

137
00:10:47,418 --> 00:10:52,243
Así que aquí esta es bastante directa de entender.

138
00:10:52,243 --> 00:10:57,280
Especifica que para arrancar esta aplicación angular,

139
00:10:57,280 --> 00:11:00,713
necesitamos arrancar el AppComponent.

140
00:11:00,713 --> 00:11:07,008
Entonces AppComponent es el componente raíz de nuestra aplicación Angular.

141
00:11:07,008 --> 00:11:13,595
Además, la parte de importaciones especifica las propiedades,

142
00:11:13,595 --> 00:11:22,040
viendo que todos estos módulos necesitan ser importados para ser utilizados con este módulo de aplicación.

143
00:11:22,040 --> 00:11:25,770
Así que este módulo de aplicación ahora depende de estos otros módulos.

144
00:11:25,770 --> 00:11:30,917
Así que estos son los módulos que se van a importar en el módulo de la aplicación como

145
00:11:30,917 --> 00:11:36,494
parte de la jerarquía, de ahí la razón por la que importamos estos módulos aquí.

146
00:11:36,494 --> 00:11:38,451
Así que cuando importa los módulos,

147
00:11:38,451 --> 00:11:43,324
está especificando aquí diciendo que el módulo de la aplicación hará uso de este módulo.

148
00:11:43,324 --> 00:11:48,462
Por lo tanto, la propiedad de importaciones especifica aquellos módulos que deben importarse o

149
00:11:48,462 --> 00:11:53,040
aquellos módulos de los que depende este módulo en particular.

150
00:11:53,040 --> 00:11:58,398
Las declaraciones aquí, la propiedad de declaraciones,

151
00:11:58,398 --> 00:12:02,940
es la propiedad que declara las clases de vista

152
00:12:02,940 --> 00:12:06,910
que pertenecen a este módulo en particular.

153
00:12:06,910 --> 00:12:10,584
Entonces, las clases de vista en caso de un módulo Angular serían

154
00:12:10,584 --> 00:12:15,018
en forma de componentes, directivas y tuberías.

155
00:12:15,018 --> 00:12:20,789
Vamos a hablar de directivas y tuberías un poco más adelante en este curso,

156
00:12:20,789 --> 00:12:24,416
vamos a hablar de los componentes en la siguiente lección.

157
00:12:24,416 --> 00:12:28,590
Los proveedores especifican todos los servicios que este módulo

158
00:12:28,590 --> 00:12:31,753
en particular hará uso.

159
00:12:31,753 --> 00:12:36,592
Servicios de los que hablaremos con un poco más de detalle en

160
00:12:36,592 --> 00:12:39,235
el módulo de la próxima semana.

161
00:12:39,235 --> 00:12:42,510
Hablaremos más detalles sobre los servicios, cómo los creamos,

162
00:12:42,510 --> 00:12:46,810
y cómo podemos hacer uso de ellos con nuestra aplicación Angular.

163
00:12:46,810 --> 00:12:52,091
Para resumir lo que hemos aprendido hasta ahora, nos damos cuenta de que un módulo

164
00:12:52,091 --> 00:12:57,373
en una aplicación Angular podría consistir en un conjunto de componentes y servicios

165
00:12:57,373 --> 00:13:02,671
que se requerirán de este módulo importándolos.

166
00:13:02,671 --> 00:13:09,461
Y estos serán declarados usando la propiedad de declaraciones

167
00:13:09,461 --> 00:13:15,220
del decorador Ngmodule en nuestro módulo de aplicación.

168
00:13:15,220 --> 00:13:19,845
Ahora, estos componentes pueden depender de

169
00:13:19,845 --> 00:13:24,178
otros componentes, o servicios, o directivas, o

170
00:13:24,178 --> 00:13:29,115
tuberías, como veremos en el resto de este curso en particular.

171
00:13:29,115 --> 00:13:37,212
Así que con esto tenemos una idea aproximada de cómo se estructura una aplicación angular típica.

172
00:13:37,212 --> 00:13:42,247
Volviendo a nuestro código, ahora es el momento de usar para examinar

173
00:13:42,247 --> 00:13:48,691
este archivo app.component.ts, y el archivo app.component.html.

174
00:13:48,691 --> 00:13:53,502
Que declara la plantilla para nuestro componente,

175
00:13:53,502 --> 00:13:57,022
y el archivo app.component.ts,

176
00:13:57,022 --> 00:14:02,547
que especifica la parte TypeScript de nuestro componente.

177
00:14:02,547 --> 00:14:08,157
Ahora, lo haremos en la siguiente lección, donde trataremos con los componentes y

178
00:14:08,157 --> 00:14:13,436
cómo podemos crear nuevos componentes y agregarlos a nuestra aplicación Angular.

179
00:14:13,436 --> 00:14:16,815
[MÚSICA]