1
00:00:00,240 --> 00:00:05,940
En esta clase vamos a ver la integración composta con el framework front end para trabajar con todo

2
00:00:05,940 --> 00:00:11,460
lo que HTML5 y CSS para tener diseño bastante más robusto y atractivos.

3
00:00:11,790 --> 00:00:12,930
Un mejor Lucasfilm.

4
00:00:13,080 --> 00:00:15,630
Y lo vamos a instalar de la forma más fácil posible.

5
00:00:15,720 --> 00:00:19,830
Hay diferentes forma para poder instalar y configurar vostra en nuestro proyecto.

6
00:00:19,920 --> 00:00:25,920
Por ejemplo, podemos utilizar una instalación a través de Angular si elige, o bien podemos integrar

7
00:00:25,920 --> 00:00:32,610
de forma manual copiar las hojas de estilos y lo JavaScript correspondiente en nuestro index punto HTML

8
00:00:32,700 --> 00:00:35,050
del proyecto, que es justamente lo que vamos a hacer ahora.

9
00:00:35,100 --> 00:00:40,010
Pero después, más adelante, vamos a configurar de otra forma Bust.

10
00:00:40,200 --> 00:00:42,730
Vamos a ir a la página oficial de Vostra.

11
00:00:42,840 --> 00:00:46,140
Creo que muchos ya lo conocen, pero de todas formas acá lo tenemos.

12
00:00:46,260 --> 00:00:53,970
Entonces, get vostra que la página oficial Get pústula puntocom nos vamos a downloads y acá vamos a

13
00:00:53,970 --> 00:00:57,390
copiar a través del repositorio CDN.

14
00:00:57,450 --> 00:01:02,130
Vamos a copiar las librerías, la hoja de estilo.

15
00:01:02,220 --> 00:01:05,910
Vos también CSS y vos tresmil jotes.

16
00:01:06,030 --> 00:01:10,410
Ahora nos vamos a nuestro proyecto angular, cerramos y vamos a abrir el index.

17
00:01:10,620 --> 00:01:17,460
Entonces justamente en este index que nuestra página principal de arranque donde tenemos la etiqueta

18
00:01:17,550 --> 00:01:22,560
y selector a Pepe Ruth, acá vamos a incluir los estilos dentro de.

19
00:01:24,500 --> 00:01:25,200
Ahí lo tenemos.

20
00:01:25,400 --> 00:01:27,660
Pero lo lleva escribir todo lo que haya escrito.

21
00:01:28,310 --> 00:01:34,130
Es bueno tenerlo al final, por ejemplo, lo vamos a dejar justo al final en el bote.

22
00:01:34,740 --> 00:01:40,040
Acá entonces todo lo que oiga estilo dentro del Gilead y todo lo que ya escribí debajo.

23
00:01:40,130 --> 00:01:41,210
Al final en el bote.

24
00:01:41,540 --> 00:01:42,260
Y ahí lo tenemos.

25
00:01:42,350 --> 00:01:44,150
Ahí tenemos la instalación integrada.

26
00:01:44,240 --> 00:01:47,840
Después, obviamente, lo vamos a hacer de la mejor forma posible.

27
00:01:47,930 --> 00:01:50,420
Una manera mucho más optimizada y recomendada.

28
00:01:50,480 --> 00:01:52,970
Pero por ahora lo vamos a hacer de esta manera.

29
00:01:53,000 --> 00:01:57,400
Así que vamos a guardar y ya tenemos integrado nuestro vostra.

30
00:01:57,470 --> 00:02:01,700
Ahora el siguiente paso, es decir, el manual, y vamos a crear nuestro jeeter.

31
00:02:02,360 --> 00:02:04,250
Entonces nos vamos acá al buscador.

32
00:02:04,460 --> 00:02:08,180
Colocamos nav var, por ejemplo, acá nav.

33
00:02:08,870 --> 00:02:11,330
Acá tenemos diferentes ejemplos.

34
00:02:12,170 --> 00:02:13,700
Acá tenemos menú de navegación.

35
00:02:14,990 --> 00:02:16,460
Tenemos otros tipos.

36
00:02:17,440 --> 00:02:21,220
Hay un montón de ejemplos que podemos utilizar.

37
00:02:21,730 --> 00:02:29,080
Vamos a ocupar el primero, el más completo, copian acá un clic en Copy y volvemos al auto.

38
00:02:30,030 --> 00:02:37,740
Pero lo vamos a copiar en el componente, en el app component, así que nos vamos acá en el app component.

39
00:02:37,830 --> 00:02:40,320
HTML, que sería nuestro componente principal.

40
00:02:40,500 --> 00:02:43,180
Básicamente podría ser nuestro layout, el index.

41
00:02:43,290 --> 00:02:51,060
Básicamente no se toca salvo para colocar algún tipo de estilos como Busta o JavaScript que sean globales,

42
00:02:51,210 --> 00:02:54,600
pero para todo el diseño básicamente no se toca.

43
00:02:54,930 --> 00:02:58,200
Lo que podríamos tocar y manipular es el componente.

44
00:02:58,320 --> 00:03:04,170
El app compone componente principal y acá podríamos tener nuestro menú justo al comienzo.

45
00:03:04,650 --> 00:03:08,280
Después, obviamente, también lo vamos a mejorar, a optimizar.

46
00:03:08,310 --> 00:03:15,060
Vamos a crear componentes, por ejemplo, un componente específico para el IDER que contener el menú

47
00:03:15,210 --> 00:03:21,930
de navegación, un componente para el cuerpo, el body, que sería el contenido principal dinámico que

48
00:03:21,930 --> 00:03:25,050
va cambiando según las rutas de los componentes.

49
00:03:25,170 --> 00:03:27,480
Y finalmente vamos a tener el footer.

50
00:03:27,540 --> 00:03:29,250
También podríamos tener un sidebar.

51
00:03:29,340 --> 00:03:36,330
En fin, por ahora en esta clase vamos a dejar el menú de navegación a secas en App Component, que

52
00:03:36,330 --> 00:03:38,130
básicamente podría ser nuestro layout.

53
00:03:38,340 --> 00:03:40,290
Lo vamos a guardar y ejecutamos.

54
00:03:40,530 --> 00:03:42,660
Recordemos que instalamos un plugins.

55
00:03:43,000 --> 00:03:47,450
Si nos vamos con control Koma nos vamos a package.

56
00:03:48,360 --> 00:03:49,750
Instalamos un plugin.

57
00:03:49,790 --> 00:03:59,010
Es un paquete que se llama Myo y de terminal y podemos acceder a la consola acá con el signo más.

58
00:03:59,900 --> 00:04:06,870
Esa era la consola y podemos ejecutar comandos de Angular Angular Ziel ahí directamente.

59
00:04:06,880 --> 00:04:11,940
Entonces con ingi ser menos open enter.

60
00:04:14,350 --> 00:04:16,450
Ahí se está abriendo la aplicación y acá la tenemos.

61
00:04:16,480 --> 00:04:20,360
Se fijan acá ella se incluye el vostra.

62
00:04:20,500 --> 00:04:27,300
De hecho cambió la fuente ya distinto, está centrado hacia la izquierda y tenemos el menú de navegación.

63
00:04:27,430 --> 00:04:29,380
Acá el track dump no funciona.

64
00:04:29,530 --> 00:04:30,020
Es fundamental.

65
00:04:30,020 --> 00:04:35,980
Cuando estemos trabajando con Angular es habilitar la consola, por ejemplo, con F12, con la tecla

66
00:04:36,070 --> 00:04:36,730
F12.

67
00:04:36,880 --> 00:04:37,810
Esa es una forma.

68
00:04:37,900 --> 00:04:44,740
O bien se pueden ir al al menú acá al costado superior derecho.

69
00:04:45,640 --> 00:04:46,270
Nos vamos.

70
00:04:46,330 --> 00:04:48,890
Amorth Tools y Developer Tools.

71
00:04:49,270 --> 00:04:50,470
Eso sería otra forma.

72
00:04:50,770 --> 00:04:55,440
Entonces la consola importante porque detecta cualquier error que pueda ocurrir.

73
00:04:55,810 --> 00:04:57,430
Y justamente en la consola.

74
00:04:57,580 --> 00:04:59,050
Acá podemos ver un error.

75
00:04:59,290 --> 00:05:00,580
Un error en el bus.

76
00:05:01,050 --> 00:05:06,520
Miren en el archivo JS de vostra que acabamos de incluir justamente acá está lanzando un error y eso

77
00:05:06,520 --> 00:05:12,190
se debe al drop down y es porque nos falta alguna, alegrarías?

78
00:05:12,340 --> 00:05:14,170
Entonces acá está ocurriendo un error.

79
00:05:14,380 --> 00:05:21,610
Acá no se encuentra definido la librería que necesaria para que funcione el los dropdown menu.

80
00:05:21,850 --> 00:05:28,160
Entonces hay que agregar esta dependencia y volvamos a la página de Buttercup y nos vamos al OUM.

81
00:05:28,840 --> 00:05:36,010
Vamos a descargar y acá sí estamos utilizando JavaScript compilado justamente con Angular a través de

82
00:05:36,010 --> 00:05:36,460
The Script.

83
00:05:36,580 --> 00:05:44,350
Necesitamos incluir el Vickery y Proper antes antes del del vostra admin.

84
00:05:44,560 --> 00:05:45,640
Entonces lo copiamos.

85
00:05:45,790 --> 00:05:49,780
Volvemos a autom y tenemos que copiar antes.

86
00:05:49,900 --> 00:05:52,870
Se copia justo arriba del postren bien.

87
00:05:53,170 --> 00:05:55,240
Guardamos una vez guardado.

88
00:05:55,360 --> 00:05:57,550
Volvemos al Akroon.

89
00:05:58,550 --> 00:06:00,020
Al proyecto y el error.

90
00:06:01,070 --> 00:06:02,750
Está funcionando sin ningún problema.

91
00:06:02,840 --> 00:06:08,420
Incluso funciona el drop down menu ya está perfectamente integrado.

92
00:06:08,570 --> 00:06:12,530
Entonces, por eso es importante siempre tener la consola habilitada.

93
00:06:12,680 --> 00:06:14,690
Bueno, estamos trabajando con Angular en todo momento.

94
00:06:14,840 --> 00:06:20,300
Por ejemplo, si estamos en AUTOM y nos vamos al app component.

95
00:06:21,690 --> 00:06:25,440
Y acá tenemos, por ejemplo, curso y profesor.

96
00:06:25,740 --> 00:06:32,280
Por ejemplo, si concatenados, más un concatenar y se me olvidó colocar, por ejemplo, en la cadena

97
00:06:32,430 --> 00:06:35,290
o la variable y guardamos automáticamente.

98
00:06:35,290 --> 00:06:37,800
Acá no muestra el problema que está ocurriendo.

99
00:06:37,920 --> 00:06:44,280
Entonces es importante siempre desarrollar con la consola habilitada de Krom.

100
00:06:47,980 --> 00:06:48,520
Perfecto.

101
00:06:48,650 --> 00:06:50,260
Bien, quedamos hasta acá.

102
00:06:50,380 --> 00:06:53,230
Cualquier duda que tengan la revisamos en el foro.

103
00:06:53,350 --> 00:06:54,220
Hasta la próxima.