1
00:00:03,950 --> 00:00:06,915
En el ejercicio anterior,

2
00:00:06,915 --> 00:00:12,510
hemos desarrollado nuestra primera aplicación angular básica.

3
00:00:12,510 --> 00:00:16,430
Como mencioné, vamos a trabajar en esa aplicación Angular y desarrollarla

4
00:00:16,430 --> 00:00:20,350
más a lo largo del resto de este curso.

5
00:00:20,350 --> 00:00:24,230
Ahora, antes de empezar a trabajar en nuestra aplicación Angular,

6
00:00:24,230 --> 00:00:29,509
vamos a configurar nuestra aplicación Angular para utilizar algunos módulos adicionales,

7
00:00:29,509 --> 00:00:34,035
que nos permiten diseñar las plantillas para nuestra aplicación Angular.

8
00:00:34,035 --> 00:00:40,810
Utilizaremos el módulo Material angular para diseñar los diseños de la interfaz de usuario.

9
00:00:40,810 --> 00:00:47,420
El módulo de material angular nos proporciona una serie de interesantes componentes de diseño

10
00:00:47,420 --> 00:00:54,500
que podemos hacer uso en el diseño de nuestras plantillas de componentes angulares.

11
00:00:54,500 --> 00:01:01,915
Además, haremos uso del diseño flexible que se basa en el diseño flexible CSS,

12
00:01:01,915 --> 00:01:08,015
que nos permite hacer un diseño responsive dentro de nuestra aplicación Angular.

13
00:01:08,015 --> 00:01:09,520
Así que, en este ejercicio,

14
00:01:09,520 --> 00:01:11,330
vamos a hacer estas configuraciones.

15
00:01:11,330 --> 00:01:17,460
En el camino, aprenderemos nuestro primer conocimiento breve de los componentes,

16
00:01:17,460 --> 00:01:23,980
incluso antes de pasar a examinar los componentes con más detalle en la siguiente lección.

17
00:01:23,980 --> 00:01:31,810
Para empezar, comencemos nuestro viaje con una visita rápida al archivo app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Este es el archivo que abre

19
00:01:33,769 --> 00:01:38,390
el componente raíz que forma parte de nuestra aplicación Angular.

20
00:01:38,390 --> 00:01:40,765
Ahora, echando un vistazo a este componente raíz,

21
00:01:40,765 --> 00:01:45,090
hay algunas cosas que serán muy claras para ustedes incluso sin mucha explicación.

22
00:01:45,090 --> 00:01:49,715
Lo primero que me gustaría llamar su atención es esta declaración de importación.

23
00:01:49,715 --> 00:01:56,300
Como puede ver, se trata de importar la clase de componente de la biblioteca de núcleo angular.

24
00:01:56,300 --> 00:02:01,185
A continuación, estamos preparando nuestra clase AppComponent aquí,

25
00:02:01,185 --> 00:02:03,280
y exportando esa clase.

26
00:02:03,280 --> 00:02:07,160
Entonces, dentro de esta clase AppComponent que hemos declarado,

27
00:02:07,160 --> 00:02:12,080
tenemos una variable que hemos declarado aquí llamada title,

28
00:02:12,080 --> 00:02:15,330
que actualmente está asignada a ser una cadena.

29
00:02:15,330 --> 00:02:17,910
Ahora, echando un vistazo rápido a esta variable,

30
00:02:17,910 --> 00:02:20,360
inmediatamente comienza a preguntarse,

31
00:02:20,360 --> 00:02:24,740
cómo está esto relacionado con lo que hemos visto en el navegador,

32
00:02:24,740 --> 00:02:29,585
cuando vio nuestra aplicación Angular mostrándose en el navegador,

33
00:02:29,585 --> 00:02:33,740
la aplicación Angular mostraba exactamente estas palabras en el navegador.

34
00:02:33,740 --> 00:02:38,630
De hecho, esta variable juega un papel importante en

35
00:02:38,630 --> 00:02:44,250
apareciendo con la vista que viste en nuestro navegador.

36
00:02:44,250 --> 00:02:46,730
Ahora, además, también ve que

37
00:02:46,730 --> 00:02:53,790
esta clase de componente se agrega con un decorador aquí.

38
00:02:53,790 --> 00:02:58,395
Así que de nuevo, este es otro decorador que encontrarás en Angular.

39
00:02:58,395 --> 00:03:01,590
Entonces, esto como vemos es un decorador de componentes.

40
00:03:01,590 --> 00:03:08,240
El decorador de componentes internamente toma un objeto JavaScript como parámetro aquí,

41
00:03:08,240 --> 00:03:14,700
y la primera propiedad que ve aquí llamada selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Ahora, si recuerdan cuando miramos el archivo index.html,

43
00:03:19,100 --> 00:03:23,275
vimos que hemos incluido un elemento allí llamado app-root.

44
00:03:23,275 --> 00:03:26,865
Ahora, comienzas a ver de dónde surge esa raíz de aplicación.

45
00:03:26,865 --> 00:03:31,250
Por lo tanto, este es el selector para el componente que declaramos aquí,

46
00:03:31,250 --> 00:03:36,020
que es lo que se usa dentro de nuestra clase de plantilla para especificar donde

47
00:03:36,020 --> 00:03:41,960
la vista correspondiente a este componente debe mostrarse en el navegador.

48
00:03:41,960 --> 00:03:47,845
La segunda propiedad que define aquí es TemplateURL.

49
00:03:47,845 --> 00:03:50,890
Esto apunta a un archivo,

50
00:03:50,890 --> 00:03:53,030
un archivo HTML como se puede ver,

51
00:03:53,030 --> 00:03:57,945
que contiene la plantilla correspondiente a este componente en particular.

52
00:03:57,945 --> 00:04:02,335
La plantilla que define la vista de este componente.

53
00:04:02,335 --> 00:04:07,565
La tercera propiedad que define aquí como puede ver, dice, StyleURLs,

54
00:04:07,565 --> 00:04:14,450
que como nota aquí está asignada al archivo app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Por lo tanto, este archivo debe contener todo el código scss que se puede utilizar

56
00:04:19,130 --> 00:04:24,310
para el estilo CSS para nuestra plantilla de componentes.

57
00:04:24,310 --> 00:04:29,260
Entonces, esta es una visita rápida al archivo app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Ahora, vamos al archivo App.component.html,

59
00:04:33,365 --> 00:04:36,905
y echemos un vistazo rápido a la plantilla.

60
00:04:36,905 --> 00:04:40,480
Vaya al archivo App.component.html,

61
00:04:40,480 --> 00:04:43,635
verá que este archivo app.component,

62
00:04:43,635 --> 00:04:51,384
el código HTML aquí contiene solo una etiqueta h1 con algo aquí con dos llaves.

63
00:04:51,384 --> 00:04:58,310
Ahora, obviamente, esto no es algo a lo que estás acostumbrado por tu conocimiento de HTML,

64
00:04:58,310 --> 00:05:01,755
o CSS o JavaScript que has visto antes.

65
00:05:01,755 --> 00:05:04,325
Esta es la sintaxis angular.

66
00:05:04,325 --> 00:05:07,055
Esto es lo que llamamos como interpolación.

67
00:05:07,055 --> 00:05:12,350
Esto está utilizando el enlace de datos unidireccional de Angular.

68
00:05:12,350 --> 00:05:16,775
Te estoy lanzando algunos términos en este momento.

69
00:05:16,775 --> 00:05:20,690
Mantengan estos términos volveremos a ver esos términos en

70
00:05:20,690 --> 00:05:25,185
más detalle en las lecciones restantes de este curso.

71
00:05:25,185 --> 00:05:28,140
Lo primero que mencioné es la interpolación,

72
00:05:28,140 --> 00:05:33,290
el segundo que mencioné es un enlace de datos unidireccional.

73
00:05:33,680 --> 00:05:42,200
Además, inmediatamente verá que esta es la variable que vio en el compañero, archivo

74
00:05:42,200 --> 00:05:48,560
TypeScript, que define el código TypeScript correspondiente al componente App.

75
00:05:48,560 --> 00:05:51,640
Entonces, una vez que especifique algo como esto aquí,

76
00:05:51,640 --> 00:05:58,970
la implicación es que cualquiera que sea el valor de este título será sustituido en su lugar

77
00:05:58,970 --> 00:06:08,170
aquí y será utilizado como el código HTML interno para esta etiqueta h1 aquí.

78
00:06:08,170 --> 00:06:11,600
Ese es el propósito de incluir esto aquí.

79
00:06:11,600 --> 00:06:15,140
Ahora vamos a pasar a instalar algunos de

80
00:06:15,140 --> 00:06:22,410
los otros módulos de relación angular que nos permitirán diseñar plantillas.

81
00:06:22,410 --> 00:06:25,985
Luego volveremos a este archivo App.component.html.

82
00:06:25,985 --> 00:06:31,375
A continuación, rediseñe esta plantilla un poco más adelante en este ejercicio.

83
00:06:31,375 --> 00:06:38,330
Con el fin de ayudarnos a diseñar vistas receptivas dentro de nuestra aplicación Angular,

84
00:06:38,330 --> 00:06:40,340
vamos a tomar la ayuda de un par de módulos

85
00:06:40,340 --> 00:06:45,360
relacionados para Angular llamados como el módulo Material Angular.

86
00:06:45,360 --> 00:06:49,705
El módulo de material angular nos proporciona una serie de componentes.

87
00:06:49,705 --> 00:06:53,795
Componentes de diseño que podemos usar en el diseño

88
00:06:53,795 --> 00:06:59,595
nuestras nuevas plantillas para nuestros componentes angulares.

89
00:06:59,595 --> 00:07:06,290
El módulo de material angular si quieres comparar esto es algo parecido a lo que Bootstrap

90
00:07:06,290 --> 00:07:14,055
nos proporcionó para diseñar nuestras páginas web que examinamos en el curso anterior.

91
00:07:14,055 --> 00:07:19,850
Además, usaré otro módulo llamado como módulo de diseño flexible angular.

92
00:07:19,850 --> 00:07:26,195
El módulo de diseño flexible proporciona soporte para usar el diseño flexible CSS

93
00:07:26,195 --> 00:07:33,440
dentro de nuestras plantillas Angular para nuestros componentes Angular.

94
00:07:33,440 --> 00:07:36,620
Ahora, estos dos módulos necesitan ser explícitamente

95
00:07:36,620 --> 00:07:40,195
instalados y luego importados en nuestra aplicación Angular,

96
00:07:40,195 --> 00:07:43,530
eso es lo que vamos a hacer en el siguiente paso.

97
00:07:43,530 --> 00:07:45,645
Pero antes de seguir adelante,

98
00:07:45,645 --> 00:07:48,910
una pregunta que podría estar preguntando es,

99
00:07:48,910 --> 00:07:58,350
¿por qué no usar Bootstrap para hacer el diseño de las plantillas para nuestra aplicación Angular?

100
00:07:58,350 --> 00:08:05,220
De hecho, también puede usar Bootstrap para diseñar las plantillas para nuestra aplicación Angular.

101
00:08:05,220 --> 00:08:07,310
Pero solo puedes usar

102
00:08:07,310 --> 00:08:12,850
los componentes CSS parte de Bootstrap dentro de tu aplicación Angular.

103
00:08:12,850 --> 00:08:16,800
Los componentes basados en jQuery.

104
00:08:16,800 --> 00:08:21,709
Los componentes de JavaScript no se pueden usar explícitamente, puede haber algunos conflictos

105
00:08:21,709 --> 00:08:27,870
entre los componentes basados en jQuery de Bootstrap y el código Angular en sí.

106
00:08:27,870 --> 00:08:33,800
Por lo tanto, es mejor evitar el uso de los componentes de JavaScript de Bootstrap

107
00:08:33,800 --> 00:08:40,925
en caso de que elija usar Bootstrap como la forma de diseñar sus plantillas Angular.

108
00:08:40,925 --> 00:08:42,980
Pero por otro lado,

109
00:08:42,980 --> 00:08:47,000
también pensé que esto nos proporcionaría una buena oportunidad de aprender obtener

110
00:08:47,000 --> 00:08:54,350
otro marco de diseño de interfaz de usuario que es el marco de material angular.

111
00:08:54,350 --> 00:08:58,640
Entonces, esa es la razón por la que elegí usar el marco de material angular

112
00:08:58,640 --> 00:09:03,745
y el diseño de flexión angular en este curso en particular.

113
00:09:03,745 --> 00:09:07,540
Ahora, mientras pasamos por el resto de este curso,

114
00:09:07,540 --> 00:09:10,450
no explicaré explícitamente cómo usar

115
00:09:10,450 --> 00:09:14,980
los componentes de material angular o cómo usar el diseño flexible angular.

116
00:09:14,980 --> 00:09:20,615
En su lugar, los aprenderemos mirando ejemplos.

117
00:09:20,615 --> 00:09:22,620
Haremos uso de estos dos,

118
00:09:22,620 --> 00:09:29,135
tanto los mejores componentes del material angular como el soporte angular Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
cuando diseñemos nuestras plantillas para nuestros componentes angulares en este curso particular.

120
00:09:36,715 --> 00:09:41,495
Así, por el proceso de hacer uso de estos componentes,

121
00:09:41,495 --> 00:09:44,025
también aprenderá a lo largo del camino,

122
00:09:44,025 --> 00:09:47,650
cómo hacer uso tanto de Material Angular como

123
00:09:47,650 --> 00:09:51,495
Angular Flex-Layout dentro de su aplicación Angular.

124
00:09:51,495 --> 00:09:54,685
Pensé que al hacer los ejercicios,

125
00:09:54,685 --> 00:09:57,060
aprenderías mucho más sobre Material Angular.

126
00:09:57,060 --> 00:10:01,505
Ahora, para explicar los aspectos conceptuales de por qué los componentes de material angular

127
00:10:01,505 --> 00:10:07,440
funcionan de la manera en que funcionan o cómo funciona Grid, por ejemplo,

128
00:10:07,440 --> 00:10:09,915
o cómo funciona un diseño sensible,

129
00:10:09,915 --> 00:10:14,150
ya hemos examinado algunos de ellos en el curso anterior sobre Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Por lo tanto, los mismos conceptos también vendrán en nuestra ayuda.

131
00:10:17,935 --> 00:10:23,260
En su lugar, veremos la mecánica de usar tanto el material angular como el

132
00:10:23,260 --> 00:10:30,385
el diseño flexible angular dentro de nuestra aplicación angular en este curso en particular.

133
00:10:30,385 --> 00:10:33,005
Para empezar a usar un Material Angular,

134
00:10:33,005 --> 00:10:37,655
, por supuesto, lo primero que debe hacer es instalar el módulo Material Angular.

135
00:10:37,655 --> 00:10:46,230
Entonces, en el símbolo del sistema, escriba npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Así que, como puedes ver,

137
00:10:51,240 --> 00:10:55,390
especificamos todos los módulos de relación angular con @angular,

138
00:10:55,390 --> 00:10:58,650
para que veas también lo mismo para el Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Estamos instalando la versión 6.4.7 del módulo de material angular.

140
00:11:03,980 --> 00:11:09,440
Además, el módulo de material requiere la instalación de CDK.

141
00:11:09,440 --> 00:11:12,730
Por lo tanto, también instalaremos eso haciendo

142
00:11:12,730 --> 00:11:21,100
npm install @angular /cdk @6 .4.7 —save,

143
00:11:21,100 --> 00:11:25,035
e instalaremos eso junto con Material Angular.

144
00:11:25,035 --> 00:11:31,495
Así, Angular Material hace uso del Angular cdk para sus componentes.

145
00:11:31,495 --> 00:11:35,595
Además, cuando está utilizando Material angular,

146
00:11:35,595 --> 00:11:43,035
también necesita importar el módulo de animaciones angulares a su aplicación Angular.

147
00:11:43,035 --> 00:11:46,445
Comenzando con la versión angular cuatro,

148
00:11:46,445 --> 00:11:49,740
se extrajo el soporte de animación angular

149
00:11:49,740 --> 00:11:53,695
fuera de los módulos centrales en su propio módulo separado.

150
00:11:53,695 --> 00:11:56,130
Entonces, lo que significa que si necesita

151
00:11:56,130 --> 00:11:58,900
hacer uso de animaciones dentro de su aplicación Angular,

152
00:11:58,900 --> 00:12:04,370
necesita instalar explícitamente el módulo Angular Animations.

153
00:12:04,370 --> 00:12:07,275
Entonces, sigamos adelante e instalemos eso también.

154
00:12:07,275 --> 00:12:08,325
Entonces, dirás

155
00:12:08,325 --> 00:12:18,940
npm install —save @angular /animations @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Además, otro módulo que instalaré

157
00:12:23,290 --> 00:12:33,130
juntos se llama HammerJS.

158
00:12:33,130 --> 00:12:36,940
El módulo HammerJS es utilizado por Angular

159
00:12:36,940 --> 00:12:40,700
para apoyar algunos gestos dentro de su aplicación Angular.

160
00:12:40,700 --> 00:12:45,750
Entonces, esa es la razón por la que instalamos HammerJS también dentro de nuestra aplicación,

161
00:12:45,750 --> 00:12:51,830
y la versión actual de HammerJS que estamos usando es 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Ahora, ya hemos instalado lo que necesitamos

163
00:12:56,050 --> 00:13:01,185
para que el módulo de material angular sea utilizado dentro de nuestra aplicación Angular.

164
00:13:01,185 --> 00:13:04,605
A continuación, voy a pasar a instalar

165
00:13:04,605 --> 00:13:09,415
el Angular Flex-Layout dentro de mi aplicación Angular.

166
00:13:09,415 --> 00:13:11,460
Entonces, para hacer eso, relleno el prompt

167
00:13:11,460 --> 00:13:19,000
npm install —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
e instalaremos la última versión de eso.

169
00:13:24,760 --> 00:13:31,720
Así que, ahora que tenemos todas las piezas que necesitamos para nuestra aplicación Angular instalada,

170
00:13:31,720 --> 00:13:36,290
vamos a seguir adelante y luego configurar nuestra aplicación Angular para hacer

171
00:13:36,290 --> 00:13:41,025
uso de estos nuevos módulos que instalamos en nuestra aplicación Angular.

172
00:13:41,025 --> 00:13:46,205
Lo primero que haremos es ir al archivo index.html,

173
00:13:46,205 --> 00:13:51,975
y luego configuraremos el archivo index.html para usar los iconos de material angular.

174
00:13:51,975 --> 00:13:55,800
Así que, para incluir los iconos de Material Angular para que puedan ser

175
00:13:55,800 --> 00:13:59,580
utilizados dentro de las plantillas de su aplicación Angular, así que,

176
00:13:59,580 --> 00:14:04,020
déjame ir justo allí en la cabeza de index.html,

177
00:14:04,020 --> 00:14:11,905
y luego crear un nuevo enlace con

178
00:14:11,905 --> 00:14:47,075
href=» https://fonts.googleapis.com/icon?family=Material+Icons "y este es un hoja de estilo.

179
00:14:47,075 --> 00:14:52,110
Entonces, con esto, ahora puedo hacer uso de los iconos de Material angular dentro de

180
00:14:52,110 --> 00:14:58,865
mi aplicación angular donde elijo hacerlo dentro de las plantillas.

181
00:14:58,865 --> 00:15:04,530
El siguiente paso es ir a la aplicación module.ts y

182
00:15:04,530 --> 00:15:09,825
luego importar los tres módulos que acabamos de instalar.

183
00:15:09,825 --> 00:15:14,345
Entonces, el primero que voy a importar se llama como

184
00:15:14,345 --> 00:15:29,460
el browserAnimationsModule que voy a importar desde

185
00:15:38,170 --> 00:15:47,230
@angular /platform-browser/animations. Entonces, ahora el siguiente

186
00:15:47,230 --> 00:15:54,115
que voy a importar es el MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
Por lo tanto, esto importa el módulo @angular /material/toolbar

188
00:16:00,370 --> 00:16:06,100
que se puede usar dentro de nuestras plantillas de aplicaciones angulares.

189
00:16:06,100 --> 00:16:14,305
Entonces, Material angular, y también importa

190
00:16:14,305 --> 00:16:26,720
el FlexLayoutModule de @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Entonces, una vez que tengamos todos estos módulos importados, entonces un cambio adicional que necesito

192
00:16:34,050 --> 00:16:40,035
hacer es- oh déjame también importar Hammer.js mientras estoy allí.

193
00:16:40,035 --> 00:16:43,100
Entonces, déjame importar

194
00:16:45,260 --> 00:16:51,585
Hammer.js en mi aplicación.

195
00:16:51,585 --> 00:16:53,830
Y una vez que estoy en ello,

196
00:16:53,830 --> 00:16:58,400
el otro cambio que necesito hacer es incluir también

197
00:16:58,400 --> 00:17:04,165
esos módulos en las entradas del decorador del módulo NG aquí.

198
00:17:04,165 --> 00:17:06,845
Entonces, voy a ir allí y decir módulo de navegador, módulo de animaciones de navegador

199
00:17:06,845 --> 00:17:13,440
allí y luego después del módulo HTTP,

200
00:17:13,440 --> 00:17:21,009
voy a importar el módulo de barra de herramientas de material y también el módulo de diseño flex

201
00:17:21,009 --> 00:17:29,350
como parte de las entradas dentro del decorador del módulo NG para mi módulo de aplicación.

202
00:17:29,350 --> 00:17:36,215
Entonces, con esto todas mis configuraciones para usar el módulo de barra de herramientas de material y

203
00:17:36,215 --> 00:17:38,975
el módulo de diseño flexible angular y junto con

204
00:17:38,975 --> 00:17:44,680
se completa el módulo de animaciones en angular.

205
00:17:44,680 --> 00:17:50,270
Ahora vamos a entrar en la plantilla de componentes y hacer uso de

206
00:17:50,270 --> 00:17:54,570
nuestro primer componente de material angular en el diseño

207
00:17:54,570 --> 00:18:00,110
para nuestro componente de aplicación de aplicaciones.

208
00:18:00,750 --> 00:18:06,020
Al ir al archivo de plantilla de componentes de la aplicación,

209
00:18:06,020 --> 00:18:09,460
Voy a reemplazar esto ahora con

210
00:18:09,460 --> 00:18:17,895
un componente de material angular

211
00:18:17,895 --> 00:18:21,480
llamado como mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
Entonces, la barra de herramientas mate me permite diseñar

213
00:18:24,645 --> 00:18:29,410
una barra de herramientas que puedo usar en mi aplicación angular.

214
00:18:29,410 --> 00:18:35,805
Barra de herramientas normalmente mostrada en la parte superior de la página dentro de la aplicación.

215
00:18:35,805 --> 00:18:41,395
Por lo tanto, para esta barra de herramientas especificaré el color como primario.

216
00:18:41,395 --> 00:18:44,145
Veremos lo que esto significa en poco tiempo.

217
00:18:44,145 --> 00:18:50,245
Y también cerraremos esta barra de herramientas MD aquí.

218
00:18:50,245 --> 00:18:56,230
Ahora dentro de esto voy a usar un span con

219
00:18:56,230 --> 00:19:05,790
el nombre de mi restaurante para el cual estoy diseñando este sitio web.

220
00:19:05,790 --> 00:19:08,150
Entonces, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Ahora ves por qué nombré esta carpeta como Confusión.

222
00:19:12,650 --> 00:19:19,765
Entonces, ¿cuál es la actualización que tenemos que hacer al archivo HTML del componente de la aplicación?

223
00:19:19,765 --> 00:19:29,315
Mientras estamos en ello, también incluiremos algunas actualizaciones de SCSS a mi archivo Styles.scss.

224
00:19:29,315 --> 00:19:32,470
Entonces, si entras en tu código aquí,

225
00:19:32,470 --> 00:19:37,000
encontrarás este archivo Styles.scss aquí.

226
00:19:37,000 --> 00:19:40,450
Por lo tanto, aquí es donde puede incluir todos los estilos globales en

227
00:19:40,450 --> 00:19:44,810
este archivo y esto estará disponible para todos los componentes a hacer uso de.

228
00:19:44,810 --> 00:19:51,970
Cada componente tiene sus propios archivos SCSS donde puede incluir el componente

229
00:19:51,970 --> 00:19:54,620
personalización de nivel o código SCSS de nivel

230
00:19:54,620 --> 00:20:00,280
de componente que se utilizará dentro de ese componente específico.

231
00:20:00,280 --> 00:20:03,090
Utilizaremos ambos enfoques dentro de

232
00:20:03,090 --> 00:20:07,980
esta aplicación angular que estamos desarrollando en este curso.

233
00:20:07,980 --> 00:20:13,530
Pero ahora mismo voy a actualizar el archivo principal styles.scss

234
00:20:13,530 --> 00:20:20,270
con algún código que será útil para toda mi aplicación angular.

235
00:20:20,270 --> 00:20:22,185
Lo primero que voy a hacer,

236
00:20:22,185 --> 00:20:28,160
es importar un tema preconstruido que está disponible a través de material angular.

237
00:20:28,160 --> 00:20:33,380
Este tema preconstruido en material angular nos proporciona una manera de especificar

238
00:20:33,380 --> 00:20:36,000
ciertos colores y la forma en que algunas cosas se presentan

239
00:20:36,000 --> 00:20:39,265
dentro de mis componentes de material angular.

240
00:20:39,265 --> 00:20:44,800
Los colores que estarán disponibles a través del marco preconstruido nuestro color principal,

241
00:20:44,800 --> 00:20:49,050
el color de acento, y el color de advertencia.

242
00:20:49,050 --> 00:20:53,000
Ahora el tema específico que usaré se llama Deep Purple.

243
00:20:53,000 --> 00:20:56,870
Entonces, en este caso el color primario será púrpura profundo.

244
00:20:56,870 --> 00:21:01,860
El color de acento será ámbar y el color de advertencia será rojo en este caso.

245
00:21:01,860 --> 00:21:07,880
Ahora puedes construir tus propios temas de material angular que

246
00:21:07,880 --> 00:21:10,970
puedes usar dentro de tu aplicación, pero lo dejaré

247
00:21:10,970 --> 00:21:14,385
como un ejercicio para que explores por tu cuenta.

248
00:21:14,385 --> 00:21:17,930
En este momento dentro de mi aplicación angular voy a usar una

249
00:21:17,930 --> 00:21:21,510
de las cosas preconstruidas llamadas ámbar púrpura profundo.

250
00:21:21,510 --> 00:21:25,575
Entonces, para hacer eso yendo al archivo Styles.scss,

251
00:21:25,575 --> 00:21:28,870
importaré

252
00:21:32,190 --> 00:21:38,080
material angular

253
00:21:38,080 --> 00:21:48,640
temas preconstruidos púrpura profundo Amber.css.

254
00:21:48,640 --> 00:21:54,015
Entonces, este tema preconstruido que haré uso dentro de mi aplicación angular.

255
00:21:54,015 --> 00:21:58,335
Pronto verás cómo funciona este tema precompilado en

256
00:21:58,335 --> 00:22:03,060
la aplicación angular en las plantillas que diseñamos para nuestra aplicación angular.

257
00:22:03,060 --> 00:22:08,360
Además, voy a configurar algunas propiedades para

258
00:22:08,360 --> 00:22:16,530
mi cuerpo de la página index.html, así que especificaré el relleno como cero,

259
00:22:16,530 --> 00:22:23,230
margen como cero, y luego la familia de fuentes que usaré

260
00:22:23,230 --> 00:22:30,360
es rubato o sans serif dentro de mi aplicación.

261
00:22:30,360 --> 00:22:34,320
Puede elegir utilizar lo que desee dentro de sus aplicaciones angulares.

262
00:22:34,320 --> 00:22:38,095
Seleccioné usar estos dos dentro de mi aplicación angular.

263
00:22:38,095 --> 00:22:40,130
Guardemos los cambios,

264
00:22:40,130 --> 00:22:46,495
y vamos a echar un vistazo rápido a nuestra aplicación angular en el navegador.

265
00:22:46,495 --> 00:22:48,040
Antes de hacer eso,

266
00:22:48,040 --> 00:22:53,080
asegúrese de que su servicio NG se esté ejecutando en

267
00:22:53,080 --> 00:22:58,940
una de las ventanas de terminal de su computadora.

268
00:22:58,940 --> 00:23:04,870
El servidor de desarrollo debe estar funcionando continuamente para que realice automáticamente la descompilación

269
00:23:04,870 --> 00:23:07,040
y luego cargue

270
00:23:07,040 --> 00:23:11,975
la versión actualizada de la aplicación angular en la ventana del navegador.

271
00:23:11,975 --> 00:23:14,290
Ir al navegador,

272
00:23:14,290 --> 00:23:17,925
ahora ves los cambios que hemos hecho a

273
00:23:17,925 --> 00:23:24,090
la aplicación angular reflejada en la vista en

274
00:23:24,090 --> 00:23:30,085
mi navegador para que puedas ver que ahora tenemos una barra de herramientas en la parte superior con

275
00:23:30,085 --> 00:23:37,095
las palabras que incluimos en el archivo de plantilla de componentes de la aplicación allí.

276
00:23:37,095 --> 00:23:41,290
Y se puede ver el color que se ha aplicado a la barra de herramientas.

277
00:23:41,290 --> 00:23:42,580
Así que el color, color primario,

278
00:23:42,580 --> 00:23:46,180
por lo que este es el color púrpura profundo que se aplica a la barra de herramientas.

279
00:23:46,180 --> 00:23:52,000
Ahora la tematización que hemos definido agregará color púrpura oscuro o ámbar,

280
00:23:52,000 --> 00:23:56,590
dependiendo de lo que sea utilizado por los componentes específicos del material angular

281
00:23:56,590 --> 00:24:01,750
que usamos dentro de nuestras plantillas de aplicaciones angulares.

282
00:24:01,750 --> 00:24:05,285
Con esto completamos este ejercicio.

283
00:24:05,285 --> 00:24:09,470
En este ejercicio, configuramos nuestra aplicación angular para hacer

284
00:24:09,470 --> 00:24:13,880
uso del material angular y el diseño flexible angular.

285
00:24:13,880 --> 00:24:16,410
También utilizamos

286
00:24:16,410 --> 00:24:22,150
nuestro primer componente de material angular en el archivo de plantilla de componentes de la aplicación.

287
00:24:22,150 --> 00:24:29,605
Y usamos el tema incorporado de material angular para nuestra aplicación angular.

288
00:24:29,605 --> 00:24:34,530
Guarde todos los cambios y luego este es un buen momento para que

289
00:24:34,530 --> 00:24:39,880
haga un commit de git con el mensaje configurando angular.