1
00:00:00,180 --> 00:00:05,800
Bienvenidos en esta clase vamos a ver las directivas estructurales, comenzando con Henry Ford.

2
00:00:05,970 --> 00:00:10,950
Vamos a crear un nuevo componente que le vamos a llamar directiva, pero ahora sí que lo vamos a crear

3
00:00:10,950 --> 00:00:15,720
completamente de forma automática utilizando generate component.

4
00:00:15,930 --> 00:00:25,560
Nos vamos a la consola de Angular y con el comando MJI generai vamos a colocar component, es decir,

5
00:00:25,620 --> 00:00:29,190
vamos a crear un componente de Angular y le damos el nombre.

6
00:00:29,370 --> 00:00:31,140
Le vamos a colocar directiva.

7
00:00:32,370 --> 00:00:35,510
Entonces Aiji genere componen directiva.

8
00:00:35,640 --> 00:00:36,960
Eso sería una forma.

9
00:00:37,980 --> 00:00:41,550
Otra forma es usar el alias para abreviar.

10
00:00:41,970 --> 00:00:47,820
Entonces, en vez de usar y generate usamos simplemente Augé y en vez de usar component usamos la CE

11
00:00:47,910 --> 00:00:51,130
de compra y después el nombre componente enter.

12
00:00:51,630 --> 00:00:55,290
Eso automáticamente va a crear el HTML del componente.

13
00:00:55,440 --> 00:01:03,120
Va a crear también el archivo para las pruebas unitarias, la clase component y también el estilo CSS

14
00:01:03,180 --> 00:01:07,530
y todo dentro de un directorio de una carpeta con el nombre componente.

15
00:01:07,740 --> 00:01:14,460
Entonces, si nos vamos ahora a app directiva, acá tenemos otro componente y además al final actualiza

16
00:01:14,550 --> 00:01:15,570
el app móvil.

17
00:01:15,810 --> 00:01:23,400
Justamente para registrar este componente en nuestra aplicación, abramos el app móvil y observamos

18
00:01:23,430 --> 00:01:25,230
que automáticamente importa.

19
00:01:25,320 --> 00:01:26,520
Directiva component.

20
00:01:27,030 --> 00:01:29,610
Luego se define en Declaration.

21
00:01:29,730 --> 00:01:32,460
Acá se declara justo después de footer.

22
00:01:32,910 --> 00:01:35,340
Por lo tanto, está todo de forma automática.

23
00:01:35,460 --> 00:01:36,690
Crea la clase.

24
00:01:36,780 --> 00:01:43,920
Acá tenemos la clase directiva, crea el HTML, crea la hoja de estilo, en fin, crea todo.

25
00:01:44,460 --> 00:01:52,680
Vamos a borrar el archivo de testing y vamos a abrir nuestra clase directiva component y la vamos a

26
00:01:52,680 --> 00:01:53,370
simplificar.

27
00:01:53,520 --> 00:02:00,840
Acá implementa la interfaz on init para manejar el ciclo de vida, el evento cuando se inicializa componente,

28
00:02:00,900 --> 00:02:05,910
pero como no lo vamos a ocupar simplemente mejor eliminar lo mejor, tener lo justo necesario.

29
00:02:06,030 --> 00:02:08,790
Y también tiene un constructor que construye el objeto.

30
00:02:09,060 --> 00:02:15,990
Ahí tenemos nuestra clase directiva y crea todo de forma automática el selector, el template RL y la

31
00:02:15,990 --> 00:02:16,590
hoja de estilo.

32
00:02:16,710 --> 00:02:21,960
La hoja de estilo tampoco lo vamos a utilizar para este ejemplo, así que la podemos quitar, se puede

33
00:02:22,050 --> 00:02:25,500
eliminar y dejamos solamente el template o RL y el selector.

34
00:02:25,830 --> 00:02:30,270
Por lo tanto, también podremos eliminar la hoja de estilo, el archivo CSS.

35
00:02:31,680 --> 00:02:33,450
Bien, hasta ahí estamos perfecto.

36
00:02:33,600 --> 00:02:40,600
Vamos a crear un atributo, le vamos a llamar lista curso del tipo String.

37
00:02:40,680 --> 00:02:44,010
Pero es un arreglo, así que lo vamos a dejar con corchete igual.

38
00:02:44,070 --> 00:02:48,810
Recordemos que todo arreglo se define con corchete y vamos a tener acá los elementos.

39
00:02:48,970 --> 00:02:51,300
Y por ejemplo, acá vamos a tener descrip.

40
00:02:51,390 --> 00:03:05,580
Por ejemplo, lleva a scrip yaba estándar de o yaba simplemente y por ejemplo se echarpe y php.

41
00:03:06,530 --> 00:03:07,290
Acá faltó la cola.

42
00:03:07,530 --> 00:03:11,370
Bien, acá tenemos entonces un arreglo, una lista.

43
00:03:11,430 --> 00:03:16,670
Entonces la idea iterar sobre este arreglo utilizando la directiva en ti for.

44
00:03:16,860 --> 00:03:17,550
En la vista.

45
00:03:17,880 --> 00:03:20,140
Ahora vamos a ir a directiva compra.

46
00:03:20,430 --> 00:03:21,830
Entonces acá la idea.

47
00:03:21,930 --> 00:03:24,750
Bueno, vamos a quitar el código que viene de ejemplo.

48
00:03:25,140 --> 00:03:28,560
Guardamos y acá vamos a tener nuestro en Gifford.

49
00:03:28,770 --> 00:03:36,240
Por ejemplo, podríamos tener un div y dentro del dir podríamos tener una lista, un uele y también

50
00:03:36,330 --> 00:03:36,810
lehet.

51
00:03:37,530 --> 00:03:46,660
Nuestro div va a tener una clase de vostra card y el whele va a tener también vostra.

52
00:03:46,800 --> 00:03:48,850
Vamos a utilizar list group.

53
00:03:50,250 --> 00:03:54,150
Y por supuesto, el li son los items.

54
00:03:54,270 --> 00:03:59,370
Entonces sería List Group Item y además podríamos tener un título.

55
00:03:59,640 --> 00:04:05,550
Vamos a utilizar undir también, por ejemplo, listado de cursos.

56
00:04:10,150 --> 00:04:13,690
Un carth ider guárdanos con control s como siempre.

57
00:04:14,090 --> 00:04:22,360
Y la idea es iterar o mostrar cada curso dentro del uele, en cada ítem.

58
00:04:22,480 --> 00:04:29,470
Entonces, en la etiqueta que queremos repetir varias veces por cada elemento de la lista del arreglo,

59
00:04:29,920 --> 00:04:31,810
queremos repetir en este caso el lï.

60
00:04:31,930 --> 00:04:40,990
Entonces en Helí vamos a utilizar la directiva en Whitford, primero con el austriaco, en Yi for Gifford

61
00:04:41,170 --> 00:04:41,800
igual.

62
00:04:42,010 --> 00:04:46,790
Y acá va toda la estructura y la estructura sería la variable.

63
00:04:46,930 --> 00:04:51,100
Utilizando Lett, por ejemplo, curso off del arreglo.

64
00:04:51,190 --> 00:04:54,610
En este caso, el arreglo sería lista curso.

65
00:04:56,950 --> 00:04:58,320
Eso sería una forma.

66
00:04:59,020 --> 00:05:00,610
Otra forma un poco más automática.

67
00:05:01,180 --> 00:05:08,710
Escribimos en TxI y acá tenemos el en již for que esto lo probé el plan Jinns para trabajar con Angular

68
00:05:08,800 --> 00:05:14,980
doble clic en esta directiva y automáticamente nos genera el Gifford con su estructura.

69
00:05:15,310 --> 00:05:18,820
Acá tenemos la variable por cada elemento que estamos integrando.

70
00:05:19,870 --> 00:05:28,520
Curso off y el arreglo la lista que sería lista curso tenemos nuestro en Ford.

71
00:05:28,660 --> 00:05:37,030
Entonces vamos a repetir tantas veces este elemento li como elemento tengamos en nuestro arreglo holista.

72
00:05:37,240 --> 00:05:41,110
Acá tenemos que mostrar el valor de cada elemento de la iteración.

73
00:05:41,200 --> 00:05:48,400
Entonces, como siempre, utilizando las llaves de interpolación de String, vamos a imprimir el curso

74
00:05:49,300 --> 00:05:55,500
que el curso sería justamente nuestra variable lett que contiene el nombre, el nombre del curso.

75
00:05:55,930 --> 00:05:57,670
Vamos a guardar y vamos a ejecutar.

76
00:06:00,340 --> 00:06:04,510
Entonces con Engine Cerf menos o vamos a levantar el servicio.

77
00:06:04,600 --> 00:06:09,940
Tenemos creado nuestro componente, pero en ninguna parte le hemos dicho dónde la vamos a utilizar.

78
00:06:10,000 --> 00:06:11,590
Recuerden que importante el selector.

79
00:06:12,890 --> 00:06:18,410
Bien, ahí tenemos nuestra aplicación, pero en ninguna parte hemos utilizado el selector de nuestro

80
00:06:18,410 --> 00:06:20,120
componente directiva.

81
00:06:20,210 --> 00:06:27,380
Si se fijan acá el app directiva, el nombre selector y si queremos mostrar el contenido de este componente,

82
00:06:27,590 --> 00:06:29,030
utilizar este componente.

83
00:06:29,120 --> 00:06:31,970
La tema es que colocar en algún lugar de nuestra aplicación.

84
00:06:32,060 --> 00:06:38,480
Entonces, para poder mostrar la lista de curso tenemos que utilizar este selector donde por ejemplo

85
00:06:38,570 --> 00:06:42,380
en a componer HTML que es el componente principal.

86
00:06:42,500 --> 00:06:46,280
Y acá vamos a quitar el uele li que tenemos del curso profesor.

87
00:06:46,460 --> 00:06:50,690
Vamos a colocar el selector directiva justamente acá.

88
00:06:51,410 --> 00:06:52,220
Vamos a guardar.

89
00:06:52,580 --> 00:06:53,660
Tenemos esta discri.

90
00:06:53,750 --> 00:06:54,860
Ya escribí, ya está.

91
00:06:54,860 --> 00:06:56,780
Entredichos se echarpe y PTP.

92
00:06:57,050 --> 00:07:03,500
Entonces acá tenemos nuestro primer ejemplo utilizando Gifford para iterar, cosa que vamos a seguir

93
00:07:03,590 --> 00:07:05,420
utilizando en nuestro curso.

94
00:07:05,540 --> 00:07:06,350
Kedamos hasta acá.

95
00:07:06,410 --> 00:07:07,280
Hasta la próxima.