TALLER DE INTRODUCCION A ANGULAR
1. Instalar nodejs:
[Link]
2. Instalar cliente angular:
[Link]
3. Ejecutar el comando
4. Ejecutar el comando
5. En el navegador
[Link]
6. En la página [Link] se observa la etiqueta <app-root></app-root>
7. En el archivo [Link] se hace referencia a ese selector:
8. En [Link] se encuentra el contenido inicial de la página.
9. Para crear un nuevo componente: Ejecutar el comando
10. Instalar Bootstrap en [Link]
11. Copiar cualquier navbar de la página:
[Link]
12. Pegar el navbar seleccionado en el archivo: [Link]
13. En [Link] llamar el componente app-navbar:
14. Crear un nuevo componente llamado variables
15. En [Link] llamar el componente variables app-variables
16. En el archivo [Link] declarar la variable nombre:
17. En el archivo [Link] llamar a la variable nombre:
18. Pasar a mayúscula el valor de la variable nombre de la siguiente forma:
19. Declarar la variable “nota” como numérica en el archivo [Link] y hacer el
su respectivo llamado en el archivo [Link]
20. Sumar 100 a variable nota de la siguiente manera y observar los cambios:
21. En el archivo [Link] agregar un botón:
Se observa el llamado a una función en Typescript cambia un poco con el tradicional
javascript que se ha trabajado.
22. En el archivo [Link] implementar la función cambiar_nombre dentro de
la clase VariablesComponent. Guardar y probar en el navegador.
Observar los cambios
23. En el archivo [Link] agregar el componente forms
24. En el archivo [Link] agregar un input tipo text:
*En [(ngModel)]=model: los paréntesis son para emitir un evento y las llaves cuadradas son
para recibir un evento, por lo tanto esta caja de texto va a emitir y a recibir valores y además
se está enlazando a la variable nombre. Observar cómo al escribir algo en este campo se
actualizan los demás campos enlazados a la variable nombre.
25. Crear un nuevo componente llamado atributos
26. Guardar la siguiente imagen en la carpeta: assets/img
27. Colocar la etiqueta correspondiente al modulo de atributos en el archivo
[Link]
28. En el archivo [Link] declarar la variable nombre_alt
29. En el archivo [Link] agregar la imagen de la siguiente manera:
*Se observa cómo el atributo alt al encerrarlo en llaves cuadradas toma el valor de la
variable nombre_alt declarado anteriormente
30. En el archivo [Link] declarar la variable url_imagen
31. Actualizar el atributo src de la imagen:
* Lo anterior para imágenes dinámicas
32. Crear un nuevo componente llamado estructurales
33. Colocar la etiqueta correspondiente al módulo de estructurales en el archivo
[Link]
34. En el archivo [Link] declarar la variable “mostrar”:
35. En el archivo [Link] colocar dos títulos “Mostrar” y “No mostrar”
36. La directiva ngIf permite hacer evaluaciones lógicas o variables booleanas, en este caso
para hacer visible o no un texto. Colocar la directiva ngIf como se muestra a continuación y
observar los resultados:
37. En el archivo [Link] declarar un arreglo de strings:
38. Usando la directiva ngFor puede imprimirse el arreglo de la siguiente forma:
39. En la carpeta /src/assets crear una nueva carpeta llamada data y guardar el archivo
[Link] que se encuentra en la plataforma virtual.
40. Crear un componente llamado http
41. Se debe crear un servicio para poder compartir información, métodos o procedimientos
entre componentes, para eso se debe ejecutar el comando:
42. En el archivo [Link] importar el servicio anteriormente creado
([Link]), y de una vez importar también el módulo httpCliente propio de
angular que sirve para hacer HTTP y hacer peticiones a servicios REST.
43. En el archivo [Link] importar el servicio:
44. Se hace una inyección de código. En el archivo [Link]
45. En el archivo [Link] se debe importar el módulo HttpClient, e inyectarlo en
el constructor:
46. En el archivo [Link] crear la función cargarDinosaurios, y observar en la
consola del navegador los resultados:
47. En el archivo [Link] escribir el siguiente html y observar en el navegador los
cambios:
